以較小的尺寸顯示畫布，同時保持分辨率

Question

我正在嘗試使用html / javascript創建一個在線工具，用戶可以在其中上傳導入到畫布中的圖片，然后可以將其他圖片疊加在其上方，調整大小並在周圍移動。 要添加此內容，我正在使用fabric.js。

我確實要在執行此操作時保持圖像分辨率，所以我必須根據基本圖像的大小調整畫布的大小，如果圖像的寬度為4000像素，則畫布可能會失控。 我想做的是在有限的區域（例如1000x1000）中顯示圖像，同時保持原始尺寸，以在完成后為用戶提供原始分辨率。 我試着用CSS來限制畫布的顯示大小，但與img不同，畫布似乎覆蓋了我指定的限制。 我也在使用github頁面來托管它。

最好的方法是什么？

Answer 1

我將與渲染層分開跟蹤圖像。 因此，我要么將它們保存在內存中的哈希或數組中，要么，如果太昂貴，我會將其持久化到存儲中（服務器端或S3或其他）。

然后，您只需將低保真度圖像渲染到畫布上即可。