9

我已经使用 fabric.Image.fromURL 在画布中加载了图像，并且使用默认图像宽度和高度工作正常。现在我想最小化图像的宽度和高度。这个怎么做？

提前致谢。

4

5 回答 5

18

希望这会有所帮助

var src;  //Image source here
fabric.Image.fromURL(src, function(oImg) { 
    oImg.scaleToWidth(50);
    oImg.scaleToHeight(50);
});
于 2016-04-09T10:46:44.813 回答
12

我们可以使用 scalex / scaley 来设置高度/宽度，如下所示。

fabric.util.loadImage(imgsrc, function (img) {
    var legimg = new fabric.Image(img, {
        left: 30,
        top: marker.top,
        scaleX: 20 / img.width,
        scaleY: 20 / img.height
    });
    canvas.add(legimg);
    canvas.renderAll();
});

谢谢

于 2013-03-27T10:40:46.080 回答
1

我测试过的这个工作代码：

fabric.Image.fromURL(el.src, function(image) {
              image.set({
                left: left,
                top: top,
                angle: 0,
                padding: 10,
                cornersize: 10,
                hasRotatingPoint:true
              });

                      image.scaleToHeight(100);
                      image.scaleToWidth(200);

              canvas.add(image);
            });
于 2019-03-19T13:46:56.790 回答
1 

var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = function (f) {
    var data = f.target.result;                    
    fabric.Image.fromURL(data, function (img) {
      var oImg = img.set({left: 0, top: 0, angle: 00,width:100, height:100}).scale(0.9);
      canvas.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
    });
  };
  reader.readAsDataURL(file);
});
canvas{
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file"><br />
<canvas id="canvas" width="450" height="450"></canvas>

我们可以设置宽度和高度。

检查这个 JSfiddle：https ://jsfiddle.net/varunPes/8gt6d7op/5/

于 2016-02-02T12:34:05.557 回答
0

使用图像比例属性而不是图像大小。这对我有用。当我设置了图像的宽度和高度，而不是比例时，当我应用过滤器时，它会重置回原始宽度和高度，因为比例是 1.0。希望这可以帮助。

于 2012-09-19T14:55:35.713 回答