Dom-to-image: 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?