如何将图像添加到画布，缩放到大小？

Question

我可以将本地图像添加到我的画布。不过我的问题是我只能通过0.5 之类的方式缩放图像，但这并不是很有帮助，因为图像总是不同的。我怎么可能让图像比例说 400 像素宽，但其余的 按比例调整大小 以便无论所选图像的大小如何，都适合并且它不是猜谜游戏（目前我有一个链接到图像调整器，我正在尝试消除需要）？

我使用的是 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

试试这个：

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 是我想要的。您可以找到文档here。

向对此发表评论的@Ben 提供支持。我想结束这个问题。