Convert piece of canvas to blob type

问题:

I am trying to optimize some code that uses the canvas.drawImage() call. This is a pretty expensive call when called several hundreds or thousands of times. Found out about the canvas.toBlob(callback) method but I want to know if there is a way to get only a section of the canvas.

drawimage() gives much more fine grain control over which sections should be draw.

canvas.drawImage(canvas, sx, sy, sw, sh, dx, dy, dw, dh);

Any suggestions / thoughts are welcomed!

回答1:

The canvas.toBlob method is currently only supported by Firefox browser.
For it to work on other browsers, you can use this code to convert a base64 dataURI to a blob object.

Now, to get only a portion of the canvas through these methods, you'll have to create a new canvas, set its dimensions to the cropped ones and draw the part you want on it :

var img = new Image();
img.crossOrigin = 'anonymous';
img.src = "http://i.imgur.com/fHyEMsl.jpg";

var resultImg = new Image();
var resultSize = document.createElement('span');
document.body.appendChild(resultImg);
document.body.appendChild(resultSize);

var cropped = {x: 0, y: 0, width: 130, height: 130};

var canvas = document.createElement('canvas');
document.body.appendChild(canvas);

img.onload = function() {
  canvas.width = this.width;
  canvas.height = this.height;
  canvas.getContext('2d').drawImage(this, 0, 0);
  setInterval(cropCanvas, 1000);
}

function cropCanvas() {
  URL.revokeObjectURL(resultImg.src);
  var newCanvas = document.createElement('canvas');
  newCanvas.width = cropped.width;
  newCanvas.height = cropped.height;
  newCanvas.getContext('2d').drawImage(canvas, -cropped.x, -cropped.y);
  if (newCanvas.toBlob) { // Firefox
    newCanvas.toBlob(function(blob) {
      resultImg.src = URL.createObjectURL(blob);
      resultSize.innerHTML = blob.size + ' bytes';
    }, 'image/jpeg');
  } else { // all other browsers
    var blob = dataURItoBlob(newCanvas.toDataURL('image/jpeg'));
    resultImg.src = URL.createObjectURL(blob);
    resultSize.innerHTML = blob.size + ' bytes';
  }
  //move our crop
  if (cropped.x < img.width - 130)
    cropped.x += 130;
  else {
    if (cropped.y < img.height - 130) {
      cropped.y += 130;
      cropped.x = 0;
    } else {
      cropped.x = 0;
      cropped.y = 0;
    }
  }
}

// taken from https://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata/5100158#5100158
function dataURItoBlob(dataURI) {
  var byteString;
  if (dataURI.split(',')[0].indexOf('base64') >= 0)
    byteString = atob(dataURI.split(',')[1]);
  else
    byteString = unescape(dataURI.split(',')[1]);

  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

  var ia = new Uint8Array(byteString.length);
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }

  return new Blob([ia], {
    type: mimeString
  });
}