裁剪画布/导出具有特定宽度和高度的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.