代码之家 › 专栏 › 技术社区 › superfreakonomics

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

fabricjs html5-canvas javascript

superfreakonomics · 技术社区 · 7 年前

我正在尝试使用html/javascript创建一个在线工具,用户可以上传导入画布的图片,然后将其他图片覆盖在上面,调整大小并四处移动。为了补充这一点,我使用了织物。js。

我确实希望在执行此操作时保持图像分辨率,因此我必须根据基本图像的大小调整画布的大小,如果图像的宽度为4000px,则可能会失控。我想做的是在有限的区域(如1000x1000)显示图像,同时保持原始大小,以便在用户完成操作时提供原始分辨率。我试图用CSS来限制画布的显示大小,但与img不同,画布似乎覆盖了我指定的限制。我还使用github页面来承载这个。

最好的方法是什么?

1 回复 | 直到 7 年前

Christopher Davies 7 年前

我会将图像与渲染层分开跟踪。所以,我要么将它们保存在内存中的散列或数组中,要么,如果太贵,我会将它们保存到存储中(服务器端或S3或其他任何地方)。

然后,只需将低(er)保真度图像渲染到画布。

推荐文章

YotiPoti · 我的照片太大了,无法容纳我的HTML画布。我该怎么办?

1 年前

Mykyta_GloryToUkraine · JS drawImage作为类中的方法

2 年前

TheTechy · 从多维数组为HTML5平铺图生成冲突对象

6 年前

Joni dep · JavaScript画布drawImage工作不正常[重复]

7 年前

DaFudgeWizzad · 如果形状超出了javascript画布的范围,如何剪切形状?

7 年前

Bestlogo56 · 我随机生成的平铺集未按预期工作。我怎样才能解决这个问题?

7 年前

John Ackerman · 绘制点的路径html画布

7 年前

Jaan · Fabricjs对象在完成时移动火

7 年前

Tareq Jami · 使用鼠标(坐标系)放大我的canva

7 年前

PiggMiner · 为什么我的代码不能将所有内容都绘制到画布上?

7 年前