裁剪画布/导出具有特定宽度和高度的 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 (裁剪图像, 源图像的 X 坐标, 源图像的 Y 坐标, 源图像的宽度, 源图像的高度, 目标图像的 X 坐标, 目标图像的 Y 坐标, 目标图像的宽度, 目标图像的高度)。
示例
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 方法。
