我正在使用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();
}
});
}
这个几乎有效 - &#34;图片&#34;缩放是正确的,但生成的图像仍然与原始图像大小相同,其余的空间显然填充了透明像素。
如果我取消注释上面两行设置画布&#39;高度和宽度,然后图像大小合适,但它都是空白的。
我觉得我很接近 - 我错过了什么?
答案 0 :(得分:2)
.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();
警告:上面未经测试的代码......但它应该让你走上正轨!