将画布块转换为Blob类型 [英] Convert piece of canvas to blob type

问题描述

我试图优化一些使用canvas.drawImage（）调用的代码。
当调用几百或几千次时，这是一个相当昂贵的调用。
找到关于canvas.toBlob（callback）方法，但是我想知道是否有一种方法只能获取画布的一部分。

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（）提供了更精细的粒度控制，以控制绘制哪些部分。

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!

推荐答案

canvas.toBlob 方法目前仅支持Firefox浏览器。

要在其他浏览器上使用，您可以使用此代码将base64数据URL转换为blob对象。

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 http://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
  });
}

这篇关于将画布块转换为Blob类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！