web-dev-qa-db-ja.com

幅/サイズに合わせて画像を拡大するFabricJS

コンテナーのサイズに正しく合うように画像を拡大縮小するにはどうすればよいですか？ 2つの画像のグリッドと各画像が指定されたサイズに収まるようにしたいと思います。

https://codepen.io/peteringram0/pen/gebYWo?editors=001

img.set({
    left: 0,
    top: 0,
    width: 300,
    height: 300
    // Scale image to fit width / height ?
 });

編集：申し訳ありませんが私は私の質問を非常に明確に説明しませんでした。私はそれをグリッド内に配置しようとしていますが、「カバー」タイプとして配置しています。 https://codepen.io/peteringram0/pen/xWwZmy?editors=0011 。例えば。リンクにはグリッドに4つの画像がありますが、画像は中央にあり、オーバーフローしています。各画像を垂直方向に中央揃えにして、設定したサイズの外側にオーバーフローしないようにします。おかげで（xは縦横比を維持しながら中央にある必要があります）

canvashtml5-canvasfabricjs
10
Peter I

画像オブジェクトを特定の幅または高さにスケーリングする場合は、それぞれ scaleToWidth および scaleToHeight を使用します。

Img.set関数内で指定された高さと幅をコードから削除しました。また、scaeToHeightおよびscaleToWidthメソッドが追加されました。以下のコードを使用します。

window.fabric.Image.fromURL(imgUrl, (img) => {
  img.set({
    left: 300,
    top: 0
  });
  img.scaleToHeight(300);
  img.scaleToWidth(300);
  canvas.add(img);
})

このフィドルをチェックしてください： https://jsfiddle.net/hazeebp/195uan6f/1/

18
Abdul Haseeb