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

right i'm using this, skip 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);     (var = 0; < len; i++) {         bytes[i] = binary_string.charcodeat(i);     }     return bytes; } 

using htmlcanvaselement#toblob(), can blob, need asynchronous. can convert blob 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 can execute this:

getjpegbytes(document.queryselector('canvas'), function (error, arraybuffer) {   if (error) {     // handle error     return   }    // here's `arraybuffer` }) 

using es6 promises, convert return 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 this:

getjpegbytes(document.queryselector('canvas'))   .then(arraybuffer => {     // here's `arraybuffer` if success   }, error => {     // handle error   })