给定一个画布对象，我如何获得它的按比例缩小的“版本”作为图像/ Base64编码的字节数组？

Question

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

以下代码可以正常工作：

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

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

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

不过，我要做的是按比例缩小屏幕截图。 我可以简单地使用CSS缩放结果图像，但是我想节省存储空间。 换句话说，我希望String编码表示例如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();
        }
    });
}

这几乎可以正常工作-“图片”的缩放比例正确，但是生成的图像仍与原始尺寸相同，其余空间显然用透明像素填充。

如果我取消注释设置画布的高度和宽度的两行，则图像是正确的尺寸，但全部为空白。

我感觉自己接近了-我想念什么？

Answer 1

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

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

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

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

最后将第二个画布导出为dataURL。

var dataURL = scaledCanvas.toDataURL();

警告：上面未经​​测试的代码...但是它应该使您走上正确的轨道！