在 toDataURL 之前缩放图像 - html2canvas

Question

在你告诉我这是一个重复的问题之前，要知道我已经搜索过每个个类似的问题和 none 其中任何答案对我有用。

我正在使用 html2canvas 抓取 div 的快照，我需要做的是将其放大到 750x1050，然后通过 canvas.toDataURL().

将其保存为 png

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

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 后调整了大小。

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

任何 suggestion/work-around 将不胜感激！

Answer 1

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

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

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

Answer 2

对于任何想知道如何从 html 获得具有印刷价值的高分辨率内容的人：PhantomJS and wkhtmltopdf / wkhtmltoimage 是可以更好地处理这些事情的绝佳选择。

Answer 3

甚至我的图像都变得像素化，有时当有很多内容适合 pre-set 宽度和高度时会显得局促。经过几个小时的搜索，从这个 post 中找到了一个很好的解决方案。即使在缩放和没有可见像素化的情况下，它也能很好地保持分辨率。

html2canvas(document.getElementById('div_id'), {
onrendered: function(canvas) {
        var ctx = canvas.getContext('2d');
        ctx.webkitImageSmoothingEnabled = false;
        ctx.mozImageSmoothingEnabled = false;
        ctx.imageSmoothingEnabled = false;
        var myImage = canvas.toDataURL("image/jpeg,1.0");  
       }
 });

在 toDataURL 之前缩放图像 - html2canvas

Scale image before toDataURL - html2canvas

html

javascript

css

resize

html2canvas