How to extract part of an image into a canvas and use it as a background image for a div?

Question

This is what my code looks like:

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 + ')'); }); 

I am trying to extract a portion of an image on a canvas starting with (0,0) with a height and width of 300 pixels and convert this imageData object to dataUrl, which will be used as the background div.

I get an error: imageData.toDataUrl () is not a function. How can I achieve this?

Thanks in advance!

Answer 1

toDataURL is an HTMLCanvasElement method that you must call from the canvas element itself.

You can draw the resulting imageData on the canvas after you have resized to the desired one, but the easiest solution would be to use a second canvas without a screen, where you will draw the first canvas, thanks to 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>