在toDataURL之前缩放图像 - html2canvas

Question

在你告诉我这是一个重复的问题之前,请知道我已经搜索过每一个相似的问题,其中任何答案都没有为我工作.

我使用html2canvas来获取div的快照,我需要做的是将其扩展到750x1050,然后再保存到png via canvas.toDataURL().

我得到的最接近的是以下代码.

html2canvas(document.getElementById('div_id'), {
   onrendered: function(canvas) {

      var extra_canvas = document.createElement("canvas");

        extra_canvas.setAttribute('width', 750);
        extra_canvas.setAttribute('height', 1050);

        var ctx = extra_canvas.getContext('2d');
        ctx.drawImage(canvas, 0, 0, 750, 1050);
        var dataURL = extra_canvas.toDataURL();

        window.open(dataURL);
   }
});

图像大小合适,但图像中的文字质量极差,就像它在成为png 后调整大小一样.

是我做错了什么还是你不能这样放大？

任何建议/解决方案将不胜感激!

Answer 1

我遇到了类似的问题，这就是我最终所做的

html2canvas($('#div_id'), {width: 750, height: 1050}).then(
    function(canvas) {
       window.open(canvas.toDataURL("image/png"));
    }
)

现在这仍然会导致图像模糊（尤其是文本），但那是因为我的浏览器默认缩放设置为 110%，导致 window.devicePixelRatio 为 1.1000...我通过简单地向用户显示警告来解决这个问题（为我需要的目的工作），但显然有更好的方法来解决它/sf/answers/1597330451/

Answer 2

对于其他想知道如何从 html 获取高分辨率打印内容的人来说：PhantomJS和wkhtmltopdf / wkhtmltoimage是更好地处理这些事情的绝佳选择。