[英]Given a canvas object, how can I get a scaled down “version” of it as an image/Base64-encoded byte array?
I am using html2canvas to take "screenshots" of the current browser window. 我正在使用html2canvas来获取当前浏览器窗口的“屏幕截图”。 I would like to save the screenshot as Base64 encoded data which can later be used to create an html img.
我想将屏幕截图保存为Base64编码的数据,以后可用于创建html img。 For example, I might want to save the String that canvas.toDataURL() returns in the browser's local storage, and retrieve it later.
例如,我可能想将canvas.toDataURL()返回的String保存在浏览器的本地存储中,并在以后检索它。
The following code works fine: 以下代码可以正常工作:
html2canvas(document.body, {
onrendered: function(canvas) {
localStorage.setItem('screenshot', JSON.stringify(canvas.toDataURL()));
}
});
I can later retrieve it and create an image from it, for example using Angular: 我以后可以检索它并从中创建图像,例如使用Angular:
<img data-ng-src="{{imgData}}"/>
What I want to do though, is have a scaled down version of the screenshot. 不过,我要做的是按比例缩小屏幕截图。 I can simply scale the resulting image using CSS, but I want to save storage space.
我可以简单地使用CSS缩放结果图像,但是我想节省存储空间。 In other words, I want the String encoding to represent an image that is, for example, 200 pixels wide instead of (say) 1000 pixels wide.
换句话说,我希望String编码表示例如200像素宽而不是(例如)1000像素宽的图像。 I do not care about the quality of the image.
我不在乎图像的质量。
This is the closest I've come: 这是我最近来的:
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();
}
});
}
This almost works - the "picture" is scaled correctly, but the resulting image is still the same size as the original, with the rest of the space apparently filled in with transparent pixels. 这几乎可以正常工作-“图片”的缩放比例正确,但是生成的图像仍与原始尺寸相同,其余空间显然用透明像素填充。
If I uncomment the 2 lines above which set the canvas' height and width, then the image is the right size, but it's all blank. 如果我取消注释设置画布的高度和宽度的两行,则图像是正确的尺寸,但全部为空白。
I feel like I'm close - what am I missing? 我感觉自己接近了-我想念什么?
.toDataURL
will always capture the entire canvas, so to get a smaller image you must create a second smaller canvas: .toDataURL
将始终捕获整个画布,因此要获得较小的图像,必须创建第二个较小的画布:
var scaledCanvas=document.createElement('canvas');
var scaledContext=scaledCanvas.getContext('2d');
scaledCanvas.width=canvas.width*scaleFactor;
scaledCanvas.height=canvas.height*scaleFactor;
Then scale the second canvas and draw the main canvas onto the second canvas 然后缩放第二个画布并将主画布绘制到第二个画布上
scaledContext.scale(scaleFactor,scaleFactor);
scaledContext.drawImage(canvas,0,0);
And finally export that second canvas as a dataURL. 最后将第二个画布导出为dataURL。
var dataURL = scaledCanvas.toDataURL();
Warning: untested code above...but it should put you on the right track! 警告:上面未经测试的代码...但是它应该使您走上正确的轨道!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.