HTMLCanvasElement.toBlob() 方法创造Blob对象,用以展示canvas上的图片;这个图片文件可以被缓存或保存到本地,由用户代理端自行决定。如不特别指明,图片的类型默认为 image/png,分辨率为96dpi。 语法:
void canvas.toBlob(callback, type, encoderOptions);
参数:
比如将canvas图像转换为文件,当一个内容画到canvas上时,我们可以将它生成任何一个格式支持的图片文件。比如,下面的代码段获得了id为“canvas”的<canvas>
元素中的图像,复制成一个PNG图,在文档中加入一个新的<img>
元素,这个<img>
元素的源图就是使用canvas创建的那个图像:
var canvas = document.getElementById("canvas");
canvas.toBlob(function(blob) {
var newImg = document.createElement("img"),
url = URL.createObjectURL(blob);
newImg.onload = function() {
// no longer need to read the blob so it's revoked(撤销,删除)
URL.revokeObjectURL(url);
};
newImg.src = url;
document.body.appendChild(newImg);
});
注意,我们这里创建的是PNG图片;如果在toBlob()传入第二个参数,就可以指定图片格式。例如,生成JPEG格式的图片:
canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG at 95% quality
new Blob([new Uint8Array(array)], {type: 'image/png'})
当然CropBox并没有使用toBlob方法,而是直接利用js中的Blob对象类型的构造方法。 语法:
var aBlob = new Blob( array, options );
参数:
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // an array consisting of a single DOMString
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob
用处:
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。