Question

我可以在画布上添加本地图像。我的问题是，我只能通过像0.5之类的东西来缩放图像，但这并不是很有用，因为图像总是不同的。我如何将图像比例说成400px宽，但其余按比例调整，这样无论选择的图像大小如何，事情都适合并且它不是猜测游戏（目前我有一个图像缩放器的链接，我试图消除这种需要）？

我使用的是fabricjs 1.7.21。

＆＃13;

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

＆＃13;

canvas {
  border: 1px solid #dddddd;
}

＆＃13;

<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>

＆＃13;

Answer 1

试试这个：

＆＃13;

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

＆＃13;

Answer 2

我正在寻找

scaleToWidth / scaleToHeight。您可以找到文档here。

对@Ben发表评论的道具。我想结束这个问题。

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

2 个答案: