Save jpeg byte array from canvas in javascript without doing base64 step

问题

Right now I'm using this, but I would like to skip the base64 conversion step if possible

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;
}

回答1:

Using HTMLCanvasElement#toBlob(), you can get a Blob, but it will need to be asynchronous. Then you can convert the Blob to an ArrayBuffer using 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')
}

Then you can execute it like this:

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

  // here's your `arrayBuffer`
})

Using ES6 promises, you could convert this to return a promise if you'd prefer:

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

And call it like this:

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

来源：https://stackoverflow.com/questions/46181892/save-jpeg-byte-array-from-canvas-in-javascript-without-doing-base64-step

标签

javascript

canvas