javascript - 将图像绘制到画布中

Question

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

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

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

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

Answer 1

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

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

Answer 2

您可以使用

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

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