在保持分辨率的同时以较小的尺寸显示画布

Question

我正在尝试使用 html/javascript 创建一个在线工具，用户可以在其中上传导入到画布中的图片，然后他们可以在其上覆盖其他图片、调整大小和移动它们。要添加它，我使用的是 fabric.js。

我确实想在执行此操作时保持图像分辨率，因此我必须根据基本图像的大小调整画布大小，如果图像宽度为 4000 像素，这可能会失控。我想做的是在有限的区域（例如 1000x1000）中显示图像，同时保持原始大小，以便在完成后为用户提供原始分辨率。我尝试使用 CSS 来限制画布显示大小，但与 img 不同，画布似乎覆盖了我指定的限制。我也在使用 github pages 来托管这个。

最好的方法是什么？

Answer 1

我会与我的渲染层分开跟踪我的图像。所以，我要么将它们保存在内存中的散列或数组中，要么，如果这太昂贵，我会将它们持久化到存储中（服务器端或 S3 或其他）。

然后，您只需将低保真度的图像渲染到画布上。