Maison > Article > interface Web > Comment trouver la taille originale d'une image à l'aide de FabricJS ?
Dans ce tutoriel, nous apprendrons comment trouver la taille originale d'une 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 telles que l'angle, l'opacité, etc. Pour retrouver la taille originale de l'image, nous utilisons la méthode getOriginalSize.
getOriginalSize(): Object
Dans cet exemple, nous avons utilisé la méthode getOriginalSize pour obtenir les valeurs de largeur et de hauteur de l'image. Ici, les valeurs de largeur et de hauteur renvoyées sont respectivement 311 et 82.
<!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 getOriginalSize method</h2> <p> You can open the console from dev tools to see that the logged output contains the height and width of the Image </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 getOriginalSize method console.log( "The original size of the Image object is: ", image.getOriginalSize() ); </script> </body> </html>
Regardons un exemple de code de la sortie enregistrée lorsque la méthode getOriginalSize est utilisée en conjonction avec l'attribut cropX. Ici, nous transmettons la valeur 50 à cropX. Par conséquent, notre objet Image sera recadré de 50 pixels dans la direction x par rapport à la taille de l'image d'origine. Cependant, lorsque nous utilisons la méthode getOriginalSize, nous renvoyons respectivement des valeurs de largeur et de hauteur de 311 et 82, ce qui prouve en outre que getOriginalSize ne renverra que l'image à la taille d'origine.
<!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 getOriginalSize method along with cropX property</h2> <p> You can open the console from dev tools to see that the original size of the image will be returned regardless of having applied image cropping in xdirection </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, cropX: 50, }); // Add it to the canvas canvas.add(image); // Using the getOriginalSize method console.log( "The original size of the Image object is: ", image.getOriginalSize() ); </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!