Zeew-Canvas

Zeew-Canvas es un módulo de manipulación de imágenes para crear imágenes a tu antojo de forma mucho más fácil y ordenada a la vista comprensible por cualquier desarrollador que quiera introducirse en la manipulación de imágenes pudiendo crear cosas variadas de formas más sencilla

Instalación y uso

Zeew-Canvas es una rama del paquete de Zeew. Puedes instalarlo desde tu consola con la consola (teniendo previamente instalado NPM) con el comando npm i zeew-canvas

Algunas de las funciones incluidas en el paquete funcionan de forma asyncrona por lo que debes de tener encuenta el uso de async/await

Estructura

const Zeew = require('zeew-canvas')
const myImage = new Zeew(800, 800)//creamos nuestro lienzo de 800 por 800 píxeles
let filter = {}//los filtros que pongamos a las imágenes deben de ir dentro de un objeto

//Recuerda que va por capas, asi que no tapas una capa con otra si no es tu intención

await myImage.setBackground({imagen: './path/to/image.jpg', filter: filter})//añadimos un fondo y añadimos filtros (sin filtros puesto que no agregamos filtros dentro del objeto)

await myImage.addImage('https.example.com/picture.jpg', 125, 125)//colocamos la imágen en una posición

filter.rotate = 90//añadimos al filtro la propiedad rotate que hace rotar las imágenes. Los valores deben de expresarse en grados

await myImage.addImage('zeew/is/the/best/zeew-chan.png', 500, 500, {width: 100, height: 100, filter: filter})//le añadimos una imagen que esta en una posicion determinado y le ponemos una medidas y rotamos con los filtros 90 grados la imagen

myImage.addText('Zeew-Chan', 90, 90, {size: 50, color: '#000000'})//añadimos un poco de texto de color negro y con un tamañao de 50 píxeles en unas determinadas coordenadas.

myImage.addText('Zeew API | Best comunity', 800, 800, {size: 100, font: 'Fantasy', color: '#0000FF', rotate: 360})//añadimos texto rotado con color azul y con una de las fuentes registradas en nuestro ordenador en unas determinadas coordenadas del lienzo!

myImage.getImage()// => obtenemos un buffer

Funciones

Constructor

Crea un lienzo de forma sencilla 😋

Propiedades
height	Agrega el largo del lienzo sobre el que vas a trabajar
width	Agrega el ancho del lienzo sobre el que vas a trabajar

Ejemplo:

const Zeew = require('zeew-canvas')
let image = new Zeew(900, 900)//new Zeew(width, height)
let filter = {}

.setBackground()

Agrega un fondo siendo una imagen o un color sólido 🥴

Propiedades
Archivo/URL/Color	Añade un color hexadecimal, una URL o color solido como fondo. Está entre llaves: {imagen: URL/PATH} - {color: '#ffffff'}
filter	Añade un filtro. Esta propiedad está dentro de las opciones opcionales. Está entre llaves: {filter: filtros}

Ejemplo

//color
await image.setBackground({color: '#0000FF', filter: filter})

//path
filter = {rotate: 360}
await image.setBackground({imagen: 'archive.png', filter: filter})

//url
await image.setBackground({imagen: 'https://example.com/picture.png'})

.addImage()

Agrega imagenes sin límite 🤓

Propiedades
Archivo/URL	Añade la imagen desde una ruta de archivo o URL válida
X	Añade la coordenada X para colocar la imagen
Y	Añade la coordenada Y para colocar la imagen
width	Fija el ancho de tu imagen. Esta propiedad debe estar expresada dentro de un objeto ({})
height	Fija el alto de tu imagen. Esta propiedad debe estar expresada dentro de un objeto ({})
filter	Añade un filtro. Esta propiedad está dentro de las opciones opcionales. Está entre llaves: {filter: filtros}

Ejemplo:

await image.addImage('https://example.com/picture.png', 450, 200, {width: 100, height: 100})//añadimos una imagen!
await image.addImage('picture.jpg', 200, 200, {filter: filter})//añadimos una imagen y la rotamos 360 grados

.addText()

Agrega texto al lienzo de forma sencilla 🔤

Propiedades
Texto	Añade el texto que quieras añadirle a la imagen
X	Añade la coordenada X para colocar tu texto
Y	Añade la coordenada Y para colocar tu texto
size	Da un tamaño de fuente a tu texto. Esta propiedad está dentro de las opciones opcionales. Está entre llaves: {size: number}
color	Da un color a tu texto. Esta propiedad está dentro de las opciones opcionales. Está entre llaves: {color: hexadecimal}
font	Escoge entre las fuentes instaldas en tu pc una fuente para tu texto. Esta propiedad está dentro de las opciones opcionales. Está entre llaves: {font: string}
rotate	Rota el texto en grados 😎. Esta propiedad está dentro de las opciones opcionales. Está entre llaves: {rotate: number}

Ejemplo:

image.addText('Hi!', 90, 90, {size: 90, font: 'Fantasy', color: '#FF0000', rotate: 90})//agregamos un texto en determinadas coordenadas del lienzo con tamaño 90, fuente "Fantasy", color rojo y una rotación de 90 grados.

.getImage()

Obtén el buffer de tu imagen 🚀.

Ejemplo:

image.getImage()// => buffer

Filtros

Los filtros son una propiedad ({filter}) que está solamente disponible en <img>.setBackground() y <img>.addImage().

Propiedades
rotate (deg)	Gira la imagen en grados

Ejemplo simple:

 const mycard = new Cards(1200, 800)
  let filter = {}

  await mycard.setBackground({color: '#FCE8AB', filter: filter})
  await mycard.addImage('./path/to/zeew.png', 400, 200, {width: 800, height: 600, filter: filter})
  mycard.addText('Zeew API', 925, 80, {size: 60, color: '#000000'})
  mycard.addText('Un rincón de aprendizaje', -20, 100, {size: 80, font: 'Fantasy', color: '#000000', rotate: 90})