0

I'm having a problem plotting html elements over the image that was made by converting the PDF using ImageMagick.

Once I finished converting the PDF to image, I displayed it on the HTML with the PDF size that I got using the function getTemplateSize() of mPDF hoping that it would render exactly the same as the PDF. But once I write the html element to the PDF using the same position. It's not placed properly.

The PDF size is 215.9mm x 279.4mm which is an A4 size, as I said, I got it using mPDF. I set the image size to 215.9mm x 279.4mm to get an A4 size.

I uploaded a screenshot for reference, left image is the image rendered on HTML with overlayed html elements, right image is the actual PDF that I edited using mPDF to write the same checkbox in place.

Any advices? Please help. Thanks.

Reference: Convert PDF to HTML in PHP similar to DocuSign

PS. Checked if there are hidden margins or paddings while I render the image on HTML, nothing.

// HTML Element over the image from PDF
<div class="singeCheckbox-1" style="position: absolute; top: 74.8mm; left: 13.8mm;">
    <input type="checkbox" class="pdf-checkbox" onChange="pdfSingleCheckbox(this)">
</div>

// HTML Element write to PDF
$html = '<div style="position: absolute; top: 74.8mm; left: 13.8mm;">
            <input type="checkbox" checked="true" style="font-size: 16px;">
         </div>';

enter image description here

Solution: I was right all along, there's just something wrong with how I render my checkbox on the html, because I put a customized div that shows a fake checkbox on html instead of the actual checkbox. That's why the positions are different when rendered on the pdf because the position that I have was the customized checkbox.

fsnight
  • 17
  • 1
  • 7
  • ImageMagick does not rasterize PDF according to units of mm. Those are print sizes. You want to rasterize the PDF by specifying a density before reading the PDF. `convert -density XX image.pdf image.suffix`, where the default density is 72. If the html does not match, check the default density for your convert process and for your html to be sure they are the same. Use pixels rather than mm. – fmw42 Sep 16 '19 at 23:11
  • I am using the command `convert -density 300` because lower than that, the image loses its quality. It becomes blurry and distorted, I've tried different densities, it's all the same size but different quality once I render it on HTML using the same size of the PDF. – fsnight Sep 16 '19 at 23:21
  • To get high quality and default density try: `convert -density 288 image.pdf -resize 25% image.suffix`. A density of 300 by itself will be way to large to match some likely density you measure on an HTML page. Check the default rendering density of your browser when measuring the location of elements on the HTML page. Sorry, I do not understand how you measure where elements are in HTML. It depends upon how the HTML is rendered and the browser default density. Are they off when printing or when viewing after overlaying? – fmw42 Sep 16 '19 at 23:28
  • Tried your command, image became blurry when rendered to HTML with the A4 size, removed the A4 size and the image is too small. I also checked if the A4 size given by mPDF is correct using this tool https://www.unitconverters.net/typography/millimeter-to-pixel-x.htm, I guess it is correct. I just dont know why there is a little inconsistency. I can't manually adjust the image sizes on html, I need it to be dynamically change depending on the PDF size because in the future, users will just upload PDF so that they can create a form on the PDF by overlaying html elements. – fsnight Sep 16 '19 at 23:54
  • Actually I'm just creating a
    styled to have an a4 size `
    ` then put the image inside of it so that the image will be rendered exactly the same as the PDF because I need to overlay html elements on absolute positions on the image. Having the same size with PDF, I am expecting that the html element that I overlayed on the image will be on the same place on the PDF because they have the same page size which is an A4.
     – fsnight Sep 17 '19 at 00:11

0 Answers0