How to add an image to a canvas, scaled to size?

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>

I believe that scaleToWidth/scaleToHeight may be what you are looking for. You can find the documentation at fabricjs.com/docs/fabric.Image.html#scaleToWidth. — Ben
– Ben, Commented Jan 21, 2018 at 2:44

Nir Ben-Yair · Accepted Answer · 2018-01-20 16:05:08Z

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]);
}

answered Jan 20, 2018 at 16:05

Nir Ben-Yair

1,6063 gold badges17 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

anonymoose Over a year ago

Hi. I'm actually trying to scale the image proportionally, not designate a specific height AND width; just a width—this is because not all images are square or even the same size. I tried rephrasing my question some to better reflect this.

anonymoose · Accepted Answer · 2018-02-27 04:02:39Z

0

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.

answered Feb 27, 2018 at 4:02

anonymoose

1,2534 gold badges25 silver badges65 bronze badges

Collectives™ on Stack Overflow

How to add an image to a canvas, scaled to size?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related