資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何從 Data URL 將影像繪製到 HTML Canvas 上？
Data URL 是一種以文字格式表示影像檔案的方式。這使得在應用程式之間傳輸資料以及將影像儲存在記憶體中變得容易，而無需將其寫入磁碟。從 Data URL 將影像繪製到 HTML canvas 上相對簡單，只需幾行程式碼即可完成。
此過程涉及建立一個 Image 物件，並將它的 source 屬性設定為 Data URL 字串，然後使用 drawImage() 方法將其繪製到 canvas 上。本文將提供有關如何從 Data URL 將影像繪製到 HTML canvas 上的分步說明。
在 Canvas 中使用 drawImage()
HTML5 的 drawImage() 方法用於顯示 canvas 中的影像或影片。您可以使用此功能顯示整個影像或僅顯示其中的一部分。但在可以進一步載入 canvas 上的影像之前，必須先載入它。
語法
以下是 drawImage() 的語法 -
context.drawImage(img,x,y);
請考慮以下示例，以便更好地瞭解如何從 Data URL 將影像繪製到 HTML canvas 上。
示例
在以下示例中，我們正在執行指令碼以從 URL 將影像繪製到 canvas 上。
<!DOCTYPE html>
<html>
<body>
<canvas id="tutorial"></canvas>
<script>
var c = document.getElementById("tutorial");
var ctx = c.getContext("2d");
var image = new Image();
image.onload = function() {
ctx.drawImage(image, 0, 0);
};
image.src = 'https://tutorialspoint.tw/images/logo.png';
</script>
</body>
</html>
當指令碼執行時，它將生成一個輸出，其中包含從指令碼中提供的 URL 獲取的 canvas 上繪製的影像。
示例
以下是另一個示例，在這裡我們顯示 canvas 上來自源 URL 的部分影像。
<!DOCTYPE html>
<html>
<body>
<style>
canvas{
border : 2px solid #82E0AA ;
}
</style>
<canvas id='tutorial' width=500 height=500></canvas>
<script>
var canvas = document.getElementById('tutorial');
var context = canvas.getContext('2d');
var image = new Image();
image.onload = () => {
context.imageSmoothingEnabled = false;
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, 30, 40, 50, 50, 150, 220, 200, 200);
};
image.src = 'https://tutorialspoint.tw/images/logo.png';
</script>
</body>
</html>
執行上述指令碼後，將彈出輸出視窗，在網頁上顯示從 URL 獲取的 canvas 上繪製的影像。
更新時間: 2023年4月20日
2K+ 閱讀量
廣告