How to improve the image quality?

[Sweet-KK]

domtoimage.toBlob(shareContent).then(function(blob) { FileSaver.saveAs(blob, _this.fileName + '.png') }) Hello, I has a problem,the picture is not really clear. How to improve the image quality? Can you add a option, like scale. We can scale the canvas before render.

[wLove-c]

I had the same problem, How to improve the image quality?

[nsequeira87]

A simple trick could be something like:

var scale = 2;
domtoimage.toBlob(domNode, {
 width: domNode.clientWidth * scale,
 height: domNode.clientHeight * scale,
 style: {
  transform: 'scale('+scale+')',
  transformOrigin: 'top left'
})

[moevbiz]

for fixing a display bug with responsive nodes see -> https://github.com/tsayen/dom-to-image/issues/69#issuecomment-486146688

[handycode]

A simple trick could be something like:

var scale = 2;
domtoimage.toBlob(domNode, {
 width: domNode.clientWidth * scale,
 height: domNode.clientHeight * scale,
 style: {
  transform: 'scale('+scale+')',
  transformOrigin: 'top left'
})

thanks a lot, it's work!

[kamilzki]

A simple trick could be something like:

var scale = 2;
domtoimage.toBlob(domNode, {
 width: domNode.clientWidth * scale,
 height: domNode.clientHeight * scale,
 style: {
  transform: 'scale('+scale+')',
  transformOrigin: 'top left'
})

The scale improves the quality of the image, but also increase the dimensions, but I really need the image with original width and height. Did someone find something helpful in that case?

[akshaybosamiya]

A simple trick could be something like:

var scale = 2;
domtoimage.toBlob(domNode, {
 width: domNode.clientWidth * scale,
 height: domNode.clientHeight * scale,
 style: {
  transform: 'scale('+scale+')',
  transformOrigin: 'top left'
})

The scale improves the quality of the image, but also increase the dimensions, but I really need the image with original width and height. Did someone find something helpful in that case?

Check out this. It might help you. https://github.com/tsayen/dom-to-image/issues/332#issuecomment-633847362

[Rabbitzzc]

A simple trick could be something like:

var scale = 2;
domtoimage.toBlob(domNode, {
 width: domNode.clientWidth * scale,
 height: domNode.clientHeight * scale,
 style: {
  transform: 'scale('+scale+')',
  transformOrigin: 'top left'
})

Can you explain the meaning of this code？

[elisma]

A simple trick could be something like:

var scale = 2;
domtoimage.toBlob(domNode, {
 width: domNode.clientWidth * scale,
 height: domNode.clientHeight * scale,
 style: {
  transform: 'scale('+scale+')',
  transformOrigin: 'top left'
})

awesomee!! thanks

[csandman]

A simple trick could be something like:

var scale = 2;
domtoimage.toBlob(domNode, {
 width: domNode.clientWidth * scale,
 height: domNode.clientHeight * scale,
 style: {
  transform: 'scale('+scale+')',
  transformOrigin: 'top left'
})

Can you explain the meaning of this code？

It applies a css scale tranformation to double the image size before exporting

[priyanshu0171]

A simple trick could be something like:

var scale = 2;
domtoimage.toBlob(domNode, {
 width: domNode.clientWidth * scale,
 height: domNode.clientHeight * scale,
 style: {
  transform: 'scale('+scale+')',
  transformOrigin: 'top left'
})

Hey can you tell how to implement it and plus can you explain?

[csandman]

A simple trick could be something like:

var scale = 2;
domtoimage.toBlob(domNode, {
 width: domNode.clientWidth * scale,
 height: domNode.clientHeight * scale,
 style: {
  transform: 'scale('+scale+')',
  transformOrigin: 'top left'
})

Hey can you tell how to implement it and plus can you explain?

There isn't a lot to tell, this is just an implementation of the function from the docs, with custom dimensions and css styles. It doubles the width/height of the image, and sets a CSS transform:scale to double the dimensions of the images content. When you say, "how to implement" this is it, just add the function exactly as he has it and it will work. Look at the readme if you want more info on how the options parameter is defined.

[Gigamick]

A simple trick could be something like:

var scale = 2;
domtoimage.toBlob(domNode, {
 width: domNode.clientWidth * scale,
 height: domNode.clientHeight * scale,
 style: {
  transform: 'scale('+scale+')',
  transformOrigin: 'top left'
})

This works great for me but when I try to generate the image onto my page it is shifted 50% to the right. So I have 50% of the image just black and then 50% of my image that I wanted.... although the quality of that 50% is great lol.

Any ideas?

[nsequeira87]

A shot in the dark, try:

 transform: 'scale('+scale+') translateX(-50%)'

[csandman]

A simple trick could be something like:

var scale = 2;
domtoimage.toBlob(domNode, {
 width: domNode.clientWidth * scale,
 height: domNode.clientHeight * scale,
 style: {
  transform: 'scale('+scale+')',
  transformOrigin: 'top left'
})

This works great for me but when I try to generate the image onto my page it is shifted 50% to the right. So I have 50% of the image just black and then 50% of my image that I wanted.... although the quality of that 50% is great lol.

Any ideas?

Do you have the transformOrigin: 'top left' in custom style?

[huuphongnguyen]

A simple trick could be something like:

var scale = 2;
domtoimage.toBlob(domNode, {
 width: domNode.clientWidth * scale,
 height: domNode.clientHeight * scale,
 style: {
  transform: 'scale('+scale+')',
  transformOrigin: 'top left'
})

Hey can you tell how to implement it and plus can you explain?

transformOrigin: "50% 50%" as well.

[istoan]

let scale = 5;
let style = {
    transform: `scale(${scale})`,
    transformOrigin: 'top left',
    width: domNode.clientWidth + 'px', // use original width of DOM element to avoid part of the image being cropped out
    height: domNode.clientHeight + 'px' // use original height of DOM element
};

domtoimage.toPng(domNode, {
    width: domNode.clientWidth * scale,
    height: domNode.clientHeight * scale,
    style: style })

[TonyZhang1993]

A simple trick could be something like:

var scale = 2;
domtoimage.toBlob(domNode, {
 width: domNode.clientWidth * scale,
 height: domNode.clientHeight * scale,
 style: {
  transform: 'scale('+scale+')',
  transformOrigin: 'top left'
})

This works great for me but when I try to generate the image onto my page it is shifted 50% to the right. So I have 50% of the image just black and then 50% of my image that I wanted.... although the quality of that 50% is great lol. Any ideas?

Do you have the transformOrigin: 'top left' in custom style?

I had the same issue. The image generated onto my page it is shifted 50% to the right. But this issue happened occasionally. Failed case:

successful example:

with the following configuration: const scale = 2

any ideas for the issue? Thanks in advance!!

[TonyZhang1993]

A simple trick could be something like:

var scale = 2;
domtoimage.toBlob(domNode, {
 width: domNode.clientWidth * scale,
 height: domNode.clientHeight * scale,
 style: {
  transform: 'scale('+scale+')',
  transformOrigin: 'top left'
})

The solution brings up another problem -> Case: when the dom I want to download is too heigt, the picture at the end download is a full blank with the images at the first rendered well. failed picture: the pic we want:

I find the same open issue here: https://github.com/tsayen/dom-to-image/issues/323#issue-550687140

@csandman nsequeira87 any ideas?

[TonyZhang1993]

你好，你的邮件已收到，我会尽快给您回复。

[Prhldchauhan]

` Here scaling is done according to the width, you can even do same with the height. const scale=(element_width_expected)/(element_original_width);

domtoimage
  .toPng(PNG, { quality: 0.95 , width: PNG.clientWidth * scale,
    height: PNG.clientHeight * scale,
    style: {
     transform: 'scale('+scale+')',
     transformOrigin: 'top left'
   }})
  .then(function (dataUrl) {
   //this just download the specifc image automatic.
    var link = document.createElement("a");
    link.download = "my-page.png";
    link.href = dataUrl;
    link.click();
  })
  .then(function () {
    console.log("download Done");
    PNG.removeAttribute("style");
    PNG.classList.add("scrollable");
    focusedNode.classList.add("focusDiv");
  });`

[aurevae]

A simple trick could be something like:

var scale = 2;
domtoimage.toBlob(domNode, {
 width: domNode.clientWidth * scale,
 height: domNode.clientHeight * scale,
 style: {
  transform: 'scale('+scale+')',
  transformOrigin: 'top left'
})

The solution brings up another problem -> Case: when the dom I want to download is too heigt, the picture at the end download is a full blank with the images at the first rendered well. failed picture: the pic we want:

I find the same open issue here: #323 (comment)

@csandman nsequeira87 any ideas?

just write transformOrigin: 'center' I succeeded

[TonyZhang1993]

你好，你的邮件已收到，我会尽快给您回复。

[uvistix]

A simple trick could be something like:

var scale = 2;
domtoimage.toBlob(domNode, {
 width: domNode.clientWidth * scale,
 height: domNode.clientHeight * scale,
 style: {
  transform: 'scale('+scale+')',
  transformOrigin: 'top left'
})

Thanks, this worked..

[TonyZhang1993]

你好，你的邮件已收到，我会尽快给您回复。

[forever0714yuan]

你好，我已收到你的来信。辛苦了！！