fabricjs - fabric.jsで画像の高さと幅を設定するには?

Question

fabric.Image.fromURL を使用してキャンバスに画像をロードし、デフォルトの画像の幅と高さで正常に動作していました。今、画像の幅と高さを最小限に抑えたいと思っています。これを行う方法？

前もって感謝します。

Answer 1

以下のように、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();
});

ありがとう

Answer 2

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/

Answer 3

画像サイズではなく、画像スケール プロパティを操作します。これは私にとってはうまくいきました。スケールではなく画像の幅と高さを設定した場合、フィルターを適用すると、スケールが1.0だったため、元の幅と高さにリセットされました。お役に立てれば。