javascript - 如何在 Canvas 中提取图像的一部分并将其用作 div 的背景图像？

Question

这是我的代码的样子:

document.addEventListener('DOMContentLoaded', function () {
        var canvas = document.querySelector('canvas');
        var ctx = canvas.getContext("2d");
        var imageData = ctx.getImageData(0, 0, 300, 300);
        var tile = {
                        'id': 1,
                        'data': imageData,
                        'dataUrl': imageData.toDataUrl()
                    };
        var div = document.createElement('div');
                div.classList.add('tile');
                grid.appendChild(div);
                div.style.backgroundImage = ('url(' + tile.dataUrl + ')');
});

我正在尝试从 (0,0) 提取 Canvas 上图像的一部分，高度和宽度为 300 像素，并将该 imageData 对象转换为 dataUrl 以用作 div 的背景。

我得到一个错误:imageData.toDataUrl() 不是一个函数。我怎样才能做到这一点？

提前致谢!

Answer 1

toDataURL 是一个 HTMLCanvasElement 方法，您必须从 Canvas 元素本身调用它。

在将结果图像数据的大小更改为所需的大小后，您可以将结果图像数据绘制回 Canvas ，但最简单的解决方案是使用第二个屏幕外的 Canvas ，由于 context.drawImage 方法，您将在其中绘制第一个 Canvas :

// The crop function
var crop = function(canvas, offsetX, offsetY, width, height, callback) {
  // create an in-memory canvas
  var buffer = document.createElement('canvas');
  var b_ctx = buffer.getContext('2d');
  // set its width/height to the required ones
  buffer.width = width;
  buffer.height = height;
  // draw the main canvas on our buffer one
  // drawImage(source, source_X, source_Y, source_Width, source_Height, 
  //  dest_X, dest_Y, dest_Width, dest_Height)
  b_ctx.drawImage(canvas, offsetX, offsetY, width, height,
                  0, 0, buffer.width, buffer.height);
  // now call the callback with the dataURL of our buffer canvas
  callback(buffer.toDataURL());
};


// #main canvas Part

var canvas = document.getElementById('main');
var img = new Image();
img.crossOrigin = "Anonymous";

img.onload = function() {
  canvas.width = this.width;
  canvas.height = this.height;
  canvas.getContext('2d').drawImage(this, 0, 0);
  // set a little timeout before calling our cropping thing
  setTimeout(function() {
    crop(canvas, 100, 70, 70, 70, callback)
  }, 1000);
};

img.src = "https://dl.dropboxusercontent.com/s/1alt1303g9zpemd/UFBxY.png";

// what to do with the dataURL of our cropped image
var callback = function(dataURL) {
  document.body.style.backgroundImage = 'url(' + dataURL + ')';
}

<canvas id="main" width="284" width="383"></canvas>