javascript - 给定一个 Canvas 对象，如何将其缩小 "version"作为图像/Base64 编码的字节数组？

Question

我正在使用html2canvas获取当前浏览器窗口的“屏幕截图”。我想将屏幕截图保存为 Base64 编码数据，稍后可用于创建 html img。例如，我可能想将 canvas.toDataURL() 返回的字符串保存在浏览器的本地存储中，并稍后检索它。

下面的代码工作正常:

html2canvas(document.body, {
    onrendered: function(canvas) {
        localStorage.setItem('screenshot', JSON.stringify(canvas.toDataURL()));
    }
});

我可以稍后检索它并从中创建图像，例如使用 Angular:

<img data-ng-src="{{imgData}}"/>

不过，我想做的是屏幕截图的缩小版本。我可以简单地使用 CSS 缩放生成的图像，但我想节省存储空间。换句话说，我希望字符串编码能够表示 200 像素宽的图像，而不是(比如说)1000 像素宽的图像。我不关心图像的质量。

这是我最接近的一次:

saveScreenshot = function(name, scaleFactor) {
    html2canvas(document.body, {
        onrendered: function(canvas) {
            var ctx = canvas.getContext('2d');
            var img = new Image();
            img.onload = function() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.scale(scaleFactor, scaleFactor);
                ctx.drawImage(img, 0, 0);
                //canvas.width *= scaleFactor;
                //canvas.height *= scaleFactor;
                localStorage.setItem('screenshot', JSON.stringify(canvas.toDataURL()));
            }
            img.src = canvas.toDataURL();
        }
    });
}

这几乎有效 - “图片”已正确缩放，但生成的图像仍然与原始图像大小相同，其余空间显然填充有透明像素。

如果我取消注释上面设置 Canvas 高度和宽度的两行，则图像的大小正确，但全是空白。

我觉得我已经很接近了 - 我错过了什么？

Answer 1

.toDataURL 将始终捕获整个 Canvas ，因此要获得较小的图像，您必须创建第二个较小的 Canvas :

var scaledCanvas=document.createElement('canvas');
var scaledContext=scaledCanvas.getContext('2d');
scaledCanvas.width=canvas.width*scaleFactor;
scaledCanvas.height=canvas.height*scaleFactor;

然后缩放第二个 Canvas 并将主 Canvas 绘制到第二个 Canvas 上

scaledContext.scale(scaleFactor,scaleFactor);
scaledContext.drawImage(canvas,0,0);

最后将第二个 Canvas 导出为 dataURL。

var dataURL = scaledCanvas.toDataURL();

警告:上面未经​​测试的代码...但它应该让您走上正轨!