How to upload an image from HTML5 canvas?

  1. Encode canvas to file or blob object.
  2. Upload this object to Uploadcare via uploadcare.fileFrom('object', blob);.

For example:

canvas.toBlob(function(blob) {
var file = uploadcare.fileFrom('object', blob);
 file.done(function(fileInfo) {
    // file is uploaded.
}, 'image/jpeg', 0.9);

See the Pen Upload from HTML5 canvas by uploadcare (@uploadcare) on CodePen.

Keep in mind, that blob is experimental and works only in Firefox. If you want to use any other browser, you need to use polyfill to implement blob.

For example:

if (!HTMLCanvasElement.prototype.toBlob) {
 Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
  value: function (callback, type, quality) {
    var binStr = atob( this.toDataURL(type, quality).split(',')[1] ),
        len = binStr.length,
        arr = new Uint8Array(len);
    for (var i=0; i<len; i++ ) {
     arr[i] = binStr.charCodeAt(i);
    callback( new Blob( [arr], {type: type || 'image/png'} ) );