This the scenario: A user enters data into an online form, the server does some calculating and inserts the results into a given PDF source file using mPDF. I realize this could be done with editable PDF forms alone, but there is more stuff going on (like generation of diagrams) -- suffice it to say I'll have to stick with mPDF for now.
Until now I have been positioning the text on the PDF manually (measuring the offset in InDesign) but I always thought there had to be a way to do this more efficiently.
What I have in mind:
I open the PDF source file in the browser (e.g. using pdf.js), create boxes at the positions I'd like to draw on and then calculate their absolute position, width, height (see image below) This data I can then easily use to generate the needed html/css output for mPDF.
.
I wanted to check if anyone had a better idea to achieve this goal before I started diving into pdf.js. Thanks in advance.
Related
I'm not sure what tags this would fall under so I apologise if the scope is too large! I'm currently trying to build a site where a user would write their name into a form and select a template to build on top of. The site would then generate an image of their name and put it over a specific box on the image template they selected.
If anyone has some suggestions on how I could approach this / resources that would help, I'd really appreciate it.
An example is posted below:
To write and manipulate image in PHP, use Imagick or PHP GD.
I would recommend Imagick as it has more image formats and quality is better. But if you want fast rendering, use GD.
Using Javascript, you can use Canvas. Here is an example to use canvas to write on image How to add text on image using JavaScript and Canvas
Hello
I'm trying to implement a little project that allow me to sign a PDF document, I already implement an Html 5 pad to draw the signature and get the Image to stamp into the pdf.
I'm using the signature_pad library from Github:
var canvas = document.querySelector("canvas");
var signaturePad = new SignaturePad(canvas);
signaturePad.toDataURL(); // save image as PNG
signaturePad.toDataURL("image/jpeg"); // save image as JPEG
signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...");
signaturePad.clear();
signaturePad.isEmpty();
signaturePad.off();
signaturePad.on();
My big problem is how can I know the place where the user have to stamp the signature into the pdf, because the pdf it is not the same, user could upload it's own pdf.
Could anyone help me with any orientation about this, I really appreciate your help.
I have done something exactly like this:
Upload the PDF to the server.
Use GhostScript to generate images for each of the pages.
Use pdftk to create a report on the pdf.
Get the image dimensions from the report. Note that some pdf's are rotated so for example if rotation in the report is 270 (270/90 = odd) you must swap width and height.
Use jquery to allow drag and drop of signature locations over a div with the generated image pages as content. Set the images to fixed width so that you can use that number to calculate position later.
Calculate the absolute position of the signature locations relative to each page. It's important to get the position per page, not for the entire document. Height will not be accurate enough for the entire document, causing position to be off over multiple pages.
Use wkhtmltopdf to generate a pdf overlay with just the signatures. Use exact page size in mm (as you retrieved from the report), not a preset page size. If your absolute measurements are in pixels(points) you must convert to mm or vice versa (0.352777.. pixels per mm).
When generating the pdf html, you can use page-break-after: always !important; to start a new page, then absolute position the signatures in a div after that.
Use pdftk to merge the overlay pdf with the original.
I'm really curious as to how sites like RightSignature and PandaDoc provide the drag and drop capability on a PDF. Basically, you upload a PDF to their site, then they display the PDF in a window (all the pages -- scrollable), then they have a panel on the side of the PDF viewer that has one to many form fields in it and the site allows you to drag those fields onto the PDF as placeholders.
I get that they are basically just recording the X/Y coordinates of where the form element is being placed. But how do are they actually accomplishing this from a technical perspective?
I know how to handle the PDF upload. I just don't know how to display the PDF and basically create an overlay that allows the user to drag fields onto it and record the x,y coordinates. This way when I want to create a version of that template, I know where to put the fields on the PDF.
Even if this question is quite old, I share my solution realized using the following libraries:
pdf.js (that renders a PDF file as an HTML component allowing the capturing of coordinates)
interact.js (for the drag and drop of placeholders)
Check my solution pushed to GitHub https://github.com/ValerioEmanuele/drag-and-drop-placeholders-into-PDF
I have several 1000s of images on disk that I need to display a subset of, given user search criteria. What this means is I could be showing 100s at one time. Each image is large- 3510x1131 to be exact. And I need to do some light image processing before they are displayed (adjusting brightness and contrast).
My application to do this is a Web.API app using jQuery.
My first pass was to just pass the URLs to the browser and then size the images and make those adjustments using pixastic. Works, but it's pretty slow.
I was thinking it would be much faster if I could resize the image before doing the adjustments, but I dont want to create copies and then link to those. Maybe there is a way to generate the images on the fly and serve them up? Via REST perhaps? Bottom line is I need a LOSSY image resize, not just setting width and height using css.
Are there tools out there that I am missing or has anyone done something similar? I think what Im looking for is exactly like google image search results- but I don't know how they generate those thumbnails- and if I were to adjust brightness/contrast am I doing it on the thumbail (saving time) or the full size image?
I am learning to develop mobile applications, quite in the initial phase.
This query is not related to mobile but more to html/css/js.(for
I intend to make a simple game, where a picture is seen, a few options are available and the user can drag and drop these options onto the image.
eg. There is an image of a plant > options are #leaf #stem #flower #bud
The user must drag and drop the correct option to the correct place on the image to get points. i.e Drag the #leaf option onto the leaf of the plant.
Now my problem is the image, the separation of these points, I can't figure out how to do it.
Query in short: How do I access separate points/sections on a single image in html/js for above purpose?
Query (longer version)
I did a little search and realised I can slice the image and recreate it using multiple images, I tried this, it sort of works but it has a a lot of drawbacks:
1)More images mean more space, combined size of the split images was about 1.5x the original image(this is just splitting it into 4 images)
2)For a complex picture, the number of images to slice into is large and hard to manage in css(n00b==me) as they don't just need to be split into a simple X*Y grid but a much more complex split depending on the object in the image.(realised when I was trying to do a simple cell structure img)
3)More images also means more http requests(in case the app is WebView based) which will increase loading time.
It just seemed liked too much of a hassle, there must be a better way.
Then I saw css sprites , I dont need to combine my images like sprites are intended for, rather the reverse. Just access parts of my pre-existing image, as separate objects.I haven't tried this(working on it) and and I haven't seen this being done either, or maybe its being done and I'm not seeing.
Please help guys, my problem is quite simple(I think) , I think I'm just not getting the correct google search terms.
If anybody has any ideas,links, resources and also any clarifications as I may not have put up my problem as clearly as I'd like to, please do reply.
regards,
Rahul Agarwal
You could try to place transparent divs over the main image using absolute position and fixed dimensions. Those divs will be assosiated to the possible options, and when a user drops an option over some specific div, you'll know what points to give.
Little demo using two divs and an animated scaling to show that the positioned divs will scale according to their parent:
http://jsfiddle.net/VK3A8/
fiddel with image:
http://jsfiddle.net/8qLFc/4/