Можно ли повторно использовать DOMString, возвращенную из HTMLCanvasElement.toDataURL () или canvas.toBlob ()?

Question

Я настраиваю изображение Cropper, оно даст мне ширину и высоту, X и Y обрезанных деталей. Используя это, я создаю изображение предварительного просмотра (используя холст), но возможно ли сохранить эти данные, возвращенные из HTMLCanvasElement.toDataURL() или canvas.toBlob(), и повторно использовать в других устройствах и браузерах?

См. Ссылку ниже (используется метод canvas.toBlob()) https://codesandbox.io/s/72py4jlll6

Answer 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.

Answer 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'} ) );
  }
 });
}

Просто измените свой код. Пожалуйста, ЛМК в ближайшее время.