Как извлечь часть изображения на холсте и использовать его в качестве фонового изображения для 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) с высотой и шириной 300 пикселей и преобразовать этот объект imageData в dataUrl для использования в качестве фона div.

Я получаю сообщение об ошибке: imageData.toDataUrl() не является функцией. Как мне этого добиться?

Заранее спасибо!

Answer 1

toDataURL является HTMLCanvasElement метод, который вы должны вызывать из самого элемента canvas.

Вы можете вернуть полученное изображение imageData на холст после того, как вы изменили его размер на нужный, но самое простое решение - использовать второй, неэкранный холст, где вы нарисуете первый холст благодаря context.drawImage метод:

// 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>