在本教程中，我们将学习如何使用 FabricJS 设置 Line 对象的 URL 字符串中的质量级别。 Line 元素是 FabricJS 中提供的基本元素之一。它用于创建直线。由于线元素在几何上是一维的并且不包含内部，因此它们永远不会被填充。
我们可以通过创建fabric.Line的实例来创建线条对象，指定线条的x和y坐标并将其添加到画布上。为了设置 Line 对象的 URL 字符串中的质量级别，我们使用 quality 属性。
语法
toDataURL({ quality: Number }: Object): String
参数
选项（可选） – 此参数是一个对象，它为 Line 对象的 URL 表示形式提供额外的自定义。使用此参数可以更改高度、质量、格式和许多其他属性，其中质量是一个属性。
选项键
quality – 此属性接受一个 Number 值，表示最终输出图像的质量级别。可接受的值介于 0 和 1 之间，不包括 0。0.1 表示质量最差，1 表示质量最好。该属性只能用于 jpeg 格式。默认值为 1。
商汤商量
商汤科技研发的AI对话工具，商量商量，都能解决。
36 查看详情 
不使用quality属性
示例
让我们看一个代码示例，看看不使用 quality 属性时的输出图像。一旦我们从开发工具打开控制台，我们就可以看到 Line 对象的 URL 表示。我们可以复制该 URL 并将其粘贴到新选项卡的地址栏中以查看最终输出。由于我们没有使用 quality 属性，因此将使用默认值，即 1。
Without using the quality property
You can open console from dev tools and see the output URL. You can copy that and paste it in the address bar of a new tab to see the image.
// Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a Line object var line = new fabric.Line([200, 100, 100, 40], { stroke: "blue", strokeWidth: 20, angle: 70, }); // Add it to the canvas canvas.add(line); // Using the toDataURL method console.log(line.toDataURL({ format: 'jpeg' }));
使用质量属性
示例
让我们看一个代码示例，看看使用 quality 属性时 Line 对象的最终输出图像是什么样子。在本例中，我们向其传递了值 0.1。因此最终图像的质量将变为最差。
Using the quality property
You can open console from dev tools and see the output URL. You can copy that and paste it in the address bar of a new tab to see the image.
// Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a Line object var line = new fabric.Line([200, 100, 100, 40], { stroke: "blue", strokeWidth: 20, angle: 70, }); // Add it to the canvas canvas.add(line); // Using the toDataURL method console.log(line.toDataURL({ format: 'jpeg' , quality: 0.1}));
以上就是FabricJS – 如何设置 Line 对象的 URL 字符串中的质量级别？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/535487.html
微信扫一扫 
支付宝扫一扫 
