5

我最近问了一个问题,关于如何在不裁剪的情况下将比我的画布更大的图像绘制到画布上,并在对其进行一些更改后将图像保存回其原始尺寸。我发现解决方案是将画布的内联heightwidth属性设置为大于图像,并使用 cssheightwidth属性来设置画布的样式以适合您的布局。

例如,假设我的图像尺寸范围在 400 像素到 2000 像素之间。但我不希望画布那么大,也不希望图像也被裁剪(因为用toDataURL画布上的内容保存图像时就是保存的内容)。这是有效的:

//style
#mycanvas{
    width: 400px;
    height: 400px;
}

<canvas id="mycanvas" width="2000" height="2000" />

这很好用,我的图像效果很好。但是这种行为是否存在问题并且将来一定会被更改/修复?我打算将此解决方案用于手头的任务。

有什么指导吗?

4

2 回答 2

6

此行为通常用于控制画布的大小:

  • 分辨率属性
  • 用于拉伸/收缩的 CSS

请参阅HTML5 中的画布宽度和高度

于 2012-12-09T09:00:41.483 回答
0

我知道自从提出这个问题以来已经有很长时间了,但我还有另一个可以使用的解决方案。

您可以尝试使用 canvasContext.drawImage()函数,在将图像绘制到画布中时调整图像大小。

句法:void ctx.drawImage(image, dx, dy, dWidth, dHeight);

  • dx 和 dy 是目标画布的 x 和 y 坐标
  • dWidth 和 dHeight 是在画布上绘制图像的尺寸。

如果您知道画布和图像的大小,您可以计算出这些值需要是什么

于 2019-03-11T08:25:23.237 回答