Maison > Article > interface Web > Comment créer une instance de Fabric.Image à partir d'une chaîne URL à l'aide de FabricJS ?
Comment créer une instance de Fabric.Image à partir d'une chaîne URL à l'aide de FabricJS ?
- PHPzavant
- 2023-08-24 14:09:111798parcourir
Dans ce tutoriel, nous apprendrons comment partir de Chaîne d'URL utilisant FabricJS. Nous pouvons créer un objet Image en créant une instance Tissu.Image. Puisqu’il s’agit d’un des éléments de base de FabricJS, on peut aussi facilement Personnalisez-le en appliquant des propriétés telles que l'angle, l'opacité, etc. afin de créer Fabric.Image à partir d'une chaîne d'URL, nous utilisons la méthode fromURL.
Grammaire
fromURL(url: String, callback: function, imgOptions: Object)
Paramètres
url - Ce paramètre accepte une chaîne représentant l'URL à partir de laquelle l'image a été créée.
rappel (facultatif) - Ce paramètre est une fonction qui est appelée immédiatement après la création de l'image. Pour cette fonction, l'image nouvellement créée est passée comme premier paramètre. Le deuxième paramètre est une valeur booléenne indiquant si une erreur s'est produite. Ce paramètre est facultatif.
imgOptions (facultatif) - Ce paramètre est un objet facultatif qui fournit une personnalisation supplémentaire à notre image. Utilisez ce paramètre pour modifier l'origine, la largeur du trait et de nombreuses autres propriétés associées à l'objet image.
Ne pas utiliser la méthode fromURL
Exemple
Regardons un exemple de code pour voir comment un objet Image est affiché lors de l'utilisation de la méthode fromURL Non utilisé. Dans ce cas, il nous suffit de créer une instance de fabric.Image et de l'ajouter à notre toile.
<!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>
Utilisez la méthode fromURL
Exemple
Dans cet exemple, nous avons utilisé la méthode fromURL pour démontrer que nous pouvons créer Même si nous n’avons pas d’élément image, c’est un objet image. Dans ce cas, nous avons juste besoin Nécessite l'URL de l'image et transmet la fonction de rappel créée fabric.Image objet comme premier paramètre, puis ajoutez-le au canevas.
<!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>
Conclusion
Dans ce tutoriel, nous utilisons deux exemples pour montrer comment créer Obtenez un Fabric.Image à partir d'une chaîne d'URL à l'aide de FabricJS.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!