HTML 畫布 - 新增影像

Canvas 元素最好的特性是它可以接受影像並使用它們。Canvas 元素接受所有外部影像檔案以在網頁上顯示，我們可以使用同一網頁上其他 Canvas 元素生成的影像。將影像匯入 Canvas 是一個兩步過程。

使用任何可用的選項檢索影像。
使用 drawImage() 函式將影像繪製到畫布元素上。

檢索影像

Canvas API 可以使用以下任何資料型別作為影像源。

HTMLImageElement − 這些影像是使用 Image() 建構函式或 HTML 的 <img> 標籤建立的。
SVGImageElement − 影像通常使用 <image> 元素嵌入。
HTMLVideoElement − 它使用 HTML <video> 元素作為影像源，獲取當前影片幀並將其用作所需的影像。
HTMLCanvasElement − 我們可以使用同一網頁上可用的另一個 Canvas 元素作為影像源。要在 Canvas 元素上檢索影像並使用它們，共有六種可能的方法，每種方法如下所述。

來自同一頁面的影像

我們可以使用 DOM 模型獲取頁面上所有可用的影像。要查詢所有可用的影像，必須訪問document.images 集合。要使用其中一個可用的影像，如果我們知道該特定影像的 ID，則可以使用document.getElementsByTagName() 方法或document.getElementById() 方法。

來自其他域的影像

要檢索其他域中可用的影像，我們將使用<img> 標籤並將影像使用drawImage() 函式呼叫到 Canvas 元素。確保影像可傳輸，否則畫布可能會被汙染。

使用其他 Canvas 元素的影像

當我們使用document.getElementsByTagName() 或document.getElementById() 方法檢索同一頁面上可用的影像時，我們也可以使用相同的方法從其他 Canvas 元素檢索影像。為此，我們必須確保源畫布在目標畫布使用它之前已繪製。

使用 URL 嵌入影像

要將影像新增到畫布，我們可以直接將影像 URL 新增到程式碼中並訪問它。使用 URL 的主要優點是與其他方法相比，影像可以更快地訪問，因為它不必再次訪問伺服器，並且可以輕鬆移植到其他位置。如果影像無法透過 URL 完美訪問，則可能不會在畫布上顯示。下面給出了一個使用 URL 訪問影像的簡單程式碼片段。

// Creating an image element
var image = new Image();
// Accessing the image using URL
image.src = 'https://tutorialspoint.tw/scripts/img/logo-footer.png';

從影片生成幀

我們可以使用 <video> 元素從影片中獲取影像幀。例如，如果我們有一個 id 為 smallvideo 的影片元素，我們可以從中獲取幀並將其用作影像。下面給出了一個小的程式碼片段來演示影像檢索。

// function to get image frame
function frameFromVideo() {
   var canvas = document.getElementById('canvas');
   var context = canvas.getContext('2d');
   return document.getElementById('smallvideo');
}

從頭開始構建影像

我們可以使用image() 建構函式建立影像並使用其路徑訪問它。影像路徑饋送到建構函式後，影像開始載入。下面給出了一個小的程式碼，演示瞭如何使用源路徑從頭開始構建影像。

// Create new img element
var image = new Image();
// to avoid exceptions
image.addEventListener('load', function() {
   // add draw image code statements here
}, false);
// give image source path
image.src = 'imageaddress.png';

繪製圖像

HTML5 Canvas 元素配備了一種在畫布上繪製圖像的預設方法。該方法如下所示。

序號	方法和描述
1	drawImage() 此方法將影像繪製到畫布元素上。該方法採用三種類型的輸入引數，並相應給出。
2	drawImage(image, x, y) 此方法將影像作為第一個引數，並將其繪製在畫布上的 (x, y) 點。
3	drawImage(image, x, y, width, height) 此方法將給定的影像作為引數繪製在畫布上的 (x, y) 點，並具有給定的寬度和高度。此方法通常用於縮放影像。
4	drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 此方法包含源點和目標點以及源和目標的寬度和高度。此方法用於切片影像。

示例

下面的示例程式碼實現瞭如何將影像繪製到 Canvas 元素中。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Images</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="image();">
      <canvas id="canvas" width="450" height="200" style="border: 1px solid black;"></canvas>
      <script>
         function image() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            var image = new Image();
            image.onload = function() {
               context.drawImage(image, 50, 50);
            };
            image.src = 'https://tutorialspoint.tw/html5/images/logo.png';
         }
      </script>
   </body>
</html>

輸出

程式碼將影像呈現到畫布上，如下所示。

縮放和切片

當需要包含畫布的空間以便可以在 Canvas 元素內構建其他形狀或圖形時，影像縮放非常有用。縮放可能會導致影像模糊，因此應正確給出引數。幫助我們在 Canvas 影像上執行縮放的方法是：

drawImage( image, x, y, width, height);

縮放示例

下面的示例演示瞭如何透過更改寬度和高度引數來對同一影像執行縮放。實現程式碼如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Images</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="image();">
      <canvas id="canvas" width="600" height="400" style="border: 1px solid black;"></canvas>
      <script>
         function image() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            var image = new Image();
            image.onload = function() {
               context.drawImage(image, 50, 50, 100, 75);
               context.drawImage(image, 200, 50, 50, 50);
               context.drawImage(image, 300, 50, 250, 75);
               context.drawImage(image, 50, 150, 400, 250);
            };
            image.src = 'https://tutorialspoint.tw/html5/images/logo.png';
         }
      </script>
   </body>
</html>

輸出

上述程式碼的輸出是：

切片有助於我們獲取影像的一部分並將其貼上到 Canvas 元素上。影像引數後的前四個引數表示要切片的影像大小，其他引數表示應將其貼上到 Canvas 中的位置以及指定的寬度和高度。用於實現切片的方法是：

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

切片示例

下面的示例顯示瞭如何切片影像。實現程式碼如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Images</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="image();">
      <canvas id="canvas" width="300" height="150" style="border: 1px solid black;"></canvas>
      <script>
         function image() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            var image = new Image();
            image.onload = function() {
               context.drawImage(image, 10, 10, 50, 50, 20, 20, 100, 100);
               context.drawImage(image, 40, 40, 50, 50, 150, 20, 100, 100);
            };
            image.src = 'https://tutorialspoint.tw/html5/images/logo.png';
         }
      </script>
   </body>
</html>

輸出

以下程式碼的輸出是：

列印頁面