Explicación detallada del intercambio de carteles de WeChat en lienzo html5 (pozo de escalada personal)

Este artículo presenta el intercambio de carteles de WeChat en lienzo y lo comparte con todos. Los detalles son los siguientes:

1. Generar aleatoriamente una imagen.
2. Obtenga el avatar y el nombre del usuario de WeChat (ajuste la interfaz de backend para obtenerlo)
3. Combine el avatar y el título del usuario con una imagen generada aleatoriamente en un póster.
4. Quizás el usuario de la página anterior también completó el texto del deseo que también debe completarse en la imagen.

1. El lienzo no es válido cuando se presiona prolongadamente en el navegador WeChat y no se puede compartir como img (luego lo convertiré a img)
2. Después de convertirlo a img, se puede mostrar en las herramientas de desarrollo de WeChat, pero no funcionará en el dispositivo real (quiero llorar pero sin lágrimas, dijo que la imagen puede ser de dominio cruzado ^-^).
3. La síntesis del avatar del usuario también requiere esquinas redondeadas. Dije que no, así que solo miré la documentación de la API del lienzo. No me gusta Du Niang.
4. Si el texto en el lienzo excede el ancho especificado, debe ajustarse. Solo conozco los distintos métodos de alineación de texto que no exceden el ancho especificado ctx.textAlign = 'center';
5. El problema de que el lienzo se vea borroso en una pantalla de alta definición (es súper simple, no sé por qué Du Niang es tan detallado) no es canvas.witdt=innerWidth*devicePixelRatio

 <div class=imgBox v-cloak> <img :src='imgSrc' v-if=imgSrc /></div>

CSS

 <estilo> *{ margen:0; relleno:0 } cuerpo, html {ancho: 100%; alto: 100%;} .imgBox {ancho: 100%; mostrar: bloque; }</estilo>

guion

 // estructura principal js new Vue({ el:'imgBox', data:{ urlParam: {},//Obtiene el objeto de valor en la URL randomNum: 1,//El número aleatorio se utiliza para determinar qué página de bendición nombre de usuario: '' ,//Nombre de usuario imgSrc: '',//Imagen final sintetizada userImg: '',//Imagen de avatar de usuario userMessage: '',//Mensaje de usuario}, métodos: { // Compartir con amigos wxShareFriends: function () {}, // Encabezado de solicitud de inicialización wxHttp: function () { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name=csrf-token ]' ).attr('content') } } }, // Obtener números aleatorios [1,10] randomNumbers() { this.randomNum = Math.ceil(Math.random() * 10) }, // Obtiene el avatar y el título del usuario de WeChat y las palabras de bendición del usuario getUserInfo() { var vm = this $.post('Dirección de solicitud de API' , función (datos) { if (data.code == 1) { vm.userImg = data.data.headimg vm.userName = data.data.nickname; (vm.randomNum % 2 == 0) { vm.userMessage= 'Cuando nos encontramos en el mundo de los mortales, somos viejos. El tiempo que nos encontramos es algo sutil y sagrado.' else { vm.userMessage = 'Nos encontramos en el mundo de los mortales, somos viejos' } } vm.$nextTick(function () { vm.drawCanvasBgImg(); }) }) }, // Obtener el dpr y el ancho de la página getWindowInfo() { var windowInfo = {}; windowInfo.dpr = window.devicePixelRatio; if (window.innerWidth) { windowInfo.width = window.innerWidth } else { windowInfo. ancho = document.body.clientWidth; } return windowInfo }, // Dibuja una imagen de fondo grande para compartir en la página de actividad drawCanvasBgImg () {}, // Corta un círculo en el lienzo de la imagen de fondo y rellénalo con el avatar del usuario drawCanvasUserImg(canvas, ctx, dpr) {}, // Rellena en el nombre de usuario o mensaje de usuario canvasFillText (canvas, ctx, dpr, círculoR) {}, // Sintetizar imagen compartida de base64 bits convertCanvasToImage (canvas) { this.imgSrc = canvas.toDataURL(image/jpeg);//png es venenoso y el código QR no se puede reconocer en Android y no se puede redirigir this.$Spin.hide();

1. dibujarCanvasBgImg()
2. dibujarCanvasUserImg (lienzo, ctx, dpr)
3. canvasFillText (lienzo, ctx, dpr, círculoR)
4. convertirCanvasToImage(lienzo)

 // Después de obtener los datos, comience a dibujar la imagen de fondo. La idea es muy simple: dibuje la imagen en el lienzo, luego dibuje el texto del avatar en el lienzo y conviértalo a img drawCanvasBgImg () { var vm = this; = document.createElement( canvas); var ctx = canvas.getContext(2d); var clientWidth = this.getWindowInfo().width;//Obtener el ancho de pantalla para la var de pantalla móvil adaptable al ancho del lienzo; dpr = this.getWindowInfo().dpr; ctx.globalCompositeOperation = source-atop;//** El alias parece inútil, no sé si se usa en el lugar equivocado** canvas.width = dpr * clientWidth; // Debido a la pantalla del teléfono móvil, cuando se usa una pantalla retina, se representará varias veces. Use dpr para establecer dinámicamente el ancho y el alto del lienzo para evitar imágenes borrosas. canvas.height = dpr * clientWidth * 609 /. 375;// Eliminar la barra de estado en el encabezado de WeChat debería ser 603. No entiendo que 603 todavía no puede llenar la pantalla con imágenes, así que lo agregué a 609. var img = new Image(); crossOrigin = '';// La imagen del pozo muerto cruza el dominio (img.crossOrigin = Anonymous todavía no puede mostrar imágenes en formato base64) img.src = http://xxx + this.randomNum + .jpg; img.onload = function () { ctx.drawImage(img, 0, 0, canvas.width, canvas.height); vm.drawCanvasUserImg(canvas, ctx, dpr);

 //Corta un círculo en el lienzo de la imagen de fondo y rellénalo con el avatar del usuario drawCanvasUserImg: function (canvas, ctx, dpr) { var vm = this; var circuloR = 50 * dpr; //Radio var circuloX = lienzo. ancho / 2 ;// Coordenada X del centro del círculo var círculoY = 50 * dpr;// Coordenada Y del centro del círculo var imgX = círculoX - círculoR;//Coordenada inicial de la imagen X var imgY = circuloY - circuloR;//La coordenada inicial de la imagen Y var imgWidth = 2 * circuloR;//El tamaño de la imagen se ajusta según el círculo var img = new Image(); img.crossOrigin = ''; = this.userImg; img .onload = function () { ctx.save(); // Guarda el estado actual de ctx ctx.arc(circleX, círculoY, círculoR, 0, 2 * Math.PI); //Dibuja un círculo ctx.clip(); //Recorta el círculo de arriba ctx.drawImage(img, imgX, imgY, imgWidth, imgWidth); //Dibuja en el círculo recién recortado ctx.restore () ; //Restaurar estado vm.canvasFillText(canvas, ctx, dpr, círculoR }},

 // Complete el nombre de usuario o el mensaje de usuario canvasFillText (canvas, ctx, dpr, círculoR) { var fontSizeThis = dpr * 20 + 'px' + ' Arial'; var userNameY = 0; userMessageX = dpr * 40; // Coordenada del eje X del mensaje del usuario var userMessageY = 0 // Coordenada del eje Y del mensaje del usuario var lastSubStrIndex = 0;//Subíndice de cadena var lineWidth = 0;//Ancho de una línea var allTextWidth = 0;//Ancho de todos los caracteres ctx.font = fontSizeThis // Se requiere el nombre de usuario para escribir el nombre de usuario if (this.userName) { nombre de usuarioY = círculoR * 2.5; ctx.fillStyle = #0094ff; ctx.textAlign = 'ctx.fillText(this.userName, canvas.width / 2, userNameY); } if (this.userMessage) { userMessageY = userNameY + dpr * 35; ctx.fillStyle = #000; longitud; i++) { allTextWidth += ctx.measureText(this.userMessage[i]).width } // Si la longitud de la cadena es más larga que el área del lienzo, ajuste la línea if (allTextWidth > canvas.width - 2* userMessageX) { for (var i = 0; i < this.userMessage.length; i++) { lineWidth += ctx. medirTexto(this.userMessage[ i]).width; if (lineWidth > canvas.width - 2*userMessageX) { ctx.textAlign = 'izquierda'; ctx.fillText(this.userMessage.substring(lastSubStrIndex, i), userMessageX, userMessageY); userMessageY += dpr * 25;// Establecer la altura de la línea lineWidth = 0; lastSubStrIndex = i } if (i == this.userMessage. longitud - 1) { ctx.fillText(this.userMessage.substring(lastSubStrIndex, i + 1), mensaje de usuario },

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.