时间戳

首页 > 解决方案 > 是否可以重用从 HTMLCanvasElement.toDataURL() 或 canvas.toBlob() 返回的 DOMString？

html - 是否可以重用从 HTMLCanvasElement.toDataURL() 或 canvas.toBlob() 返回的 DOMString？

问题描述

我正在设置一个图像裁剪器，它会给我宽度和高度，裁剪细节的 X 和 Y。使用它我正在创建预览图像（使用画布），但是是否可以存储从其他设备和浏览器返回的数据HTMLCanvasElement.toDataURL()或canvas.toBlob()在其他设备和浏览器中重复使用？

请参阅下面的链接（它使用canvas.toBlob()方法） https://codesandbox.io/s/72py4jlll6

标签： htmlcssreactjscanvasfrontend

解决方案

您可以尝试使用这行代码：

if (!HTMLCanvasElement.prototype.toBlob) {
 Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
  value: function (callback, type, quality) {

    var binStr = atob( this.toDataURL(type, quality).split(',')[1] ),
        len = binStr.length,
        arr = new Uint8Array(len);

    for (var i=0; i<len; i++ ) {
     arr[i] = binStr.charCodeAt(i);
    }

    callback( new Blob( [arr], {type: type || 'image/png'} ) );
  }
 });
}

只需更改您的代码。请尽快LMK。

推荐阅读