Detailed explanation of html5 canvas WeChat poster sharing (personal climbing pit)

This article introduces canvas WeChat poster sharing and shares it with everyone. The details are as follows:

1. Randomly generate a picture
2. Get the avatar and name of the WeChat user (adjust the backend interface to get it)
3. Combine the user's avatar and title with a randomly generated picture into a poster
4. Maybe the user on the previous page also filled in the wish text that needs to be filled in the picture as well.

1. Canvas is invalid when long pressed in the WeChat browser and cannot be shared like img (then I will convert it to img)
2. After converting it to img, it can be displayed in the WeChat developer tools, but it will not work on the real device (I want to cry but no tears). Du Niang said that the image may be cross-domain ^-^
3. The user avatar synthesis also requires rounded corners. I said no, so I just looked at the canvas api documentation. I have no love for Du Niang.
4. If the text in the canvas exceeds the specified width, it must be wrapped. I only know the various text alignment methods that do not exceed the specified width ctx.textAlign = 'center';
5. The problem of canvas being blurry under high-definition screen (it’s super simple, I don’t know why Du Niang is so verbose) is not canvas.witdt=innerWidth*devicePixelRatio

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

CSS

 <style> *{ margin:0; padding:0; } body, html { width: 100%; height: 100%; } .imgBox { width: 100%; height: 100%; } img { width: 100%; display: block; }</style>

script

 // js main structure new Vue({ el:'imgBox', data:{ urlParam: {},//Get the value object in the url randomNum: 1,//The random number is used to determine which blessing page userName: '' ,//User name imgSrc: '',//Synthesized final picture userImg: '',//User avatar picture userMessage: '',//User message}, methods: { // Share to friends wxShareFriends: function () {}, // Initialization request header wxHttp: function () { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name=csrf-token ]').attr('content') } }); }, // Get random numbers [1,10] randomNumbers() { this.randomNum = Math.ceil(Math.random() * 10) }, // Get the WeChat user's avatar and title and the user's blessing words getUserInfo() { var vm = this; $.post('API request address' , function (data) { if (data.code == 1) { vm.userImg = data.data.headimg; vm.userName = data.data.nickname; if (vm.randomNum % 2 == 0) { vm.userMessage= 'When we meet in the world of mortals, we are old. Time has passed. Meeting each other in the world of mortals is a subtle and sacred thing.' } else { vm.userMessage = 'Meet in the mortal world, we are old' } } vm.$nextTick(function () { vm.drawCanvasBgImg(); }) }) }, // Get the page dpr and width getWindowInfo() { var windowInfo = {}; windowInfo.dpr = window.devicePixelRatio; if (window.innerWidth) { windowInfo.width = window.innerWidth; } else { windowInfo.width = document.body.clientWidth; } return windowInfo; }, // Draw a large background image for sharing on the activity page drawCanvasBgImg () {}, // Cut a circle on the canvas of the background image and fill it with the user's avatar drawCanvasUserImg(canvas, ctx, dpr) {}, // Fill in the user name or user message canvasFillText (canvas, ctx, dpr, circleR) {}, // Synthesize base64-bit shared image convertCanvasToImage (canvas) { this.imgSrc = canvas.toDataURL(image/jpeg);//png is poisonous and the QR code cannot be recognized on Android and cannot be redirected this.$Spin.hide(); } }})

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

 //After getting the data, start drawing the background image. The idea is very simple: draw the image into the canvas, then draw the avatar text on the canvas and convert it to img drawCanvasBgImg () { var vm = this; var canvas = document.createElement( canvas); var ctx = canvas.getContext(2d); var clientWidth = this.getWindowInfo().width;//Get the screen width for canvas width adaptive mobile screen var dpr = this.getWindowInfo().dpr; ctx.globalCompositeOperation = source-atop;//** The aliasing seems useless, I don’t know if it is used in the wrong place** canvas.width = dpr * clientWidth;//Due to the mobile phone screen When using a retina screen, it will be rendered multiple times. Use dpr to dynamically set the canvas width and height to avoid blurry images. canvas.height = dpr * clientWidth * 609 / 375;//Removing the status bar at the WeChat header should be 603. I don’t understand that 603 still can’t fill the screen with images, so I added it to 609. var img = new Image(); img.crossOrigin = '';//The dead pit image crosses Domain (img.crossOrigin = Anonymous still cannot display base64 format images) img.src = http://xxx + this.randomNum + .jpg; img.onload = function () { ctx.drawImage(img, 0, 0, canvas.width, canvas.height); vm.drawCanvasUserImg(canvas, ctx, dpr); }},

 //Cut a circle on the canvas of the background image and fill it with the user's avatar drawCanvasUserImg: function (canvas, ctx, dpr) { var vm = this; var circleR = 50 * dpr; //Radius var circleX = canvas.width / 2 ;//X coordinate of circle center var circleY = 50 * dpr;//Y coordinate of circle center var imgX = circleX - circleR;//Start coordinate of picture X var imgY = circleY - circleR;//The starting coordinate of the picture Y var imgWidth = 2 * circleR;//The picture is sized according to the circle var img = new Image(); img.crossOrigin = ''; img.src = this.userImg; img .onload = function () { ctx.save(); // Save the current state of ctx ctx.arc(circleX, circleY, circleR, 0, 2 * Math.PI); //Draw a circle ctx.clip(); //Crop the circle above ctx.drawImage(img, imgX, imgY, imgWidth, imgWidth); //Draw on the circle just cropped ctx.restore (); //Restore state vm.canvasFillText(canvas, ctx, dpr, circleR); }},

 // Fill in the user name or user message canvasFillText (canvas, ctx, dpr, circleR) { var fontSizeThis = dpr * 20 + 'px' + ' Arial'; var userNameY = 0; //User name Y-axis coordinate var userMessageX = dpr * 40; //X-axis coordinate of user message var userMessageY = 0; //Y-axis coordinate of user message var lastSubStrIndex = 0;//String subscript var lineWidth = 0;//One line width var allTextWidth = 0;//All character width ctx.font = fontSizeThis; // The user name is required to write the user name if (this.userName) { userNameY = circleR * 2.5; ctx.fillStyle = #0094ff; ctx.textAlign = 'center'; ctx.fillText(this.userName, canvas.width / 2, userNameY); } if (this.userMessage) { userMessageY = userNameY + dpr * 35; ctx.fillStyle = #000; // Get the character width for (var i = 0; i < this.userMessage. length; i++) { allTextWidth += ctx.measureText(this.userMessage[i]).width; } // If the string length is longer than the canvas area, wrap the line if (allTextWidth > canvas.width - 2* userMessageX) { for (var i = 0; i < this.userMessage.length; i++) { lineWidth += ctx.measureText(this.userMessage[ i]).width; if (lineWidth > canvas.width - 2*userMessageX) { ctx.textAlign = 'left'; ctx.fillText(this.userMessage.substring(lastSubStrIndex, i), userMessageX, userMessageY); userMessageY += dpr * 25;//Set line height lineWidth = 0; lastSubStrIndex = i; } if (i == this.userMessage. length - 1) { ctx.fillText(this.userMessage.substring(lastSubStrIndex, i + 1), usermessage },

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.