資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究裁剪畫布/匯出具有特定寬度和高度的 HTML5 畫布
HTML5 畫布允許使用者在任何網頁上繪製或建立 2D 圖形。假設您想裁剪網頁上建立的畫布的一部分並將其匯出到網頁的任何其他區域，那麼您可以使用 javascript 來實現。例如，您在畫布上有一張圖片，並且想要匯出尺寸為 400px * 260px 的圖片的一部分。
在本文中，我們將學習如何使用一些 javascript 程式碼來執行上述操作。
為了進一步學習，讓我們首先考慮瞭解什麼是 HTML5 畫布。
什麼是 HTML5 畫布？
HTML5 畫布是網頁上的一個矩形容器，其中包含使用者使用 javascript 繪製的 2D 圖形。預設情況下，畫布沒有任何邊框或內容。
height 和 width 屬性用於定義畫布的大小。style 屬性的使用允許我們設計畫布的邊框。
語法
<canvas> </canvas>
示例
<canvas id=” demo" width="100%" height="100%"></canvas>
注意 - id 屬性應該被指定，以便它可以在 Javascript 程式碼中被引用。
如何裁剪 HTML5 畫布？
其中一種方法是建立一個輔助畫布，從原始畫布上繪製到該輔助畫布上。這個輔助畫布將具有您想要從原始畫布中裁剪的尺寸。但是，使用者將無法看到這個輔助畫布。我們可以選擇對輔助畫布使用 toDataUrl() 將其轉換為 url。
例如，以下程式碼將演示此方法 -
示例
<canvas> </canvas> <script> (function(){ var myCanvas = document.getElementsByTagName("canvas"); var content = myCanvas[0].getContext("2d"); var data = content.getImageData(0, 0, myCanvas[0].width, canvas[0].height); var operation = content.globalCompositeOperation; content.globalCompositeOperation = "destination-over"; content.fillStyle = "#FFFF00"; content.fillRect(0,0,myCanvas[0].width, myCanvas[0].height); var secCanvas = document.createElement("myCanvas"), tCtx = secCanvas.getContext("2d"); secCanvas.width = 560; secCanvas.height = 420; tCtx.drawImage(myCanvas[0],0,0); var img = secCanvas.toDataURL("image/png"); document.write('<a href=" '+img+' "><img src=" '+img+' "/></a>'); })? </script>
其中，
getElementByTagName 是 document 介面的一種方法，它返回 HTML 中寫入的給定標籤名的元素。
示例
getElementByTagName(h2), getElementByTagName(body)
在上面的程式碼中，它用於訪問 canvas 元素的元素
myCanvas[0].getContext("2d")
.getContext() 用於獲取畫布上的繪圖上下文。
“2d” 是一種上下文型別，它允許建立二維上下文。
上面的程式碼用於獲取畫布的上下文。
.getImageData()
它用於返回畫布裁剪部分的資料。
語法
getImageData(x, y, w, h)
引數
x - 需要獲取資料的框的左上角的 x 軸座標。
y - 需要獲取資料的框的左上角的 y 軸座標。
w - 框的寬度
h - 框的高度
示例
demo.getImageData( 0, 23, 100, 200)
.globalCompositeOperation 是 Canvas 的一個屬性，它允許我們設定如何在畫布上繪製新的圖形（如形狀、影像等）。
一些模式包括 source-over（預設）、source-in、destination-in、destination-over、lighter、copy 等。
在我們的程式碼中，我們使用了 destination-over，這意味著目標（即已經存在於畫布上的內容）將繪製在源（即要繪製到畫布上的內容）之上。
示例
demo.globalCompositeOperation = “source- out”
.fillstyle 用於設定畫布中某個部分的顏色。在我們的程式碼中，它用於使要匯出的部分變為黃色。
示例
demo.fillstyle = “#FFFFFF”
.fillRect() 是一種用於繪製矩形或框的方法，該矩形或框根據指定的 fillstyle 進行填充。
語法
fillRect(x, y, w, h)
引數
x - 框起始點的 x 軸座標
y - 框起始點的 y 軸座標。
w - 框的寬度
h - 框的高度
.createElement 用於使用 Javascript 建立元素
語法
document.createElement( type)
引數
type 是您要建立的元素的型別。
示例
document.createElement
用於建立按鈕
document.createElement
用於建立段落
secCanvas.width = 560; secCanvas.height = 420;
以上程式碼行指定了我們想要繪製的輔助畫布的高度和寬度。
.drawImage 方法用於在當前畫布上繪製圖像或畫布。
語法
drawImage (cropping image, X- coordinate of source, Y- coordinate of source, source width, source height, X- coordinate of destination image, Y coordinate of destination image, destion image’s width, destination image’s height).
示例
demo.drawImage ( img, 12, 10, 300, 250, 0, 0, 100, 200);
.toDataUrl 用於將畫布繪製轉換為 url。
讓我們再看一個例子，使它更加清晰。在這個例子中，我們有一個影像，我們將從中裁剪出它的一部分。
<body> <h2> Image</h2> <img id= “image” src= “ ” > <h2> Cropped portion</h2> <canvas id="Canvas" width="480" height="100" style="border:3px #FFFF00 solid"> </canvas> <script> window.onload = function () { var myCanvas = document.getElementById("Canvas"); var context = myCanvas.getContext("2d"); var pic = document.getElementById("Image"); context.drawImage(pic, 16, 60, 200, 160, 0, 0, 90, 110); } </script> </body>
結論
影像在任何網站中都是一個重要的組成部分。即使網站設計得很好，但如果沒有影像，也會顯得相當沒有吸引力。因此，開發人員瞭解如何在他們的網站上設定影像樣式以獲得更好的使用者體驗非常重要。HTML5 畫布可以用來裁剪影像。這可以透過 drawImage() 方法來完成。此外，如果您想為影像的裁剪部分建立一個 url，請使用 .toDataUrl 方法。
1K+ 次檢視
