如何在画布上按比例缩放图像？

Question

I can add a local image to my canvas. My problem though is that I can only scale the image by something like 0.5 but this isn't very helpful because images are always different. How might I have the image scale to say 400px wide, but the rest resize proportionally so that no matter the size of the chosen image, things fit and it isn't a guessing game (currently I have a link to an image resizer, I'm trying to remove the need)?

I'm using fabricjs 1.7.21.

 var canvas = new fabric.Canvas("c"); canvas.setHeight(616); canvas.setWidth(446); // New Photo to Canvas document.getElementById('imgLoader').onchange = function handleImage(e) { var reader = new FileReader(); reader.onload = function(event) { var imgObj = new Image(); imgObj.src = event.target.result; imgObj.onload = function() { var image = new fabric.Image(imgObj); image.set({ left: 10, top: 10, }).scale(0.5); canvas.add(image); } } reader.readAsDataURL(e.target.files[0]); } 

 canvas { border: 1px solid #dddddd; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.21/fabric.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label class="btn btn-default" id="imgLoader"> <span class="oi oi-image"></span> Add Image<input type="file" hidden> </label> <canvas id="c"></canvas> 

Answer 1

Try this:

 var canvas = new fabric.Canvas("c"); canvas.setHeight(616); canvas.setWidth(446); // New Photo to Canvas document.getElementById('imgLoader').onchange = function handleImage(e) { var reader = new FileReader(); reader.onload = function(event) { var imgObj = new Image(); imgObj.src = event.target.result; imgObj.onload = function() { var image = new fabric.Image(imgObj); image.width = 400; image.height = 400; image.set({ left: 10, top: 10, }); canvas.add(image); } } reader.readAsDataURL(e.target.files[0]); } 

Answer 2

scaleToWidth / scaleToHeight was what I was looking for. You can find the documentation here .

Props to @Ben who commented this. I wanted to close the question.