javascript - 在不执行 base64 步骤的情况下，在 javascript 中从 Canvas 保存 jpeg 字节数组

Question

我现在正在使用它，但如果可能的话我想跳过 base64 转换步骤

function getJpegBytes()
{
 var jpgImg = canvas.toDataURL("image/jpeg");
    jpgImg = jpgImg.replace('data:image/jpeg;base64,', '');

    return _base64ToArrayBuffer(jpgImg);
}

function _base64ToArrayBuffer(base64) {
    var binary_string = window.atob(base64);
    var len = binary_string.length;
    var bytes = new Uint8Array(len);
    for (var i = 0; i < len; i++) {
        bytes[i] = binary_string.charCodeAt(i);
    }
    return bytes;
}

Answer 1

使用 HTMLCanvasElement#toBlob() , 你可以得到一个 Blob ，但它需要是异步的。然后您可以将 Blob 转换为 ArrayBuffer使用 FileReader#readAsArrayBuffer() :

function getJpegBytes(canvas, callback) {
  var fileReader = new FileReader()

  fileReader.addEventListener('loadend', function () {
    callback(this.error, this.result)
  })

  canvas.toBlob(fileReader.readAsArrayBuffer.bind(fileReader), 'image/jpeg')
}

然后你可以这样执行:

getJpegBytes(document.querySelector('canvas'), function (error, arrayBuffer) {
  if (error) {
    // handle error
    return
  }

  // here's your `arrayBuffer`
})

使用 ES6 promise ，如果您愿意，可以将其转换为返回 promise :

function getJpegBytes(canvas) {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader()

    fileReader.addEventListener('loadend', function () {
      if (this.error) {
        reject(this.error)
      } else {
        resolve(this.result)
      }
    })

    canvas.toBlob(blob => fileReader.readAsArrayBuffer(blob), 'image/jpeg')
  })
}

然后这样调用它:

getJpegBytes(document.querySelector('canvas'))
  .then(arrayBuffer => {
    // here's your `arrayBuffer` if success
  }, error => {
    // handle error
  })