在画布中绘制方形图像

Question

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:

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

For example for this image:

I should get:

Answer 1

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('http://i.stack.imgur.com/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> 

Answer 2

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.