Как сохранить холст в формате jpg в Ioni c?

Question

Мне нужно сохранить холст в формате jpg.

Метод A:

var jpg_data = bufferCanvas.toDataURL("image/jpg", 0.80);
console.log("jpeg_data size:", Object.keys(jpg_data).length);
var data = jpg_data.split(',')[1];
console.log("data size: ", Object.keys(data).length);

const bytes: string = atob(data);
const byteNumbers = new Array(bytes.length);
for (let i = 0; i < bytes.length; i++) {
    byteNumbers[i] = bytes.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob: Blob = new Blob([byteArray], { type: 'image/jpg' });
const save_options: IWriteOptions = { replace: true }; // *** add these to line below ***
this.file.writeFile(this.file.dataDirectory, fileName, blob)
.then(() => {
    this.updateCanvas();
    this.updateInfo();
    console.log("openCamera > writeFile: OK");
}, err => {
    console.log('openCamera > writeFile error: ', err);
});

Это не работает. Вывод журнала консоли выглядит следующим образом:

[Log] jpeg_data size: – 629450 (cordova.js, line 1509)
[Log] data size:  – 629428 (cordova.js, line 1509)
[Log] jpg blob size:  – 0 (cordova.js, line 1509)

Метод 2:

var jpg_data = bufferCanvas.toDataURL("image/jpg", 0.80);
console.log("jpeg_data size:", Object.keys(jpg_data).length);
var data = jpg_data.split(',')[1];
console.log("data size: ", Object.keys(data).length);
let blob = this.b64toBlob(data, 'image/jpg');
console.log("blob size: ", Object.keys(blob).length);

private b64toBlob(b64Data, contentType) {
    console.log("b64toBlob > bytes received: ", Object.keys(b64Data).length);
    try {
    contentType = contentType || '';
    var sliceSize = 512;
    var byteCharacters = atob(b64Data);
    var byteArrays = [];

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
        byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }

    var blob = new Blob(byteArrays, {type: contentType});
      console.log("b64toBlob > blob size: ", Object.keys(blob).length);
    }
    catch(e) {
      console.log("b64toBlob > exception: ", e);
    }

    return blob;
}

Это также не работает. Вывод на консоль:

[Log] jpeg_data size: – 629450
[Log] data size:  – 629428
[Log] b64toBlob > bytes received:  – 629428
[Log] b64toBlob > blob size:  – 0

У кого-нибудь есть рабочие примеры этого? Похоже, что в обоих случаях происходит сбой преобразования base64 в blob.

Answer 1

Можете ли вы сделать это таким образом, используя метод toBlob контекста Canvas?:

bufferCanvas.toBlob( blob => {

  const save_options: IWriteOptions = { replace: true };

  this.file.writeFile(this.file.dataDirectory, fileName, blob)
  .then(() => {
      this.updateCanvas();
      this.updateInfo();
      console.log("openCamera > writeFile: OK");
  }, err => {
      console.log('openCamera > writeFile error: ', err);
  });

},"image/jpg", 0.80);