高品質の画像でキャンバスをエクスポートするためのベストプラクティスは何ですか？
あなたの助けが必要です。私は自分の状況を説明します。fabric.jsライブラリを使用して、アプリケーションに図形やテキストなどを配置しています。私のキャンバスサイズは1000x1000ピクセル（約26.45x26.45センチメートル）です。 300dpiなどの高品質の画像をアップロードするための画像アップロードスクリプトがあります。
基本的に私がしていることは次のとおりです。-キャンバスを描画します（画像のアップロード、テキストの配置など）。 -キャンバスのサイズを倍率で乗算して、最後に300dpiの画像を作成できるようにします。 -キャンバスをPNG形式で保存します。 -php/ajaxとImagickを使用して、キャンバスを300 dpiの品質で配置し、jpg形式で保存します。
問題は、キャンバスを保存すると、キャンバスのサイズを72 dpiに変更したため（PNGで保存した時点）、アップロードされた画像の品質が低下することです。
考えられる解決策は、画像をアップロードするときに、xとyの位置とサイズの配列で位置を保存し、プロセス全体の最後に、JPGで画像を置き換えることだと思います。これが最善の方法である場合、ImagickライブラリまたはPHPで作成することは可能ですか？
それについてのご意見をお聞かせください。
ありがとうございました。
画像を扱う場合、DPIはまったく関係ありません。画像はピクセル単位で測定されるため、これを調整する必要があります。このコンテキストでは意味がないため、DPIは安全に無視できます。
スケーリングはここでは役に立ちません-ベクトルではなくピクセルデバイスで作業していることを忘れないでください。したがって、キャンバスは印刷などに使用するサイズになっている必要があります。そうしないと、スケーリング時に補間によって品質が低下します。 。
方法は次のとおりです。
最終段階で必要なサイズに関連して、キャンバスのサイズをピクセル単位で事前に計算する必要があります。
300DPI出力で15x 10 cmの画像（または約6 x 4インチ）を印刷するとします。次に、ピクセルを計算します。
Width : 10 cm * 300 / 2.54 = 1181 pixels
Height: 15 cm * 300 / 2.54 = 1772 pixels
インチの場合、単純にDPIを掛けます（4インチ！= 10 cmなので、結果が少し異なります。簡単にするために数値を選択しました）：
Width : 4 in * 300 = 1200 pixels
Height: 6 in * 300 = 1800 pixels
26.45 cm @ 300 DPIの画像の場合、キャンバスは次のようになります。
26.45 cm * 300 DPI / 2.54 inches = 3124 pixels.
そのキャンバスを画面上の小さな領域に表示するには、CSSを使用して要素を表示します。たとえば、-
<canvas width="3124" height="3124" style="width:600px;height:600px;"></canvas>
これで、実際のピクセル位置でキャンバスに描画でき、画面に縮小して表示されます（ただし、キャンバス自体のすべての情報は保持されます）。マウス座標を使用する場合は、マウスの位置を比例的にスケーリングします（canvas pos = mouse coord * 3124px/600px）。
ズームなどの場合、少し複雑になりますが、原則は変わりません。画像の最終的なサイズは、最終的な結果のサイズでなければなりません。
DPIについて：この画像が72DPIまたは300DPIの場合、ピクセル数はまったく同じになります。すでに述べたように、画像はピクセル単位で測定されるためです。
DPIは、ピクセルデバイス（ビットマップ、モニター、カメラなど）に関しては任意の値であり、DTPソフトウェアでのみ使用され、最終印刷の寸法に関するヒントを取得します。この情報は、画像の事前スケーリングにのみ使用されます。印刷の設定に使用するページとの関係。