Explicação detalhada do compartilhamento de pôster WeChat em tela HTML5 (poço de escalada pessoal)

Este artigo apresenta o compartilhamento de pôsteres do WeChat em tela e os compartilha com todos. Os detalhes são os seguintes:

1. Gere uma imagem aleatoriamente
2. Obtenha o avatar e o nome do usuário do WeChat (ajuste a interface de back-end para obtê-lo)
3. Combine o avatar e o título do usuário com uma imagem gerada aleatoriamente em um pôster
4. Talvez o usuário da página anterior também tenha preenchido o texto do desejo que também precisa ser preenchido na imagem.

1. O Canvas é inválido quando pressionado por muito tempo no navegador WeChat e não pode ser compartilhado como img (então irei convertê-lo para img)
2. Depois de convertê-lo para img, ele pode ser exibido nas ferramentas de desenvolvedor do WeChat, mas não funcionará no dispositivo real (quero chorar, mas sem lágrimas disse que a imagem pode ser de domínio cruzado ^-^).
3. A síntese do avatar do usuário também requer cantos arredondados. Eu disse não, então acabei de olhar a documentação da API do canvas. Não gosto de Du Niang.
4. Se o texto na tela exceder a largura especificada, ele deverá ser quebrado. Conheço apenas os vários métodos de alinhamento de texto que não excedem a largura especificada ctx.textAlign = 'center';
5. O problema da tela ficar borrada na tela de alta definição (é super simples, não sei por que Du Niang é tão detalhado) não é canvas.witdt=innerWidth*devicePixelRatio

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

CSS

 <estilo> *{ margem:0; preenchimento:0} corpo, html { largura: 100%; altura: 100%; exibir: bloco;

roteiro

 // estrutura principal do js new Vue({ el:'imgBox', data:{ urlParam: {},//Obtém o objeto de valor na url randomNum: 1,//O número aleatório é usado para determinar qual página de bênção userName: '' ,//Nome do usuário imgSrc: '',//Imagem final sintetizada userImg: '',//Imagem do avatar do usuário userMessage: '',//Mensagem do usuário}, métodos: { // Compartilhe com amigos wxShareFriends: function () {}, // Cabeçalho da solicitação de inicialização wxHttp: function () { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name=csrf-token ]' ).attr('content') } } }), // Obtenha números aleatórios [1,10] randomNumbers() { this.randomNum = Math.ceil(Math.random() * 10) }, // Obtenha o avatar e o título do usuário WeChat e as palavras de bênção do usuário getUserInfo() { var vm = this; , função (dados) { if (data.code == 1) { vm.userImg = data.data.headimg; (vm.randomNum % 2 == 0) { vm.userMessage= 'Quando nos encontramos no mundo dos mortais, ficamos velhos. O tempo passou. else { vm.userMessage = 'Encontre-se no mundo mortal, somos velhos' } } vm.$nextTick(function () { vm.drawCanvasBgImg(); }) }) }, // Obtenha o dpr e a largura da página getWindowInfo() { var windowInfo = {}; window.devicePixelRatio if (window.innerWidth) { windowInfo.width = window.innerWidth } else { windowInfo. largura = document.body.clientWidth } return windowInfo }, // Desenhe uma imagem de fundo grande para compartilhar na página de atividades drawCanvasBgImg () {}, // Corte um círculo na tela da imagem de fundo e preencha-o com o avatar do usuário drawCanvasUserImg(canvas, ctx, dpr) {}, // Preencher no nome de usuário ou na mensagem do usuário canvasFillText (canvas, ctx, dpr, circleR) {}, // Sintetizar imagem compartilhada base64 bits convertCanvasToImage (canvas) { this.imgSrc = canvas.toDataURL(image/jpeg);//png é venenoso e o código QR não pode ser reconhecido no Android e não pode ser redirecionado this.$Spin.hide();

1. drawCanvasBgImg()
2. drawCanvasUserImg (canvas, ctx, dpr)
3. canvasFillText (canvas, ctx, dpr, círculoR)
4. convertCanvasToImage(canvas)

 //Depois de obter os dados, comece a desenhar a imagem de fundo. A ideia é muito simples: desenhe a imagem no canvas, depois desenhe o texto do avatar no canvas e converta-o para img drawCanvasBgImg () { var vm = this; = document.createElement( canvas); //Obter a largura da tela para tela móvel adaptável à largura da tela var dpr = this.getWindowInfo().dpr; ctx.globalCompositeOperation = source-atop;//** O alias parece inútil, não sei se é usado no lugar errado** canvas.width = dpr * clientWidth; //Devido à tela do celular Ao usar uma tela retina, ela será renderizada várias vezes. Use dpr para definir dinamicamente a largura e a altura da tela para evitar imagens borradas. 375;//A remoção da barra de status no cabeçalho do WeChat deve ser 603. Não entendo que 603 ainda não consegue preencher a tela com imagens, então adicionei-a a 609. var img = new Image(); crossOrigin = '';//A imagem do poço morto cruza o Domínio (img.crossOrigin = Anonymous ainda não pode exibir imagens no formato base64) img.src = http://xxx + this.randomNum + .jpg; img.onload = function () {ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

 //Corta um círculo na tela da imagem de fundo e preenche-o com o avatar do usuário drawCanvasUserImg: function (canvas, ctx, dpr) { var vm = this; var circleR = 50 * dpr; largura / 2 ;//Coordenada X do centro do círculo var círculoY = 50 * dpr;//Coordenada Y do centro do círculo var imgX = círculoX - círculoR;//Coordenada inicial da imagem X var imgY = círculoY - círculoR;//A coordenada inicial da imagem Y var imgWidth = 2 * círculoR;//A imagem é dimensionada de acordo com o círculo var img = new Image(); = this.userImg; img .onload = function () { ctx.save(); // Salva o estado atual do ctx ctx.arc(circleX, CircleY, CircleR, 0, 2 * Math.PI); //Desenhe um círculo ctx.clip(); //Corte o círculo acima de ctx.drawImage(img, imgX, imgY, imgWidth, imgWidth); ; //Restaurar estado vm.canvasFillText(canvas, ctx, dpr, círculoR }});

 // Preencha o nome do usuário ou mensagem do usuário canvasFillText (canvas, ctx, dpr, circleR) { var fontSizeThis = dpr * 20 + 'px' + ' Arial'; userMessageX = dpr * 40; //coordenada do eixo X da mensagem do usuário var userMessageY = 0; 0;//String subscript var lineWidth = 0;//Largura de uma linha var allTextWidth = 0;//Largura de todos os caracteres ctx.font = fontSizeThis; // O nome do usuário é necessário para escrever o nome do usuário if (this.userName) {userNameY = círculoR * 2.5; ctx.fillStyle = #0094ff; canvas.width / 2, userNameY } if (this.userMessage) { userMessageY = userNameY + dpr * 35; . comprimento; i++) { allTextWidth += ctx.measureText(this.userMessage[i]).width } // Se o comprimento da string for maior que a área da tela, envolva a linha if (allTextWidth > canvas.width - 2* userMessageX) { for (var i = 0; i < this.userMessage.length; i++) { lineWidth += ctx. medirText(this.userMessage[i]).width if (lineWidth > canvas.width - 2*userMessageX) { ctx.textAlign = 'esquerda'; ctx.fillText(this.userMessage.substring(lastSubStrIndex, i), userMessageX, userMessageY); userMessageY += dpr * 25;//Definir altura da linha lineWidth = 0; lastSubStrIndex = i } if (i == this.userMessage. comprimento - 1) { ctx.fillText(this.userMessage.substring(lastSubStrIndex, i + 1), mensagem do usuário},

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.