search

tsayen / dom-to-image

Generates an image from a DOM node using HTML5 canvas
Other
10.32k stars 1.68k forks source link

Right and Left border Crops when transform scale css property is applied #192

Closed vishaltatva closed 6 years ago

vishaltatva commented 6 years ago

Can you check why right and bottom border gets cropped, when scaling css is applied. Even the text is not displayed completely

jsfiddle

Syndesi commented 6 years ago

Hi @vishaltatva ,

what do you want to achieve? If you just want to get a better picture (like higher resolution), you should check #172 out: It's currently not implemented, but the code should give you better images.

vishaltatva commented 6 years ago

Hi @Syndesi , Thanks for replying, Actually i want my html to be converted as Image with 300 DPI. I have checked #172, But here icons are getting blurry. I have seen you have added scale(2,2). I have set it to scale(3.125,3.125) to get 300 DPI image. But here also icons on that image is getting blurry. Do you have any solution for this? Can you suggest me the best way to achieve 300DPI image from html. My html also includes images

Syndesi commented 6 years ago

Hi @vishaltatva, I'm actually not the author of the linked pull request, but I think @victorwshuo's code can be changed so that you can get images in any resolution. Today I'm actually quite busy, but I should be able to provide a working example this weekend :)

vishaltatva commented 6 years ago

Hi @Syndesi , Scaling of entire html does the work. For example if you need 600 DPI image you have to scale (6.25) times. (i.e) 600/96. This will generate the image with 600 DPI. Thanks for the support