在本教程中，我们将学习如何使用 fabricjs 获取当前实例所基于的图像元素。我们可以通过创建fabric.image的实例来创建一个image对象。由于它是 fabricjs 的基本元素之一，我们还可以通过应用角度、不透明度等属性轻松自定义它。为了获取当前实例所基于的图像元素，我们使用 getelement 方法。
语法getelement(): htmlimageelement
使用getelement方法示例在这个例子中，我们使用了getelement方法来获取当前实例所基于的图像元素。您可以从开发工具打开控制台来查看返回的 html 图像元素。
<!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 getelement method</h2> <p>you can open the console from dev tools to see the logged output</p> <canvas id=canvas></canvas> <img src=https://www.tutorialspoint.com/images/logo.png id=img1 style=display: none /> <script> // initiate a canvas instance var canvas = new fabric.canvas(canvas); canvas.setwidth(document.body.scrollwidth); canvas.setheight(250); // initiating the image element var imageelement = document.getelementbyid(img1); // initiate an image object var image = new fabric.image(imageelement, { top: 50, left: 110, skewx: 15, }); // add it to the canvas canvas.add(image); // using the getelement method console.log( the image element on which the current instance is based on is as follows: , image.getelement() ); </script></body></html>
使用 getelement 方法和 fromurl 方法示例让我们看一下当 getelement 方法与 fromurl 方法结合使用时记录的输出的代码示例。在这里，我们将能够看到控制台中返回的图像元素。
<!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 getelement method along with fromurl method</h2> <p>you can open the console from dev tools to see the logged output</p> <canvas id=canvas></canvas> <script> // initiate a canvas instance var canvas = new fabric.canvas(canvas); canvas.setwidth(document.body.scrollwidth); canvas.setheight(250); // using fromurl method fabric.image.fromurl( https://www.tutorialspoint.com/images/logo.png, function (img) { canvas.add(img); console.log( the image element on which the current instance is based on is as follows: , img.getelement() ); } ); </script></body></html>
以上就是fabricjs – 如何获取当前实例所基于的图像元素？的详细内容。