Explication détaillée du partage d'affiches WeChat sur toile html5 (fosse d'escalade personnelle)

Cet article présente le partage d'affiches WeChat sur toile et le partage avec tout le monde. Les détails sont les suivants :

1. Générer aléatoirement une image
2. Obtenez l'avatar et le nom de l'utilisateur WeChat (ajustez l'interface backend pour l'obtenir)
3. Combinez l'avatar et le titre de l'utilisateur avec une image générée aléatoirement dans une affiche
4. Peut-être que l'utilisateur de la page précédente a également rempli le texte de souhait qui doit également être rempli dans l'image.

1. Canvas n'est pas valide lorsqu'il est appuyé longuement dans le navigateur WeChat et ne peut pas être partagé comme img (je le convertirai alors en img)
2. Après l'avoir convertie en img, elle peut être affichée dans les outils de développement WeChat, mais elle ne fonctionnera pas sur le vrai appareil (je veux pleurer mais pas de larmes a dit que l'image peut être multi-domaine ^-^).
3. La synthèse de l'avatar de l'utilisateur nécessite également des coins arrondis. J'ai dit non, alors j'ai juste regardé la documentation de l'API Canvas. Je n'aime pas Du Niang.
4. Si le texte dans le canevas dépasse la largeur spécifiée, il doit être renvoyé à la ligne. Je ne connais que les différentes méthodes d'alignement du texte qui ne dépassent pas la largeur spécifiée ctx.textAlign = 'center';
5. Le problème du flou de la toile sous un écran haute définition (c'est super simple, je ne sais pas pourquoi Du Niang est si verbeux) n'est pas canvas.witdt=innerWidth*devicePixelRatio

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

CSS

 <style> *{ margin:0; padding:0; } corps, html { largeur : 100 % ; hauteur : 100 % } .imgBox { largeur : 100 % ; affichage : bloc ;</style>

scénario

 // structure principale js new Vue({ el:'imgBox', data:{ urlParam: {},//Obtenir la valeur de l'objet dans l'url randomNum : 1,//Le nombre aléatoire est utilisé pour déterminer quelle page de bénédiction userName : '' ,//Nom d'utilisateur imgSrc : '',//Image finale synthétisée userImg : '',//Image de l'avatar de l'utilisateur userMessage : '',//Message de l'utilisateur}, méthodes : { // Partager avec des amis wxShareFriends : function () {}, // En-tête de demande d'initialisation wxHttp : function () { $.ajaxSetup({ headers : { 'X-CSRF-TOKEN': $('meta[name=csrf-token ]' ).attr('content') } }); }, // Récupère des nombres aléatoires [1,10] randomNumbers() { this.randomNum = Math.ceil(Math.random() * 10) }, // Récupère l'avatar et le titre de l'utilisateur WeChat ainsi que les mots de bénédiction de l'utilisateur getUserInfo() { var vm = this $.post('API request address' , function (data) { if (data.code == 1) { vm.userImg = data.data.headimg; vm.userName = data.data.nickname ; (vm.randomNum % 2 == 0) { vm.userMessage= 'Lorsque nous nous rencontrons dans le monde des mortels, nous sommes vieux. Le temps a passé. Se rencontrer dans le monde des mortels est une chose subtile et sacrée.' else { vm.userMessage = 'Rendez-vous dans le monde des mortels, nous sommes vieux' } } vm.$nextTick(function () { vm.drawCanvasBgImg(); }) }) }, // Récupère le dpr et la largeur de la page getWindowInfo() { var windowInfo = {}; windowInfo.dpr = window.devicePixelRatio; if (window.innerWidth) { windowInfo.width = window.innerWidth } else { windowInfo. width = document.body.clientWidth; } return windowInfo }, // Dessinez une grande image d'arrière-plan à partager sur la page d'activité drawCanvasBgImg () {}, // Découpez un cercle sur le canevas de l'image d'arrière-plan et remplissez-le avec l'avatar de l'utilisateur drawCanvasUserImg(canvas, ctx, dpr) {}, // Remplir dans le nom d'utilisateur ou le message utilisateur canvasFillText (canvas, ctx, dpr, circleR) {}, // Synthétiser l'image partagée en base64 bits convertCanvasToImage (canvas) { this.imgSrc = canvas.toDataURL(image/jpeg);//png est toxique et le code QR ne peut pas être reconnu sur Android et ne peut pas être redirigé this.$Spin.hide();

1. drawCanvasBgImg()
2. drawCanvasUserImg (toile, ctx, dpr)
3. canvasFillText (canvas, ctx, dpr, circleR)
4. convertirCanvasToImage (toile)

 //Après avoir obtenu les données, commencez à dessiner l'image d'arrière-plan. L'idée est très simple : dessinez l'image dans le canevas, puis dessinez le texte de l'avatar sur le canevas et convertissez-le en img drawCanvasBgImg () { var vm = this var canvas; = document.createElement( canvas); var ctx = canvas.getContext(2d); var clientWidth = this.getWindowInfo().width;//Obtenir la largeur de l'écran pour l'écran mobile adaptatif à la largeur du canevas dpr = this.getWindowInfo().dpr; ctx.globalCompositeOperation = source-atop;//** L'alias semble inutile, je ne sais pas s'il est utilisé au mauvais endroit** canvas.width = dpr * clientWidth; //En raison de l'écran du téléphone portable Lorsque vous utilisez un écran Retina, il sera rendu plusieurs fois. Utilisez dpr pour définir dynamiquement la largeur et la hauteur du canevas afin d'éviter les images floues. 375;//La suppression de la barre d'état dans l'en-tête WeChat devrait être 603. Je ne comprends pas que 603 ne peut toujours pas remplir l'écran avec des images, je l'ai donc ajoutée à 609. var img = new Image(); crossOrigin = '';//L'image de la fosse morte traverse le domaine (img.crossOrigin = Anonyme ne peut toujours pas afficher les images au format 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 }});

 //Découpez un cercle sur le canevas de l'image d'arrière-plan et remplissez-le avec l'avatar de l'utilisateur drawCanvasUserImg: function (canvas, ctx, dpr) { var vm = this; var circleR = 50 * dpr //Radius var circleX = canvas. width / 2 ;//Coordonnée X du centre du cercle var circleY = 50 * dpr;//Coordonnée Y du centre du cercle var imgX = circleX - circleR;//Coordonnée de départ de l'image X var imgY = circleY - circleR;//La coordonnée de départ de l'image Y var imgWidth = 2 * circleR;//L'image est dimensionnée en fonction du cercle var img = new Image(); = this.userImg; img .onload = function () { ctx.save(); // Enregistre l'état actuel de ctx ctx.arc(circleX, circleY, circleR, 0, 2 * Math.PI); //Dessinez un cercle ctx.clip(); //Recadrez le cercle au-dessus de ctx.drawImage(img, imgX, imgY, imgWidth, imgWidth); //Dessinez sur le cercle qui vient d'être recadré ctx.restore () ; //Restaurer l'état vm.canvasFillText(canvas, ctx, dpr, circleR }},

 // Renseignez le nom d'utilisateur ou le message utilisateur canvasFillText (canvas, ctx, dpr, circleR) { var fontSizeThis = dpr * 20 + 'px' + ' Arial'; var userNameY = 0; userMessageX = dpr * 40; //Coordonnée sur l'axe X du message utilisateur var userMessageY = 0 //Coordonnée sur l'axe Y du message utilisateur var lastSubStrIndex = 0;//Indice de chaîne var lineWidth = 0;//Largeur d'une ligne var allTextWidth = 0;//Largeur de tous les caractères ctx.font = fontSizeThis; // Le nom d'utilisateur est requis pour écrire le nom d'utilisateur if (this.userName) { userNameY = circleR * 2.5; ctx.fillStyle = #0094ff; ctx.textAlign = 'center'; canvas.width / 2, userNameY); } if (this.userMessage) { userMessageY = userNameY + dpr * 35; ctx.fillStyle = #000; // Obtenez la largeur des caractères pour (var i = 0; i < this.userMessage . longueur; i++) { allTextWidth += ctx.measureText(this.userMessage[i]).width; Si la longueur de la chaîne est plus longue que la zone du canevas, enveloppez la ligne if (allTextWidth > canvas.width - 2* userMessageX) { for (var i = 0; i < this.userMessage.length; i++) { lineWidth += ctx. mesurerText(this.userMessage[ i]).width; if (lineWidth > canvas.width - 2*userMessageX) { ctx.textAlign = 'gauche'; ctx.fillText(this.userMessage.substring(lastSubStrIndex, i), userMessageX, userMessageY); userMessageY += dpr * 25;//Définir la hauteur de la ligne lineWidth = 0; lastSubStrIndex = i; longueur - 1) { ctx.fillText(this.userMessage.substring(lastSubStrIndex, i + 1), message utilisateur },

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.