是否可以重复使用从HTMLCanvasElement.toDataURL()或canvas.toBlob()返回的DOMString?

时间:2019-05-28 12:16:14

标签: html css reactjs canvas frontend

我正在设置图像Cropper,它将为我提供宽度和高度,裁剪细节的X和Y。我正在使用它创建预览图像(使用画布),但是是否可以存储从HTMLCanvasElement.toDataURL()canvas.toBlob()返回的数据并在其他设备和浏览器中重复使用?

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

2 个答案:

答案 0 :(得分:0)

您可以尝试使用以下代码行:

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。

答案 1 :(得分:0)

Ypu可以将Blob转换为base64字符串, 并将其保存在服务器端。

因此您可以稍后将该媒体提供给其他用户/浏览器。

方法是:

let reader = new FileReader();
reader.readAsDataURL(blob); // converts the blob to base64 and calls onload

reader.onload = function() {
  data = reader.result; // data url as base 64 encoded string.
};

解码此字符串将获得二进制PNG数据。