Home > Article > Web Front-end > How to create an instance of Fabric.Image from a URL string using FabricJS?
How to create an instance of Fabric.Image from a URL string using FabricJS?
- PHPzforward
- 2023-08-24 14:09:111798browse
In this tutorial we will learn how to start from URL string using FabricJS. We can create an Image object by creating an instance fabric.image. Since it is one of the basic elements of FabricJS, we can also easily Customize it by applying properties such as angle, opacity, and more. in order to create Fabric.Image instance from a URL string, we use the fromURL method.
grammar
fromURL(url: String, callback: function, imgOptions: Object)
parameter
url - This parameter accepts a string representing the URL from which the image was created.
Callback (optional) - This parameter is a function that is called immediately after the image is created. For this function, the newly created image is passed as the first parameter. The second parameter is a Boolean value indicating whether an error occurred. This parameter is optional.
imgOptions (optional) - This parameter is an optional object that provides additional customization to our image. Use this parameter to change the origin, stroke width, and many other properties associated with the image object.
Do not use fromURLmethod
Example
Let's look at a code example to see how an Image object is displayed when using the fromURL method Unused. In this case we just need to create an instance of fabric.Image and add it to our canvas.
<!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>Without using the fromURL method</h2>
<p>You can see that the image object has been added to the canvas</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,
});
// Add it to the canvas
canvas.add(image);
</script>
</body>
</html>
Use fromURLmethod
Example
In this example, we used the fromURL method to demonstrate that we can create Even though we don't have an image element, it's an image object. In this case we just need Requires the URL of the image and passes the created callback function fabric.Image object as the first parameter and then add it to the canvas.
<!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 fromURL method</h2>
<p>
You can see that the image object can be created from the image URL itself
</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Calling fabric.Image.fromURL and passing the url of our desired image
fabric.Image.fromURL(
"https://www.tutorialspoint.com/images/logo.png",
function(Img) {
canvas.add(Img);
}
);
</script>
</body>
</html>
in conclusion
In this tutorial, we use two examples to demonstrate how to create Get a Fabric.Image from a URL string using FabricJS.
The above is the detailed content of How to create an instance of Fabric.Image from a URL string using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!