fabric.jsバックグラウンドとして使用し、キャンバスのサイズにリサイズしたときの画質を維持する方法

Question

1920x1080のサイズを持つ大きな画像がありますが、現在のキャンバスのサイズは800x600です。画像のスケーリング背景ピクセルのサイズ/画像の品質を低下させる。輸出するときでさえ、画質はまだ低いです。どうすればそれが起こるのを防ぐのですか？

var background = 'image.jpg'; 
    canvas.setBackgroundImage(background, canvas.renderAll.bind(canvas), { 
        width: canvas.width, 
        height: canvas.height, 
        originX: 'left', 
        originY: 'top' 
       }); 

Answer 1

私はファブリックがこれを改善する方法を持っているかどうかはわかりません。大きなスケーリングを行うと、こうした種類の品質低下を引き起こす可能性があります。私たちのアプリでは、高品質で画像のサイズを変更するためのpicaというライブラリを使用しています。 pica demo here

あなたがイメージ画像を縮小するために、このライブラリを使用することができ

pica repo here

キャンバスに追加する前に、またはキャンバスサイズを変更し、多分とき。

Answer 2

また、fabricjsサイズ変更フィルタの1つを使用して、縮小されたイメージのより良いバージョンを取得することもできます。 彼らはとにかくパイカンとしては良くありません。

PICAとfabricjs resizeの間の接続を簡単に実装することができます。Picaは要素を入力に取り入れて、ファブリックのフィルターの機能を多かれ少なかなく出力するキャンバスを提供します。