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

【问题标题】：Is possible to reuse DOMString returned from HTMLCanvasElement.toDataURL() or canvas.toBlob()?是否可以重用从 HTMLCanvasElement.toDataURL() 或 canvas.toBlob() 返回的 DOMString？
【发布时间】：2019-10-13 23:24:01
【问题描述】：

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

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

【问题讨论】：

标签： html css reactjs canvas frontend

【解决方案1】：

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 数据。

【讨论】：

在前端，我可以将数据存储在json文件中，并将json发送给所有将读取数据并使用图像的用户。这是正确的做法吗？它会起作用吗？

【解决方案2】：

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

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。

【讨论】：

如果浏览器中不存在 HTMLCanvasElement.prototype.toBlob()，似乎是一个 polyfill。？