En este artículo, vamos a ver cómo crear una imagen similar a un lienzo en JavaScript. La imagen similar a un lienzo significa que la imagen se puede mover y se puede cambiar de tamaño según los requisitos.
Enfoque: para que esto sea posible, vamos a utilizar una biblioteca de JavaScript llamada FabricJS. Después de importar la biblioteca, crearemos un bloque de lienzo en la etiqueta del cuerpo que contendrá nuestra imagen. Además, crearemos un elemento img que contenga la imagen que se agregará dentro del lienzo y configuraremos el atributo de estilo para mostrar: ninguno; porque no queremos que la imagen sea visible fuera del lienzo. Después de esto, inicializaremos las instancias de Canvas e Image proporcionadas por FabricJS y representaremos la imagen en el lienzo como se muestra en el ejemplo a continuación.
Sintaxis:
fabric.Image( image_element );
Ejemplo: este ejemplo usa FabricJS para crear una imagen de lienzo editable simple.
html
<!DOCTYPE html>
<html>
<head>
<title>
How to create a canvas-type
image with JavaScript?
</title>
<!-- Loading the FabricJS library -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
</script>
</head>
<body>
<canvas id="canvas" width="600" height="200"
style="border:1px solid #000000">
</canvas>
<!-- Add the image to be used in the canvas
and hide it here because only need it
inside the canvas -->
<img style="display: none;" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200327230544/g4gicon.png"
id="my-image" alt="">
<script>
// Initiate a Canvas instance
var canvas = new fabric.Canvas("canvas");
// Get the image element
var image = document.getElementById('my-image');
// Initiate a Fabric instance
var fabricImage = new fabric.Image(image);
// Add the image to canvas
canvas.add(fabricImage);
</script>
</body>
</html>
Producción:
