サイズ変更アルゴリズムの助けが必要です。
シナリオ：
- オリジナルの印刷用画像があります
- この元の画像のプレビューがブラウザに表示されます。（幅750pxとしましょう）
外部システムから、元の画像に関するトリミング データを受け取ります。ここで、プレビュー画像に同じトリミング フレームを表示する必要があります。
プレビュー イメージは、HTML の img タグに配置されます。jquery ギロチン プラグインが要素にアタッチされ、「クロップ フレーム」に画像が表示されます。( https://github.com/matiasgagliano/guillotine )
正しい幅、高さ、x、y を計算することができました...問題は、プレビュー画像の正しいスケールを設定することです。
これらは、外部システムから返されるパラメーターです。
- 元の画像のサイズ変更率 ( = outputPct)
- プレビュー画像がリサイズされた割合 (previewWidth / originalWidth = previewRatio) (- width, height, x, y, .... )
問題：
上記のパラメータに基づいてプレビュー画像のスケールを計算する方法は? 次の理由により、outputPct をそのまま使用することはできません。
- 元の outputPct > 1 の場合、プレビューをさらに拡大する必要があります
- 元の outputPct = 1 の場合、プレビューを 100% にズームする必要があります。
- 元の outputPct < 1 の場合、プレビューをズームインする必要があるのはごくわずかです。
プレビューの出力は、実際の画像の出力とまったく同じである必要があります。
すでに複数のバリエーションを試しましたが、適切な解決策を見つけることができませんでした。おそらく、この問題を解決するには、より数学的なソリューションを実装する必要があります。
前もって感謝します！