Fabric.js es una biblioteca de javascript que se utiliza para trabajar con lienzo. Image es una de las clases de fabric.js que se utiliza para crear instancias de imágenes. La propiedad borderScaleFactor de la imagen se utiliza para establecer la escala del borde de la imagen.
Enfoque: primero importe la biblioteca fabric.js. Después de importar la biblioteca, cree un bloque de lienzo en la etiqueta del cuerpo que contendrá la imagen. Después de esto, inicialice una instancia de Canvas y la clase de imagen proporcionada por Fabric.JS y configure la escala del borde de la imagen usando la propiedad borderScaleFactor del objeto de imagen.
Sintaxis:
fabric.Image(image, {
borderScaleFactor: Number
});
Parámetros: La función anterior toma dos parámetros como se mencionó anteriormente y se describe a continuación:
- image: Este parámetro toma la imagen.
- borderScaleFactor: Establece la escala del borde de la imagen.
Ejemplo 1: El ejemplo dado a continuación usa Fabric.JS para establecer la escala del borde de la imagen del lienzo como se muestra en el ejemplo dado a continuación.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the FabricJS library -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
</script>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<b>Fabric.js | Image borderScaleFactor Property </b>
<canvas id="canvas" width="400" height="300"
style="border:2px solid #000000">
</canvas>
<img src =
"https://media.geeksforgeeks.org/wp-content/uploads/20200327230544/g4gicon.png"
width="100" height="100" id="my-image">
<script>
// Create the instance of canvas object
var canvas = new fabric.Canvas("canvas");
var img= document.getElementById('my-image');
var imgInstance = new fabric.Image(img, {
borderScaleFactor: 50
});
canvas.add(imgInstance);
</script>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<!-- Adding the FabricJS library -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
</script>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<b>Fabric.js | Image borderScaleFactor Property </b>
<canvas id="canvas" width="300" height="250"
style="border:2px solid #000000">
</canvas>
<img src =
"https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-1.png"
width="100" height="100" id="my-image"
style="display:none">
<br>
<button onclick="func()">Clickme</button>
<script>
// Create the instance of canvas object
var canvas = new fabric.Canvas("canvas");
var img= document.getElementById('my-image');
var imgInstance = new fabric.Image(img, {
borderScaleFactor: 2
});
canvas.add(imgInstance);
func=()=>{
var imgInstance = new fabric.Image(img, {
borderScaleFactor: 20
});
canvas.clear();
canvas.add(imgInstance);
}
</script>
</body>
</html>
Producción:
