FabricJS – 将 Polygon 对象转换为 HTMLCanvasElement 后查找数据 URL?
我们可以通过创建 fabric.Polygon 实例来创建 Polygon 对象。多边形对象的特征可以是任何由一组连接的直线段组成的封闭形状。由于它是 FabricJS 的基本元素之一，我们还可以通过应用角度、不透明度等属性轻松自定义它。
为了将多边形对象转换为 HTMLCanvasElement，我们使用 toCanvasElement 方法。它返回 HTMLCanvasElement 类型的 DOM 元素，该接口从 HTMLElement 接口继承了其属性和方法。我们使用 toDataURL 方法来查找图像的数据 URL 表示。返回图像的格式为指定类型或默认为 png，分辨率为 96dpi。
语法
HTMLCanvasElement.toDataURL()
示例 1:使用 toCanvasElement 方法
让我们看一个代码示例，以查看使用 toCanvasElement 方法时记录的输出。使用 toCanvasElement 方法时，将返回 HTMLCanvasElement 类型的 DOM 元素。HTMLCanvasElement 接口提供了用于更改画布呈现方式的各种方法和属性。它继承了 HTMLElement 接口的属性和方法。您可以从开发工具中打开控制台，以查看正在返回 HTMLCanvasElement 类型的 DOM 元素。
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Using the toCanvasElement method</h2>
<p>You can open console from dev tools to see the logged output</p>
<canvas id="canvas"></canvas>
<script>
// 启动一个canvas实例
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// 初始化多边形对象
var polygon = new fabric.Polygon(
[
{ x: 600, y: 310 },
{ x: 650, y: 450 },
{ x: 600, y: 480 },
{ x: 550, y: 480 },
{ x: 450, y: 460 },
{ x: 300, y: 210 },
],
{
fill: "#778899",
stroke: "blue",
strokeWidth: 5,
top: 50,
left: 100,
scaleX: 0.5,
scaleY: 0.5,
}
);
// 将其添加到画布
canvas.add(polygon);
// 使用 toCanvasElement 方法
console.log(
"The output on using toCanvasElement method is:",
polygon.toCanvasElement()
);
</script>
</body>
</html>
示例 2:使用 toDataURL 方法
让我们看一个代码示例，以查看当 toDataURL 方法与 toCanvasElement 方法一起使用以查找转换为 HTMLCanvasElement 的 Polygon 对象图像的数据 URL 字符串时记录的输出。我们可以复制该 URL 并将其粘贴到新选项卡的地址栏中以查看最终输出。由于我们已将格式指定为"jpeg"，因此图像将采用 jpeg 格式。
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Using toDataURL method</h2>
<p>
You can open console from dev tools to see that the data like URL string of the image is being returned
</p>
<canvas id="canvas"></canvas>
<script>
// 启动一个canvas实例
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// 初始化多边形对象
var polygon = new fabric.Polygon(
[
{ x: 600, y: 310 },
{ x: 650, y: 450 },
{ x: 600, y: 480 },
{ x: 550, y: 480 },
{ x: 450, y: 460 },
{ x: 300, y: 210 },
],
{
fill: "#778899",
stroke: "blue",
strokeWidth: 5,
top: 50,
left: 100,
scaleX: 0.5,
scaleY: 0.5,
}
);
// 将其添加到画布
canvas.add(polygon);
// 使用 toCanvasElement 方法
var polygonCanvas = polygon.toCanvasElement({
width: 200,
});
// 使用 toDataURL 方法
console.log(
"The data-URL is as follows:",
polygonCanvas.toDataURL({ format: "jpeg" })
);
</script>
</body>
</html>
结论
在本教程中，我们使用了两个简单示例来演示如何使用 FabricJS 将 Polygon 对象转换为 HTMLCanvasElement 后找到数据 URL。
