dom到图片库生成低质量图片

Question

我使用 dom-to-image 将 div 内容下载为图像，但它给了我一个低质量的图像，我的代码不清楚：

<script> 
    var node = document.getElementById('my-certificate');
    var btn = document.getElementById('download-btn');

    var options = {
        quality: 0.99 
    };
    
    btn.onclick = function() {
      domtoimage.toBlob(node, options)
        .then(function(blob) {
          window.saveAs(blob, 'my-certification.png');
        });
    
    }
</script>   

关于如何产生更好质量的任何想法？

Answer 1

在渲染图像之前使用选项中的宽度和高度来放大节点。 （如果你不这样做，质量就像屏幕截图）

 var options = {
    quality: 0.99,
    width: 2000,
    height: 2000,
};

Answer 2

尝试这个。

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

这对我有用。