image is getting rotated in html to pdf converter(wkhtml2pdf)

[karthikravinatha]

I am facing this issue in HTML to pdf conversion
I am using pdfkit python package after converting from HTML to pdf images are rotating (before converting the images are displaying perfectly in .html file)

[PhilterPaper]

Are these JPEG images taken with a digital camera? Be aware that no matter how you have the camera tilted, the image is always stored the same way (usually landscape mode) with a stored flag as to how the camera was oriented. I've heard of wkHTMLtoPDF (and many other image-handling software) ignoring the orientation flag. The only solution is to rotate the image in a photo editor before using it in wkHTMLtoPDF.

[karthikravinatha]

@PhilterPaper
below Html code which I am passing to wkHTMLtoPDF is

<style> .column { float: left; width: 50%; padding: 10px; margin-top: 10px; height: 700px; /* Should be removed. Only for demonstration */ }

    * {
        box-sizing: border-box;
    }

    /* Clearfix (clear floats) */
    .row::after {
        content: "";
        clear: both;
        display: table;
    }

    .img_multiple {
        width: 100%;
        max-height: 700px;
        height: auto;
    }

    .single_parent_div {
        margin-top: 10px;
        height: 1400px;
    }

    .img_single {
        width: 100%;
        max-height: 1400px;
        height: auto;
    }

    @page {
        size: letter;
    }
</style>

<div class='row' style='page-break-after: always;color: black;'>
        <div style="margin-top: 50px; margin-left: 20px; margin-right: 20px">
            <div style='background-color: white;height: 48px;position: relative;'>
                <h1 style='font-size: 20px;text-align: center;color: black;font-family:Ebrima;'>PROOF OF
                    TRANSPORTATION TO RECYCLER</h1>
            </div>
            <h1 style='font-size: 18px;color: black;'>1. Goods Receipt Note from Recycler</h1>
            <div class='single_parent_div'><img class='img_single'
                    src="http://assets-test.sustainablecontext.com/api/assets/asset-ops/view?o=17&d=17&ot=KAROINV&dt=GRNR&n=20201207060948568832.jpg"
                    alt="" style='margin-left:0px;border-radius:10px;'></img></div>
        </div>
    </div>

The original image link is: http://assets-test.sustainablecontext.com/api/assets/asset-ops/view?o=17&d=17&ot=KAROINV&dt=GRNR&n=20201207060948568832.jpg

please help me in this the original image-oriented is a portrait.

[PhilterPaper]

If you took the picture in portrait mode by turning the camera sideways, the raw image itself will be in landscape mode, with a flag that tells the viewer to rotate it 90 degrees. As I said before, wkHTMLtoPDF doesn't obey this flag. Try using a simple photo editor (built into Windows and many other operating systems -- you don't need to go out and buy Photoshop or other expensive software) to rotate the image to portrait mode, and see how wkHTMLtoPDF behaves. Note that a photo editor will probably present the image to you in portrait mode (obeying the orientation flag). You will have to check when you save the image in portrait mode that the orientation flag is actually updated to portrait mode (no rotation needed after that). If your photo editor doesn't tell you what the orientation flag is, you may have to obtain free software somewhere that tells you what the flag is.

[Sicos1977]

For what its worth ... I used to use wkHtmlToPdf until I hit all kind of limitations and took those away in a new project using Chrome. It also takes into account the rotation of image.

https://github.com/Sicos1977/ChromeHtmlToPdf

[karthikravinatha]

@PhilterPaper sir
In the above image link, I have mentioned the orientation flag value is 6, that image is oriented as a portrait
and
I'm changing the orientation flag value from 6 to 1 The image is rotating 90degree the orientation flag has changed to value 1 still image is rotating 90degree. (i am using pillow package to change the image orientation value).
and please confirm me which property value has taken in wkHTMLtoPDF to ignore the orientation of the image.

[PhilterPaper]

If you only changed the orientation flag (which I believe that wkHTMLtoPDF ignores), I don't think that will do the job. You also need to rebuild the data so that the data is now in portrait mode. Otherwise, the picture is still "lying on its side", as it was originally stored by the camera.

That is, a row becomes a column and vice-versa. The pixel in the upper left is now in the lower left (depending on which way the camera was rotated), upper right is now upper left, etc.

[PhilterPaper]

Look at #4846. If you can add CSS image-orientation: from-image; that might help.

[desen-eduardo]

image-orientation: from-image; usei isso no css mesmo assim não resolveu o problema da foto vim como paisagem em vez do retrato com foi batida na câmera do celular.

[kallsmedeiros]

I used this code to identify image orientation

`

def rotate_pdf
rotation = 0
result = Exif::Data.new(open(image.service_url))
w,h = FastImage.size(image.service_url)
return rotation + 90 if h > w && result.orientation.eql?(6)
rotation
rescue => e
rotation
end

`

then I applied a style with rotation in the pdf layout
<%= image_tag(rcpa.image.service_url, class: "img-item rotate#{rcpa.rotate_pdf}", height: '285px', width: '285px') if rcpa.image.attached? %>

css
`

.rotate0 {
}
.rotate90 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}

`