I have a page which displays some iamges and everything works fine. When I use cfhtmltopdf to generate a PDF of the page some of the images are rotated 90 deg and others are rotated 180. Most of the images appear correct, but as I say, some are rotated. I get the same results if I use cfdocument.
I have tried using style="image-orientation:from-image;", but that made no difference.
Does anyone have a suggestion of what I might try? Thanks
Could you please share your code? Indicate the location of the images. That will enable us to see what you see.
Here is the code for the main page:
<cfhtmltopdf destination="ImageTest.pdf" source="ImageTestTemplate.cfm" overwrite="true" /> <CFINCLUDE TEMPLATE="ImageTestTemplate.cfm">
Here is the code for the template:
<CFOUTPUT> <TABLE BORDER=0 ALIGN=CENTER class="TableInfoX" cellpadding="5px" xstyle="border:20px solid blue;"> <TR><TD ALIGN=CENTER><img src="DirectoryPhotos\ImageOK.JPG" HEIGHT="200px" style="image-orientation:from-image;"></TD></TR> <TR><TD ALIGN=CENTER><img src="DirectoryPhotos\ImageProblem1.JPG" HEIGHT="200px" style="image-orientation:from-image;"></TD></TR> <TR><TD ALIGN=CENTER><img src="DirectoryPhotos\ImageProblem2.JPG" HEIGHT="200px" style="image-orientation:from-image;"></TD></TR> </TABLE> </CFOUTPUT>
Here are the links to the three images, ImageOK.jpg, ImageProblem1,jpg and ImageProblem2.jpg:
When I run the all three images appear correctly on my page. But in the PDF file created ImageProblem1.jpg is rotated 180 degrees and ImageProblem2.jpg is rotate 270 degrees.
You're right. 😞 ColdFusion rotates two of the images during the conversion to PDF. With cfdocument as well as with cfhtmltopdf.
I do believe it is a bug. Please report it and, when you do, include a link to this page.
I reported the bug.
Adobe will most likely respond with "not a bug" and mark it complete.
We use WKHTMLTOPDF and were encountering the same issue. It was due to embedded rotation metadata in the image. The HTML renderer is not guilty of rotating as it simply tries to do the right thing.
Our workaround was to use GraphicsMagick to convert uploaded JPGs to the RGB color space (CMYK may cause problems) and enable "auto-orient" so that the images are correctly rotated & saved. This has solved the problem on our end. (Corrected images = correct PDF.) We also resize overly large images in an effort to reduce bloated PDF sizes. (WKHTMLTOPDF generally generates smaller PDFs anyway.)
We additionally integrated ImageMagick so we could auto-convert uploaded iPhone/Mac HEIC/HEIF images to JPG. (Some users were changing the file extension and expecting the file to become a JPG image.)
You beat me to it, Jamo. I also discovered last night that the rotation occurs on wkHtmlToPdf.
In addtion, I opened each of the JPGs in MS Paint, then chose "saved as" to overwrite the existing image. When I ran Fred's code, there was no longer any rotation. 🙂
I wonder whether, in spite of our discovery, it still qualifies as a ColdFusion bug. My reason is as follows.
CfhtmlToPdf is a service. It promises to convert HTML to PDF. However, in this particular case the PDF is not a faithful conversion of the HTML.
If Adobe is using WKHTMLTOPDF, they are probably using an older version. There are some occasional rendering bugs in WKHTMLTOPDF that will never be resolved by Adobe using older versions of WKHTMLTOPDF or adding a built-in CFML wrapper to make it easier to use. If "not a bug", the response will be "works as expected". We were assisting a third-party transition to WKHTMLTOPDF and their entire report was a single table with lots of embedded tables. (I'm not even sure that their HTML was 100% valid.) WK was overlapping images while CFDocument didn't. Our advice was to use modern HTML5/CSS3 and avoid using tables for layout.
Back in ColdFusion 8/9, I was having issues when using small PNG images with CFDocument. Regardless that all filenames were unique, the first used PNG image would be cloned to all following PNG images when rendering. Adobe uses a very outdated version of iText and was unable to fix it. (They said they couldn't even reproduce the bug.) My response to their inaction was to find an alternate solution.
Regarding my solution (using GraphicsMagick to fix rotation), I don't think Adobe should add extra steps to internally download & optimize images when generation a PDF using CFHTMLTOPDF. This will hurt performance and potentially introduce other problems.
The reported bug ID is CF-4210961 https://tracker.adobe.com/#/view/CF-4210961 (If you tweet it, the URL may become mangled.)
Thank you all for help. I did what BKBK suggested, namely to "open each of the JPGs in MS Paint, then chose "saved as" to overwrite the existing image." The "saved as" images were not rotated. So everything is OK. I still wonder how the HTML browsers were able to display all my photos correctly. I assume that the HTML ignored the EXIF data. But then, if the EXIF data is not necessary to correctly display the photo, I wonder why the camera puts it in there.
Maybe what I should do is to use some Coldfusion code to remove the EXIF data whenever a photo is uploaded.
Anyway, thanks for your.
The following code gives us a clue. It uses imagegetexifmetadata to provide metadata about the images.
You will see that there is no metadata for ImageOK.JPG. Whereas, there is metadata for ImageProblem1.JPG and ImageProblem2.JPG. The metadata includes an "orientation" property having a value of "Top, left side (horizontal / normal)"
<!--- This example shows how to retrieve the EXIF header information from a JPEG file. ---> <!--- Create a ColdFusion image from an existing JPEG file. ---> <cfimage source="DirectoryPhotos\imageProblem1.jpg" name="myImage"> <!---<cfimage source="DirectoryPhotos\imageProblem2.jpg" name="myImage"> ---> <!---<cfimage source="DirectoryPhotos\imageOK.jpg" name="myImage">---> <!--- Retrieve the metadata associated with the image. ---> <cfset metadata =ImageGetEXIFMetadata(myImage)> <!--- Display the ColdFusion image parameters. ---> <cfdump var="#myImage#" label="Image Parameters"> <!--- Display the EXIF header information associated with the image (creation date, software, and so on). ---> <cfdump var="#metadata#" label="Image Metadata">
You can improve your code as follows:
1) Remove the cfoutput tags surrounding the HTML table. They are unnecessary.
2) Simplify your cfhtmltopdf code to either
<cfhtmltopdf destination="ImageTest.pdf" overwrite="true"> <CFINCLUDE TEMPLATE="ImageTestTemplate.cfm"> </cfhtmltopdf>
<cfhtmltopdf destination="ImageTest.pdf" source="ImageTestTemplate.cfm" overwrite="true"/>