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 de opacidad de la imagen se utiliza para establecer la visibilidad de la imagen.
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 imagen proporcionada por FabricJS y configure la opacidad de la imagen del lienzo usando la propiedad Opacity del objeto de imagen.
Sintaxis:
fabric.Image(image, {
opacity: 0.40
});
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.
- opacidad: Establece la opacidad de la imagen.
Ejemplo 1: este ejemplo usa FabricJS para establecer la opacidad de las imágenes del lienzo como se muestra en el siguiente ejemplo.
<!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 opacity 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="50" height="50" 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, {
opacity: 0.40
});
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 opacity Property </b>
<canvas id="canvas" width="300" height="200"
style="border:2px solid #000000">
</canvas>
<img src =
"https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-1.png"
width="50" height="50" 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, {
opacity: 1
});
let func=()=>{
var imgInstance = new fabric.Image(img, {
opacity: 0.40
});
canvas.clear();
canvas.add(imgInstance);
}
canvas.add(imgInstance);
</script>
</body>
</html>
Producción:
