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 backgroundColor de la imagen se usa para establecer el color de fondo 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 el color de fondo de la imagen usando la propiedad backgroundColor del objeto de imagen.
Sintaxis:
fabric.Image(image, {
backgroundColor:"string"
});
Parámetros: La función anterior toma dos parámetros como se mencionó anteriormente y se describe a continuación:
- imagen: este parámetro contiene la imagen.
- backgroundColor: Esto establece el color de fondo de la imagen.
Ejemplo 1: este ejemplo usa FabricJS para establecer el color de fondo de la imagen del lienzo como se muestra en el ejemplo 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 backgroundColor 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, {
opacity:0.8,
backgroundColor:"yellow"
});
canvas.add(imgInstance);
</script>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!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 backgroundColor 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="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, {
});
canvas.add(imgInstance);
func=()=>{
// 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.4,
backgroundColor:"green"
});
canvas.clear();
canvas.add(imgInstance);
}
</script>
</body>
</html>
¿Escribir código en un comentario? Utilice ide.geeksforgeeks.org , genere un enlace y compártalo aquí.