Maison > Article > interface Web > Comment obtenir le code source d’une image en utilisant FabricJS ?
Comment obtenir le code source d’une image en utilisant FabricJS ?
- 王林avant
- 2023-08-22 12:17:021264parcourir
Dans ce tutoriel, nous allons apprendre comment obtenir la source de l'image à l'aide de FabricJS. Nous pouvons créer un objet Image en créant une instance de fabric.Image. Puisqu'il s'agit de l'un des éléments de base de FabricJS, nous pouvons également le personnaliser facilement en appliquant des propriétés comme l'angle, l'opacité, etc. Afin de trouver la source d'une image, nous utilisons la méthode getSrc.
Syntaxe
getSrc(filtered: Boolean): String
Paramètres
filtered − Ce paramètre est une valeur Boolean qui indique si la source est nécessaire pour svg ou non.
Utilisation de la méthode getSrc
Exemple
Dans cet exemple, nous avons utilisé la méthode getSrc pour obtenir la source originale de l'image. On peut voir dans la console qu'une représentation String de la source de l'image est renvoyée.
<!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 getSrc method</h2>
<p>
You can open the console from dev tools to see that the logged output contains the image source
</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="max-width:90%" / alt="Comment obtenir le code source d’une image en utilisant FabricJS ?" >
<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 getSrc method
console.log("The Source of the image is: ", image.getSrc(false));
</script>
</body>
</html>
Utilisation de la méthode getSrc avec la méthode fromURL
Exemple
Voyons un exemple de code de la sortie enregistrée lorsque la méthode getSrc est utilisée en conjonction avec la méthode 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 getSrc method along with fromURL method</h2>
<p>
You can open the console from dev tools to see that the logged output contains the image source
</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);
// Using getSrc method
console.log("The Source of the image is: ", Img.getSrc(false));
}
);
</script>
</body>
</html>
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!