Hoy en día, hay muchas actividades de operación de cuentas públicas de WeChat y es necesario generar imágenes. Una vez generadas, se pueden enviar a amigos y circular en Momentos, lo que favorece la promoción del producto.
1. Puedes usar canvas para generar imágenes, pero como ya existe una biblioteca de código abierto llamada html2canvas, no la escribí yo mismo para ahorrar tiempo.
dirección de github: html2canvas
Deja de divagar, ¡veamos las cosas primero! ! !
Demostración en vivo
/** * Obtener la proporción de píxeles basada en window.devicePixelRatio*/ function DPR() { if (window.devicePixelRatio && window.devicePixelRatio > 1) { return window.devicePixelRatio } return } /** * Convertir el entrante; el valor es un número entero*/ function parseValue(valor) { return parseInt(valor, 10 } /** *; Draw canvas */ async function drawCanvas (selector) { // Obtenga el nodo DOM que desea convertir const dom = document.querySelector(selector); const box = window.getComputedStyle(dom); Nodo DOM const width = parseValue(box.width); const height = parseValue(box.height); // Obtener la proporción de píxeles const scaleBy = DPR(); Cree un elemento de lienzo personalizado var canvas = document.createElement('canvas'); // Establezca el ancho y alto del atributo del elemento de lienzo en el ancho y alto del nodo DOM * proporción de píxeles canvas.width = ancho * scaleBy; scaleBy; // Establece el ancho y alto del CSS del lienzo al ancho y alto del nodo DOM canvas.style.width = `${width}px`; `${height}px`; // Obtener el pincel const context = canvas.getContext('2d'); // Ampliar todo el contenido del dibujo por proporción de píxeles context.scale(scaleBy, scaleBy); = altura; retorno await html2canvas(dom, {canvas}).then(function () { convertCanvasToImage(canvas, x,y) }) } /** * Convertir imagen a formato base64*/ function convertCanvasToImage(canvas, x, y) { let image = new Image(); let _container = document.getElementsByClassName('container')[0]; ) [0]; imagen.ancho = x; imagen.altura = y; canvas.toDataURL(imagen/png); _body.removeChild(_container); document.body.appendChild(imagen);2. Dado que todos los teléfonos móviles actuales tienen pantallas de alta definición, aparecerá desenfoque si no realiza ningún procesamiento. ¿Por qué se produce el desenfoque? Esto implica la proporción de píxeles del dispositivo. devicePixelRatio js proporciona window.devicePixelRatio para obtener la proporción de píxeles del dispositivo.
función DPR() { if (window.devicePixelRatio && window.devicePixelRatio > 1) { return window.devicePixelRatio } return }Esta función DPR es para obtener la proporción de píxeles del dispositivo. Entonces, ¿qué debemos hacer después de obtener la proporción de píxeles?
var canvas = document.createElement('canvas'); // Establece el ancho y alto del atributo del elemento lienzo en ancho y alto del nodo DOM * proporción de píxeles canvas.width = ancho * scaleBy; canvas El ancho y alto de CSS son el ancho y alto del nodo DOM canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; Obtener el pincel const context = canvas.getContext('2d'); // Ampliar todo el contenido del dibujo por proporción de píxeles context.scale(scaleBy, scaleBy);3. Después de obtener la proporción de píxeles del dispositivo, multiplique canvas.width y canvas.height por la proporción de píxeles del dispositivo, que en este momento es scaleBy, configure canvas.style.width y canvas.style.height al ancho y alto del; dom. Piénsalo, ¿por qué escribes esto? Finalmente, al dibujar, el contenido dibujado se amplía según la proporción de píxeles.
Por ejemplo, el ancho y el alto del dispositivo iPhone 6S son 375 Entonces, si lo dibujas uno a uno, aparecerá borroso en una pantalla de alta definición. Solo mira la imagen y cuenta la historia.
6más RPD=3
4. Finalmente, llame a canvas.toDataURL(image/png); asigne el valor a image.src. Dado que las imágenes no se pueden guardar en WeChat, solo puede generar archivos de imágenes y llamar a la función de pulsación larga de WeChat para guardar imágenes en álbumes. como se muestra en la figura:
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.