Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot size an image #199

Closed
kla-ko opened this issue Nov 23, 2023 · 10 comments
Closed

Cannot size an image #199

kla-ko opened this issue Nov 23, 2023 · 10 comments

Comments

@kla-ko
Copy link

kla-ko commented Nov 23, 2023

Hi
I didn't manage to size an image appropriately. It always runs off the boundaries of the generated pdf.
I've tried to:

  • set a width attribute of the html-img class
  • set the desired width explicitly in the <img tag of my html document
  • defined a img entry in the defaultStyles option with the desired width.

Nothing showed any effect.

Any suggestions?

Thanks

@Aymkdn
Copy link
Owner

Aymkdn commented Nov 23, 2023

I've just tried in the playground, and it looks OK:
image

Maybe you can provide more info?

The HTML code:

<div><img src="https://cdn.getyourguide.com/img/location/53341a461c85b.jpeg/99.jpg" width="250" /></div>

The parameters/options:

{
  "imagesByReference":true
}

@Aymkdn Aymkdn added the waiting-for-requestor Waiting for the requestor to provide more info label Nov 23, 2023
@kla-ko
Copy link
Author

kla-ko commented Nov 23, 2023

Hmm. Yes. Playground works well even with my dataURL.
Let me investigate further.
Thanks for the quick response ...

@github-actions github-actions bot removed the waiting-for-requestor Waiting for the requestor to provide more info label Nov 23, 2023
@Aymkdn Aymkdn added the waiting-for-requestor Waiting for the requestor to provide more info label Nov 23, 2023
@kla-ko
Copy link
Author

kla-ko commented Nov 23, 2023

On thing I noticed when comparing to the playground: I have additional properties in the generated pdfMake content, which are _maxWidth, _minWidth and _width and these have very high values. Here is a snippet from the total pdfMake content:

image

The actual width property looks good.

The html snippet is this one:
image

@github-actions github-actions bot removed the waiting-for-requestor Waiting for the requestor to provide more info label Nov 23, 2023
@Aymkdn
Copy link
Owner

Aymkdn commented Nov 23, 2023

Can you try with width="250" instead of using style?

@kla-ko
Copy link
Author

kla-ko commented Nov 24, 2023

I got it working!
The actual image tag is embedded within a hierarchy of DIVs. Some of these DIVs are generated by a UI Builder which I'm using to build my pages. I believe, due to some css flex inheritance magic, the image was scaled across the whole page in the pdf (although it shows correctly on the web page). I stripped down this DIV hell and now it works. Unfortunately, I cannot reproduce what the actual root cause is. I will try further to reproduce and post any result here.

I just can say for now that the above mentioned _width, _maxWidth, _minWidth now show reasonable vaules, or even NaN for some divs up in the hierarchy. Maybe this is already a trace for you to follow up.

Thanks and best regards,

@Aymkdn
Copy link
Owner

Aymkdn commented Nov 24, 2023

I'm glad you figured it out :)

@Aymkdn Aymkdn closed this as completed Nov 24, 2023
@kla-ko
Copy link
Author

kla-ko commented Nov 24, 2023

Found the issue!

Check this html within your test environment:

<div style=" min-height: 200px; border:1px solid black;">
  <h1>My title</h1>
  <p>
    This is a sentence with a <strong>bold word</strong>, <em>one in italic</em>,
    and <u>one with underline</u>. And finally <a href="https://www.somewhere.com">a link</a>.
  </p>
<img width=100 height=60 src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAA8CAYAAAAjW/WRAAAAAXNSR0IArs4c6QAADT9JREFUeF7tXXlsnMUV//1mbUMAAwlNOVogTYGkpFDiLykNIhw9Eq9TWiFEqKpWrVrUllJAqqiIN0EYKV6Ho60Q6kUPEH+UNhEVlMbrHippQ4EkXhNC6MF9JUDLEeI4h5OdXzWfHbO7Xq+/9XoTvDvzjy37zZt5v5n3zZuZ994QvngEJggCc6/rvCjD2FYD22hhentWLExXuuusdAOev0egXASaEqvbAF5O8APZvARsAGynsWZN94r4mnLbKVR/TAoyZ0nqAmvsBY6hYNYSdn7InGYrZE8If5XZh5juSS9vebYSHfc8qx8BpxiEuSGCpD0kr+hub14fgbYkkkgKcua1fzy87hBdQ+k4AFeV2MKf0u3xhSXV8cQ1j0AJyjGIFbfR6uLxXkmKKsistpUNh/Y3/gzAV9yiMOZRk/1EumPRujHX9xVrCoFgaepcCGtLFpp4Mt0e/2jJ9YpUKDjp57V1Tenv1/cBfAlAXdkNegUpG8JaYhAkUi8BODFHZmGNaP8mG3uIJnMuaeZBWFAAl1XpZHzxeOGVoyBB2wOHcU/9d0StKGvFyO3d+nQyfvZ4ddjzqX4EgkTnToCThiSV7kt3tFycL3mQSLlV5tz8vwv2xp7korbxQGpIQeYsS82Q5W8AnVU2Y+EV0f6ehj/wm/Sy0awpBkEitRLApTlCZ+pOTt/0GbeqDCsF6QFYadZjHS3/LBe8UEGaEqkzCfwOwIcLM9TrAI8dtTHhHgp3jPdGadR2PUFVIBBcv/oMZMymXGH4k3Sy+dsjCXj2DZ0fzOzlSgHzsmnGaxXh3CWdl1nDuwAcWqATa0neJukOAFPybMLXLOxdxpjV6fb4Q1UxQl6Ig4pAkEh1Acg58ZQxF/UsX/iHYh2b3dp5ujFcCWFWFt2b6WT8feUKxKA1tQVEeHcxVIjXZHFlT0fcrSoIEikNa4hYnG6Pryq3A76+R2DAium6ktDtuXtfXZ1Otri/jVqCpalLITjzLLvcnk7Grx61chECDpv8xJ9itv6L6zs+/eb+ekEitRXA8dl80sn42I99y+mxr1t1CARLU1dDuC1fMFpcWIq5HiRS2wE0ZvOJyc5Y37HoqbGClqcgvHv609u/tmrV4kw2w6A19SCI8OZ8f5E1cw6EL8xYBfP1JgYCQWtqCYiOAr3dlE7GP1aKFB+/vmt+JqO/59Up69j3XQUpYjKNdKtZV68T193Y8kopQnhaj4BD4IK2B+t6+3fdCvCafEScj9Weht5zn2xb3F8qWgXnahnbAQZLU90AbhptP1FoH0Lgxu5kfFzOm0sFwtNPXATmJlafZWXuBnFGnhQW4IaMMV/euHzB02ORMNywk0/mWDvA27Zh9/SNbRdvK5Vn5H1E4VWEm9PJ5nwhS+2Dp68hBOYkUvcKcJd+BeaeNgNmQTrZ/Go5kDQtTX2DgnORGiqk7uxub/laqXwjK4hjHCQ6fwLwWzna6fcipWJek/ThKRNwQ95RbDYWm+y+WPyxmxe4A6GyS5Do2gIo+3RWhFnYnVz451KYl6QgjnFTa+ctJK/d34iIb/a0x909iS8egWEIuNAIGHxXwEUjwOMOhO7MNOz+3lhMoJEgn7Ms1SLL+wDVv0ujzY0Nk2avabtwX9ShKllBBlaS1J0AvjrQCN9MJ5vLvpCJ2mFP995DoGnJH4OcXpl9F1GxZlDu70WcXfk6gJZ0srmnElI1JVI3EMjZI0u4ZP/9XpQ2x6QgoZIsTfVAmD3YyNp0Mn5elAY9zcRBIJz4xro95slUeMw/FcQ0AIeXK4WAH/ck41eWy6dY/UsvXRl77tRGF2k45NBI4JHuZPycqO2OXUFaV58NmkcHFhE8lm6PN0Vt1NO99xA4a0lqWh0wzUWKErHLABwG6KQK9PQuK90yHo6EUfrW1No1n8y9GyHMgqh7kTEryICp1XU8iUR3e3NpUYZRJPM0Y0YguO7PRyGW+Spp329ljgN0BAH3AXsNwrv2t8FkSO8HWQ+hcmay9ASIn9ehYeW65KedWXVAS5BI/QhAtsPj8+lkfHqUTpSlIFEa8DSVQEDOh+7zzv2HMI2iziMwRcBkADMr0eIQT+ItKM9xFXoK4Gk57boAJ6NfGJinKxErXoqMTcs6PwnLv/Ddo2XB6NQooRhVoyCnXNV5yJGN5nJCR1LMWOokEDMoTBKwj4ALwHEey85X5wgADYMbSHd5ZDEw8DsE/ofAMYQylugzwuEWqGM4+dgIyE1CA+AYAO4ERiB2Qtgp4GVC/4K4RaBljEfA2guB0Ms0x0do/wC75V/gwxRiAI4SMJVAnYBdII6mME1gPyAL4MxSJkZ5tPw3oEclPW7EjY5XKX5R5bU9/rXzoxSjusMfUAVx7gU79u5ZZC2mkHJ27ujJHIgnZPU3Q7oJ7cyA8NhO0odAHgZgL4AZ4w9pFXEU+kC9BPANAPNBpGHRC+BFUeeQfB3iP4TM7kqm0DmYiAaJVBJA61AfhDXpjrj7eBUtw715C5M7d/dsZdoz+AV2XzX35XM/dwJ4A8Q7EvoI9gFyR3xHueuT0Tri/z9WBLSZYK+gLSAfIeGOTF/tXh7/z1g5Vmu9XHcpbm1owBmPtDW/VUzeqAoyETFzJsozEOsgFxHpVJwvEXp+NGEUbmq5X+lHIx/x/wJPBbSTwJaRiTTTmXIEd0M4PYuuB9AOkDMl7DHEcwJ7aRRmE6S12zYkF4Wmjy/REMj3J4ziTn8wFMTZ+49D2APoFSLXsSxHVHImIOfROVU2N+JRbrozjFH5H4F7YfCYq3tIf3/6Hzd/3pkPvngEchAIEikX4zQUGUvh8u6O+C/LXkEEWYJuY1qsvAjheRAStYGWJwp6U+R9RnbHOzu48ZnbW5xp5otH4KAgECS6HgU0lGEnykb9gG7SDwoqvlGPwCACwzzSI2zUvYL46VMzCMxZlvqcLO4fEphIp9vjc4qaWDWDjhe05hFwnsUyeDAbiIYGHlPsJMuvIDU/bWoHgEIKMtpJlleQ2pkfXtKBUA13KjoUIzLaSZZXED9tagqB/LuQ0U6yvILU1PTwwg67LIS+3p1s+dVIyHgF8XOmphDwK0hNDbcXtlQEvIKUipinrykEvILU1HB7YUtFIFia2ghhKKXpaFl5/B6kVIQ9/YRGIP+YV9JvezpavuA36RN6WH3nxwuBIJFyuaSH3lsn0N2djM99zylI+NY6TK/PED9eQ+/5REFg8DW1x7NptS9zes/Nn/1XofoHxMQKr/hjvAzQ4uEB/3BhoC7qMCsDnosVwW4Ab4N4G1b9oDkBUO7LpyMioucEvEVxB4mnJIQJBUQ0cOD11Ch8XnaxJhC2D/Egjwa0G9IRLnw1mzeK/M+1C3IqpVOLDyI3S3YNDJ+A7Amg2Rr+hHkB4CmAnUlxt4BjXQiyaLdDdPmqXIw9BPweYD2oNyj9F+QuWO0VXcEMSUdT3EZwo4ydT5kjAS6PmgInygScCDRBouuvgLLDbUd8IqFiChK0dl4rcD6Jz00E0Hwfw6BqF8j2CoRnGcOm+r7eXz/yw8W7qg2bYe/dFHF7L0tB3Mu4GZljYxlrwoRjMueHYBLOpis7+161DcwElcfFbPcBcD5MDwJ6xq1MjfWH3rGm7UK3yk+o0rTsDx+hjeW9fsvPppPNq8s2seYuSc3NGLsoVASDRgi5OVlHh+pZQL0Qw3canIliwRMJnQ/B2YCFQ2UZhtu6jCbbnclTtJnQ1LHO3NgHKE9o47KgnEywAdLRI/IZ5OEiv8dqYoH4n2AHB8K1q+lGZieo50ZuVydlrHppzJPZJpbLNOLq2BgmG2dyjlSsy4TIYQnRRBEy0wi5kNPtLrXQ/vj3QbPTvRA7lo/liwA2A3oHMK8OZmJ0GWacyfwygT0WLnUSd8loByz6aNQIy5kiphB4y1JrjUgrTaKhm1OTNJBe6TC6VEnCISANqH6IAtQXhmsb7YS4C+CuwbHe67KzSHqYJibHsL8fD2+6dWHf7NbOqYb4AsDvAmHq1NxieUV6RfNPy1KQQs+wja4PIUWPYB+Aqese7bXSiPw8WYUQCFpXn00TO85aXeIediXwqQo19R5jy2CkBNqRvhrhi0AwYVKE6EXbQPNQur15pLT30Vl5yoOGgHu7nBnOdivT0MpDHFfxDI4HRuLdlO7vLvceZHCJehGgy044UnkBwAOi1iET+7c/vj0wI3wwWwnaHnif9tbNh8XFsTAJXZhp0p0WxijM00C2yOFlwGSeTOEEsXDGyQrL9U+KK2IN9v51N7YUNdkjrSCus0Gi61ZAlxB41eVpgsEqZcw61mW2RclxWmGBPfuJikBbmwn2zDuNsKeBaJJChWkCw2N/d9jjMmqOR3GHDOsA3jT96e1d+S85j9RAZAUZjx56Hh6BSiAw9/quWZKmOt77ZPrraBtk+TFCkwXtksGG+n48te7m0l9k9gpSiRHzPKsGAa8gVTOUXpBKIOAVpBKoep5Vg4BXkKoZSi9IJRDwClIJVD3PqkHAK0jVDKUXpBIIeAWpBKqeZ9Ug4BWkaobSC1IJBP4PZBMLiA7NxMgAAAAASUVORK5CYII=">
</div>
    
You see that, the generated pdf creates a distorted image.
Now, remove ``min-height: 200px;`` from the top DIV --> everything works fine!

Hope this helps,

Regards,

@Aymkdn
Copy link
Owner

Aymkdn commented Nov 24, 2023

Good catch! It inherits from the parent. Modifying it can be a bit tricky, so I'll refrain from making changes to the code to avoid potential side effects.

@kla-ko
Copy link
Author

kla-ko commented Nov 24, 2023

So, I will add style="min-height: 0px; min-width: 0px" to my image element. Just to make sure ...

@Aymkdn
Copy link
Owner

Aymkdn commented Nov 24, 2023

So, I will add style="min-height: 0px; min-width: 0px" to my image element. Just to make sure ...

Yes, it will do the trick.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants