CODEWITHSUNDEEP
javascripthtmlcanvas
Sebastian Corneliu Vîrlan
Sebastian Corneliu Vîrlan

Reputation: 1700

Draw a square version of image in canvas

I am trying to show previews of uploaded images in a canvas. The preview should be a square version of image.

What I have:

var img = new Image;
img.src = imageSrc;
var c = document.getElementById('file-preview-' + data.response.id);
var ctx = c.getContext("2d");
img.onload = function() {
    ctx.drawImage(img, 0, 0);
};

And the preview:

enter image description here

So how can I draw on the canvas a 150x150 square with maintained ratio cropped version of the image?

For example for this image:

enter image description here

I should get:

enter image description here

Upvotes: 2

Views: 2267

Answers (2)

ManoDestra
ManoDestra

Reputation: 6473

Here's a method that yields precisely the result you desire, cropped, resized and centered (with commented out lines that yield a left based cropping instead)...

    var ctx;
    function init(event) {
    	ctx = document.getElementById('canvas').getContext('2d');
        // Your preview is actually 120x120,
        // but I've stuck with the textual description of
        // your requirements here.
    	ctx.canvas.width = 150;
    	ctx.canvas.height = 150;
    	loadBackground('https://i.sstatic.net/PCKEo.png');
    }
    
    function loadBackground(path) {
    	var img = new Image();
    	img.onload = drawBackground;
    	img.src = path;
    }

    function drawBackground(event) {
    	var img = event.target;
    	var imgSize = Math.min(img.width, img.height);
        // The following two lines yield a central based cropping.
        // They can both be amended to be 0, if you wish it to be
        // a left based cropped image.
    	var left = (img.width - imgSize) / 2;
    	var top = (img.height - imgSize) / 2;
        //var left = 0; // If you wish left based cropping instead.
        //var top = 0; // If you wish left based cropping instead.
    	ctx.drawImage(event.target, left, top, imgSize, imgSize, 0, 0, ctx.canvas.width, ctx.canvas.height);
    }
    
    window.addEventListener('load', init, false);
<canvas id="canvas"></canvas>

Upvotes: 3

A.Sharma
A.Sharma

Reputation: 2799

Based on information from this question: SO Question

I was able to modify what was done to create a square cropped image in canvas:

var img = new Image;
img.src = "http://cdn.bmwblog.com/wp-content/uploads/2016/02/M-Performance-Parts-BMW-M2-3.jpg"; //Or whatever image source you have
var c= document.getElementById('file-preview');
var ctx=c.getContext("2d");

img.onload = function(){
      ctx.drawImage(img, img.width/2, img.height/2, img.width, img.height, 0, 0, img.width, img.height);
};

You just have to modify the arguments you are passing to the drawImage function as well as add some more.

You can see a fiddle here: https://jsfiddle.net/4d93pkoa/3/

Remember that the first two parameters specify the image's top left coordinates within the canvas element.

Remember to set the width and height of the canvas element in HTML to a square shape.

Upvotes: 1

Related Questions