裁剪畫布/匯出具有特定寬度和高度的HTML5畫布

HTML5 canvas允許使用者在任何網頁上繪製或建立二維圖形。假設您想裁剪網頁上建立的畫布的一部分並將其匯出到網頁的任何其他區域，則可以使用javascript來實現。例如，您在畫布中有一張影像，並且想要匯出尺寸為400px * 260px的影像的一部分。

在本文中，我們將學習如何使用一些javascript程式碼來執行上述操作。

為了進一步學習，讓我們首先了解什麼是HTML5 Canvas。

什麼是HTML5 canvas？

HTML5 canvas是網頁上的一個矩形容器，其中包含使用者使用javascript繪製的二維圖形。預設情況下，畫布沒有任何邊框或內容。

height和width屬性用於定義畫布的大小。使用style屬性允許我們設計畫布的邊框。

語法

<canvas> </canvas>

示例

<canvas id=” demo" width="100%" height="100%"></canvas>

注意 - id屬性應指定，以便可以在Javascript程式碼中引用它。

如何裁剪HTML5 canvas？

一種方法是建立一個輔助畫布，從中繪製到原始畫布。這個輔助畫布將具有您想要從原始畫布裁剪的尺寸。但是，使用者將無法看到這個輔助畫布。我們可以選擇對輔助畫布使用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 canvas可用於裁剪影像。這可以使用drawImage()方法完成。如果您想為影像的裁剪部分建立一個url，請使用.toDataUrl方法。

更新於：2022年10月12日

1K+瀏覽量

啟動你的職業生涯

透過完成課程獲得認證

開始
廣告
© . All rights reserved.