I'm trying to create a pdf file of user designed HTML that will then be send to a printing house for print and delivery. The printing house wish me to add crop marks on the .pdf.
I'm currently doing this with CSS by placing position: absolute; images over the design with the crop marks. However the Printing Software that the printing house is using can not "find" these Crop Marks.
I guess because I'm not doing it in the "official way".
Is there any functionality of creating crop marks with wkhtmltopdf? How do I make printers or other software understand that the images I included in the document is cropmarks and not just some normal image part of the content?
How is the page's CropBox defined? Also you may check out the section 14.11.3 Printer’s Marks, of the PDF specification and find how you can get it working with your software.
from spec:
The crop box defines the region to which the contents of the page shall be clipped (cropped) when displayed or printed. Unlike the other boxes, the crop box has no defined meaning in terms of physical page geometry or intended use; it merely imposes clipping on the page contents. However, in the absence of additional information (such as imposition instructions specified in a JDF or PJTF job ticket), the crop box determines how the page’s contents shall be positioned on the output medium. The default value is the page’s media box.
Related
I'm using regular imagefields on various content types in a Drupal 7 social website (and also on the user profile pictures via http://drupal.org/project/imagecache_profiles). For cropping I'm using http://drupal.org/project/imagecrop as an image style effect.
I would like to replace the original image with the one generated from the imagecrop style. How do you replace the original image from a user (the one that gets used for subsequent image styles when you say call it in views) with one that is created from an image style effect?
I'm not sure the best way to approach this problem, which is why I posted question.
To make sure I'm being clear -
A User uploads a large image (say 2,000 pixels by 1300 pixels) via a regular imagefield.
Using image styles, I perform some effects (specifically javascript crop, but this could be generic) and then replace the original image with the one generated from the image style.
All additional image styles (different sizes etc) use the new original images and are derived from it.
I think this can be done easily using a custom module and they must have used something like the image editor project - See drupal.org/project/imageeditor, just not sure what hooks to use or how to jump in on this. Any advice, tips or direction would be great.
Check module - Original image with style
I believe you can address your problem by making changes under the display settings for your field:
/admin/structure/types/manage/[your content type machine name here]/display
Image this scenario:
There is a picture locally in my server, where a sketch is displayed, and there is a "blank hole" area on it.
Then, a user can upload another picture to my server.
What i'm trying to achieve is this:
After image upload is finished, the first image (the one with the "hole") is displayed, and behind it is displayed the user's photo, so that you can see it through the "blank hole" area of the first photo.
Then the user can move his picture (drag & drop style) so he can choose which area of it is visible through the "blank hole".
Then i would like to save the result - by merging the 2 photos or keeping the position of the user's picture in a db so i can display it again later.
(Something like this more or less)
What kind of technollogy should i look for? I'd guess javascript(for the drag & drop) or html5 or php(for merging the photo)?
Are there any libraries that i can use?
I hope my explanation isn't too messy, i didn't even know how to google for it.
I don't know if there are better solutions (and I suspect there are), but I suspect all of this can be done with not too much trouble. Here's a rundown of one way to approach the problem:
Use a JavaScript-powered "upload widget" such as uploadify to enable your user to upload "his" image to the server. The server will do some processing on the image (e.g. resize and crop to suitable dimensions) and save it using e.g. PHP's gd library. It will return a URL to the "prepared" image back to the browser -- all of this through AJAX.
The browser then has a URL to the user's image, so using more Javascript you can dynamically add an element that displays it inside the page and allow the user to move it around with e.g. jQuery draggable. Compositing the draggable image behind your static content (the image with the "hole") is a detail you will have to take care of using a combination of HTML, CSS and again Javascript.
When the user is done, use an AJAX call (e.g. again jQuery) to inform the server of the image's positioning (this will be available through the facilities of the Javascipt framework you have selected). The server can then "compose" the two images together (gd or something equivalent once more) and return to the browser a URL through which the final product can be accessed.
Of course there are lots of details to take care of here, but knowing exactly what the plan is should help you get started.
Have a look at the PHP GD extension. If it's installed, it's pretty easy to have an image (with a transparent center) to be merged on top of a second image that a user would upload.
Have a look at http://php.net/manual/en/function.imagecopymerge.php
Ok to get you started, yes use a JavaScript drag and drop module for the placing of the image. You can record the x /y cordinates relative to the container. Do the image merging with a PHP image library / Class. Something like this : http://www.phpclasses.org/package/3930-PHP-Generate-an-image-from-the-combination-of-2-images.html
I'm building a chart populated from the database. Now, I wanted to click each point to drill down some information to users. I don't know how to integrate image mapping to each element of the chart dynamically created on the fly. Can you please provide as sample codes, links or articles regarding this subject. Thanks and more power to SO.
Client-side image maps are basically set areas overlayed on an image configured to be click-able links. The links can either be javascript or point to other pages. The area shape options are rectangle (rect), circle (circle), and polygon (poly), and you can set the area dimensions and locations relative to spots on the image. The link above shows examples. When you build the image map from server side script, you'd have full control over the areas (perhaps an entire bar) and their associated links (perhaps leading to a query script with the ID number of the label attached).
Basically, you have to build the chart twice in your scripts: 1st script building and serving the image, 2nd script (the main html view) building a matching map with set of coordinates to fit over the image.
You might also be interested in Server-side image maps. When you set an IMG element property of ismap and wrap the image element in a clickable hyperlink, it allows it so the user can click anywhere on the image, and the coordinates of where they clicked (x,y) will be automatically sent as extra GET parameters along with the hyperlink. On the server side script, look for the $_GET key that looks like coordinates (IE the keyname will be "355,71" if the client clicked on x355, y71 on the image). You'd then translate these numbers to areas on the dynamic chart.
I am trying to export some dynamic content into a PDF file with a small bit of page formatting.
I'd like to have the PDF pages have a small padding with a border and then inside that border, a small company logo should appear up the top right on each page.
Now the issue is that because the content is dynamic, the number of pages and content per page can vary. This means I can't manually create a DIV with a border and an image inside because the content could be more or less pages depending on what gets exported.
I'm trying to find a way to create a 'page background' for each PDF page and then in this background I would then draw up the borders and the logo and then have all the content superimposed on this customer background.
Is this even at all possible with DOMPDF? Or are there any alternatives that may provide a little more customisation like this?
jfoucher's method could be what you need, but if you need an HTML content and/or a logo on each page, you could also use DOMPDF from the SVN trunk, and use fixed positionning, like if the "CSS position fixed" example here.
This is indeed possible with dompdf.
What I do is simply set the following CSS properties (or similar) on the body:
body{
background-image:url('/assets/img/bg_pdf.jpg');
background-repeat:no-repeat;
background-position: 15px 1450px;
}
In this case, I am using it for a page footer, but change these values according to your needs. The pixels values are obtained by trial and error... The background is an actual image, which you'll have to create in an image editor.
I am trying to create an interface to allow easy editing of PDFs like VuePDF in an application I am building. This is not core to the application and will only be used by the admin.
I was wondering if there was a per-built stack for editing PDFs in the browser window?
Basically the admin user needs to black-out private data, like names and addresses.
If there is not currently a solution I was thinking of some like:
Using ImageMagik to create JPEG version of each page
Using the canvas element to add black marks to the image
Recording the location of top-left and bottom right of each black mark
Sending back the coordinates and adding black rectangles to the original PDF
Is that correct?
If you draw over the PDF, the data will still be there in the PDF and easy to extract. I wrote a blog article explaining the issue at http://www.jpedal.org/PDFblog/?p=553
You need to replace the text in the PDF command stream as well.