Question

我正在使用html2canvas拍摄＆＃34;截图＆＃34;当前的浏览器窗口。我想将截图保存为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();
        }
    });
}

这个几乎有效 - ＆＃34;图片＆＃34;缩放是正确的，但生成的图像仍然与原始图像大小相同，其余的空间显然填充了透明像素。

如果我取消注释上面两行设置画布＆＃39;高度和宽度，然后图像大小合适，但它都是空白的。

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

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();

警告：上面未经测试的代码......但它应该让你走上正轨！

给定一个画布对象，我怎样才能得到一个缩小的版本＆＃34;它作为image / Base64编码的字节数组？

1 个答案: