將圖像繪制到畫布中

Question

我正在使用HTML5 canvas創建圖像查看器應用程序。 我使用了兩個畫布，第一個用於以未顯示給用戶的實際寬度和高度加載圖像（這是一個未附加到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);

但是對於平底鍋，變焦鏡頭和其他我什么都沒有。