El lienzo recién agregado de Html5 es una función poderosa. Se estima que todos lo usan todos los días, pero la frecuencia no es alta. Ocasionalmente, se usa para sintetizar imágenes. desordenado, por lo que el dibujo de lienzo de uso común, el dibujo de texto, la función de guardar se ha encapsulado y actualmente estoy bastante satisfecho con ella. Puede completar rápidamente las tareas de dibujo de lienzo y responder con calma a los cambios en los requisitos.
li-canvas.jsLa función de lienzo de Html5 está encapsulada para facilitar funciones como dibujo de una sola imagen, dibujo de varias imágenes, dibujo de imágenes con esquinas redondeadas, dibujo de texto de varias líneas, ajuste automático de líneas, guardado y descarga de imágenes, etc.
Dirección de Github: github.com/501351981/l…
Funciones principales•Dibujo de imágenes: dibujo de una sola imagen/múltiples imágenes, dibujo de imágenes con esquinas redondeadas. •Dibujo de texto: dibujo de texto de varios párrafos, ajuste automático de líneas. •Guardado de imágenes: obtención de datos de imágenes, descarga de imágenes al local y compatibilidad con nombres de imágenes descargadas personalizadas. .
instalación npm# npm install npm install --save li-canvascotización directa
Importe archivos js directamente a html.
<script src=dist/li-canvas.js></script>como usar Crear una instancia
Cuando use li-canvas, primero debe crear una instancia del objeto, new LiCanvas(canvas_id,options), pasar la identificación del lienzo, las opciones son opcionales, puede configurar el fondo del lienzo y el estilo de texto predeterminado, etc.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180></canvas><script> var canvas= nuevo LiCanvas('prueba') </script></body> ... dibujo de imagen• Haz un solo dibujo
Llame a addDrawImageTask (imagen), donde la imagen del parámetro es un objeto, incluido
src: dirección URL de la imagen
x: la coordenada x de la esquina superior izquierda de la imagen en el lienzo
y: la coordenada y de la esquina superior izquierda de la imagen en el lienzo
ancho: ancho del dibujo de la imagen
altura: altura del dibujo de la imagen
borderRadius: radio de la esquina de la imagen
Cuando se llama a addDrawImageTask (imagen), la imagen no se dibuja inmediatamente, pero se agrega una tarea de dibujo. La tarea de dibujo solo se ejecuta cuando se llama a draw (devolución de llamada), y la función de devolución de llamada se llama cuando se completa la ejecución.
¿Por qué hacer esto? Debido a que la imagen debe descargarse primero al dibujar, esta es una operación asincrónica, por lo que primero se agrega a la lista de tareas, y cuando se llama a draw(), se ejecuta en el orden en que se agregan las tareas.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px rojo sólido></canvas><img src=./bg.jpg id=img width=0 height=0><script> var bg={ src:document.getElementById('img').src,//o la dirección URL de la imagen x:0,//coordenada x de la esquina superior izquierda y:0,//coordenada y de la esquina superior izquierda ancho de esquina:1563,/ /Ancho y alto del dibujo de la imagen:1180,//Alto del dibujo de la imagen borderRadius:0 //Radio de la esquina de la imagen} var canvas=new LiCanvas('test') canvas.addDrawImageTask(bg) //Agrega una tarea de dibujo y el dibujo no se realiza inmediatamente canvas.draw(()=>{ console.log(dibujo completado) }) </script></body> ...•Dibujar múltiples gráficos
Puede llamar a addDrawImageTask(image) varias veces seguidas o puede pasar una serie de imágenes.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px rojo sólido></canvas><script> var img1={ src:http://*****.com/***.png, x:0, y:0, ancho:1563, alto:1180, borderRadius:0 } var img2={ src:http://*****.com/***.png, x:0, y:0, ancho: 1563, altura: 1180, borderRadius:0 } var imgs=[ { src:http://*****.com/***.png, x:0, y:0, ancho:100, alto:100, borderRadius:0 }, { src:http://******.com/***.png, x:0, y:0, ancho:100, alto:100, borderRadius:0 } ] var lienzo=nuevo LiCanvas('prueba') lienzo.addDrawImageTask(img1) lienzo.addDrawImageTask(img2) // Múltiples llamadas para lograr un dibujo de múltiples imágenes canvas.addDrawImageTask(imgs) // El dibujo de múltiples imágenes también se puede lograr pasando directamente una matriz canvas.draw(()=>{ console.log(dibujo completado) }) </script> </body>...•Dibujar imágenes redondeadas o circulares.
Simplemente configure borderRadius
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px rojo sólido></canvas><script> var img1={ src:http://*****.com/***.png, x:0, y:0, ancho:100, alto:100, borderRadius:50 //Establece el radio de filete Cuando el radio de filete es la mitad de la longitud del lado del cuadrado, es un círculo} var canvas=new LiCanvas('test') lienzo .addDrawImageTask(img1) lienzo.draw(()=>{ console.log(dibujo completado) }) </script></body> ... Dibujar texto•Dibujar un texto
Llamar addDrawTextTask(text,style)
texto: texto a dibujar
estilo: estilo de texto, incluido x: coordenada x de la esquina superior izquierda de la posición inicial del dibujo del texto
y: la coordenada y de la esquina superior izquierda de la posición real del dibujo del texto
Ancho: el ancho de una línea de texto si excede el ancho, se ajustará automáticamente.
fontSize: tamaño del texto, número entero, la unidad es px
fontWeight: grosor del texto negrita, más negrita, etc. o 400, 500, 600... igual que css font-weight
fontFamily: fuente de texto, igual que css
lineHeight: altura de línea, número entero, unidad px
color: color
marginBottom: si hay varios párrafos de texto, también puede especificar la distancia entre párrafos
El dibujo de texto también es asincrónico. En realidad, no se dibuja hasta que se llama a draw (devolución de llamada).
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px rojo sólido></canvas><script> var canvas=new LiCanvas('test') canvas.addDrawTextTask(texto a dibujar, { x:110, y:496, ancho:1340, tamaño de fuente:54, peso de fuente:'bolder', familia de fuentes:PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, altura de línea:70, color:'#1a1a1a', margenInferior:40 }) canvas.draw(()=>{ console.log(dibujo completado) }) </script></body> ...•Dibujar varios párrafos de texto.
Método 1: llamar repetidamente a addDrawTextTask (texto, estilo), igual que arriba
Método 2: el texto se puede pasar en una matriz y el estilo se puede compartir
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px rojo sólido></canvas><script> var canvas=new LiCanvas('prueba') canvas.addDrawTextTask([Párrafo de texto que se dibujará 1, Párrafo de texto que se dibujará 2],{ x:110, y:496, ancho:1340, fontSize:54, fontWeight:'bolder', fontFamily:PingFangSC-Regular,' Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, altura de línea:70, color:'#1a1a1a', marginBottom:40 }) canvas.draw(()=>{ console.log(dibujo completado) }) </script></body> ...El estilo también puede pasar un valor predeterminado cuando se crea una instancia del objeto para evitar establecer repetidamente algunos estilos compartidos.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px rojo sólido></canvas><script> var canvas=new LiCanvas('test',{ fontStyle:{ fontSize:20, fontFamily:PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, color:'#1a1a1a', marginBottom:40 } }) canvas.addDrawTextTask (párrafo de texto a dibujar 1,{ x:110, y:496, ancho:1340, }) canvas.addDrawTextTask(Párrafo de texto que se dibujará 2,{ x:110, y:696, ancho:1340, }) canvas.draw(()=>{ console.log(dibujo completado) }) </script></ cuerpo>...Si hay un párrafo de texto en varios párrafos que debe configurarse en diferentes estilos, también puede especificar el estilo por separado, de la siguiente manera, ¿es muy flexible?
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px rojo sólido></canvas><script> var canvas=new LiCanvas('test',{ fontStyle:{ fontSize:20, fontFamily:PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, color:'#1a1a1a', marginBottom:40 } }) canvas.addDrawTextTask([{ text:To Texto de párrafo dibujado 1, tamaño de fuente: 60 }, texto del párrafo 2 que se dibujará, texto del párrafo 3 que se dibujará],{ x:110, y:496, ancho:1340, }) canvas.draw(()=>{ console.log(dibujo completado) }) </script></body>...Guardar imagen de descarga
•Descargar imágenes
Descargar como imagen png: saveToPng(nombre de archivo)
Descargar como imagen jpeg: saveToJpeg(nombre de archivo)
Descargar como imagen gif: saveToGif (nombre del archivo)
Nota: La descarga de imágenes debe realizarse en la función de devolución de llamada de draw() para que tenga efecto.
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px rojo sólido></canvas><script> var bg={ src:http://***.jpg, x:0, y:0, ancho: 1563, alto: 1180, borderRadius: 0 } var canvas=new LiCanvas('test') canvas.addDrawImageTask(bg) canvas.draw(()=>{ canvas.saveToPng(li-canvas) }) </script >>cuerpo>...•Obtener datos de imagen
A veces, no queremos descargar la imagen. Por ejemplo, en el navegador WeChat, en realidad queremos que el usuario mantenga presionada la imagen para guardarla. En este momento, queremos que los datos de la imagen sintetizados por el lienzo se inserten. el origen de img.
Llame a: getImageData() para obtener los datos de la imagen sintetizada
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px rojo sólido></canvas><img src=./bg.jpg id=img ><script> var bg={ src:http://***.jpg, x:0, y:0, ancho:1563, alto:1180, borderRadius:0 } var canvas=new LiCanvas('test') canvas.addDrawImageTask(bg) lienzo. dibujar(()=>{ var src=canvas.getImageData() document.getElementById('img').src=src }) </script></body>...Dirección de Github: github.com/501351981/l…
ResumirLo anterior es lo que le presenta el editor, cómo realizar fácilmente dibujos de una sola imagen, varias imágenes, imágenes con esquinas redondeadas, texto de una sola línea, texto de varias líneas, etc. en HTML5 a través de li-canvas. Espero que sea útil. Para usted. Si tiene alguna pregunta, déjeme un mensaje y le responderé a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!