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，但它需要是异步的。然后，您可以使用ArrayBuffer将<{1}}转换为FileReader#readAsArrayBuffer()：

Blob

然后你就可以这样执行：

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

使用ES6承诺，如果您愿意，可以将其转换为返回承诺：

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

  // here's your `arrayBuffer`
})

并称之为：

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

在javascript中从canvas中保存jpeg字节数组而不执行base64步骤

1 个答案: