将图像绘制到画布中答案

【问题标题】：Drawing image into the canvas将图像绘制到画布中
【发布时间】：2012-11-09 10:53:45
【问题描述】：

我正在使用 HTML5 画布创建一个图像查看器应用程序。我使用了两个画布，第一个用于加载未向用户显示的实际宽度和高度的图像（它是未附加到 DOM 树中的隐藏画布），第二个实际呈现给用户。假设图片的实际分辨率为1200*800。我将图像加载到大小为 1200*800 的隐藏画布中。然后我尝试将图像加载到分辨率为 700*600 的可见画布中（我添加了类似 ctx.drawImage（hiddenCanvas,0,0,700,600）的代码。我可以看到此分辨率下的整个图像。我有以下问题。

加载到可见画布时会保持纵横比吗？或者我们是否手动进行纵横比操作。
这样做会不会降低图像质量。这是执行 imageviewer 应用程序的标准方法吗？

我必须在此查看器中添加放大、缩小、平移等功能。

请任何人都可以回答我的问题。

【问题讨论】：

标签： javascript jquery html html5-canvas

【解决方案1】：

当您说,0,0,700,600 时，您会自动指定纵横比。

大多数调整大小操作都会降低图像质量。如果您将 1200x800 图像的大小调整为 700x600，则会执行某种插值（线性、双三次等）。

【讨论】：

【解决方案2】：

你可以使用

var name=new Image();
name.src="name.fileformat";
context.drawImage(name,X, Y, sizeX, sizeY);

但对于平移、缩放和其他，我没有任何关于它们的东西。

【讨论】：