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

Question

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

我确实想保持图像的分辨率，同时我这样做，所以我必须调整画布的大小根据基本图像的大小，这可能会失去控制，如果图像是4000px宽。我想要做的是在有限的区域显示图像，例如1000x1000，同时保持原始大小，以便在用户完成时为他们提供原始分辨率。我尝试使用CSS来限制画布的显示大小，但与img不同的是，canvas似乎覆盖了我指定的限制。我也在使用github pages来托管它。

做这件事最好的方法是什么？

Answer 1

我会把我的图像和我的渲染层分开。因此，我会将它们保存在内存中的散列或数组中，或者，如果这太昂贵，我会将它们持久化到存储中(服务器端或S3或其他任何地方)。

然后，您只需将低(Er)-fidelity图像渲染到画布上。