将图像添加到画布，但高度和宽度不符合要求

Question

我试试https://jsfiddle.net/natchiketa/xHYjz/ 和我的功能：

  function addtesst() {
      var imgURL = 'http://i.imgur.com/8rmMZI3.jpg';
      var pugImg = new Image();
      pugImg.onload = function (img) {
          var pug = new fabric.Image(pugImg, {
              width: 800,
              height: 1000,
              left: 150,
              top: 170,
              scaleX: 0.41,
              scaleY: 0.42
          });
          canvas.add(pug);
      };
      pugImg.src = imgURL;
  }

结果：

var imgURL = 'http://i.imgur.com/8rmMZI3.jpg';

var canvas = new fabric.Canvas('canvas');

var pugImg = new Image();
pugImg.onload = function (img) {    
    var pug = new fabric.Image(pugImg, {
        angle: 45,
        width: 500,
        height: 500,
        left: 50,
        top: 70,
        scaleX: .25,
        scaleY: .25
    });
    canvas.add(pug);
};
pugImg.src = imgURL;

#canvas {
    box-shadow: 0 0 5px 1px black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.1.0/fabric.all.min.js"></script>
<canvas id="canvas" width="640" height="480"></canvas>

如您所见，我的照片未满。 请帮我找出问题所在。 谢谢。

Answer 1

width 和 height 属性实际上并不打算被它使用。它们用于设置应显示原始图像的像素数。大于原始图像尺寸的值意味着更大的容器，较小的值会导致裁剪。

不要直接设置宽度、高度、scaleX 和 scaleY 值，而是使用这两种方法来设置图像大小：

image.scaleToWidth(desiredWidth);

或

image.scaleToHeight(desiredWidth);

如果您有特定的尺寸并且不介意拉伸图像，您也可以这样做：

image.set({
  'scaleX': desiredWidth / image.width,
  'scaleY': desiredHeight / image.height
});