在 JavaScript 中从画布保存 jpeg 字节数组，无需执行 base64 步骤

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()，您可以获得 a 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
  })