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

Posted 2023-03-25

【中文标题】将图像添加到画布，但高度和宽度不符合要求

【英文标题】：Add image to the canvas but the height and width are not as desired

【发布时间】：2021-09-13 18:48:49

【问题描述】：

我试试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"  ></canvas>

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

【参考方案1】：

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

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

image.scaleToWidth(desiredWidth);

或

image.scaleToHeight(desiredWidth);

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

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

【讨论】：

非常感谢您。它工作但当我使用 scaleToWidth 然后 scaleToHeight 不工作。它们如何协同工作？

您打算使用其中一个。当您使用 scaleToWidth 时，图像的高度将更改为该宽高比的正确高度，反之亦然，使用 scaleToHeight

我想两者都用。因为我的目的是用给定的长度和宽度重新绘制图像。期待您的来信

您不需要同时使用两者来获得您想要的尺寸。只需使用其中之一来设置正确的scaleX 和scaleY 值。然后根据需要调整height 或width 值。

感谢您耐心回答我的问题。我试着按照你的回答。这是正确的，但我的意思是我有 scaleX 和 scaleY 。将图像添加到画布后（使用 scaleToHeight ，这是正确的），但宽度会随着图像宽度溢出。我希望图像始终在给定的 scaleX 和 Y 中绘制，接受带有失真的图像。