Skip to main content
F
fredp60157821
Inspiring
December 2, 2020
Answered

Image roated in PDF

  • December 2, 2020
  • 1 reply
  • 3841 views

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

    This topic has been closed for replies.
    Correct answer fredp60157821

    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.

    1 reply

    BKBK
    Community Expert
    BKBKCommunity Expert
    Community Expert
    December 4, 2020

    Could you please share your code? Indicate the location of the images. That will enable us to see what you see.

    F
    fredp60157821Author
    Inspiring
    December 4, 2020

    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:

    https://drive.google.com/file/d/1qzh09Zrlr61hqQeiWWlmtspCDz0yN-Lh/view?usp=sharing

    https://drive.google.com/file/d/1NBh5LAbBhBfMckshWe5ounIubIjC4sQL/view?usp=sharing

    https://drive.google.com/file/d/1aptqJCqC0Fgdu8yrwL0ttwsJ2XXqip_A/view?usp=sharing

     

    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.

    BKBK
    Community Expert
    BKBKCommunity Expert
    Community Expert
    December 5, 2020

    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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices