This is the 7th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.

Generating circle of friends posters this function is often encountered in the site development scene, such as sharing circle of friends posters, so how to achieve?

Today I will share with you a simple implementation case.

Directly on the code:

</title> <meta name="viewport" content="640, initial-scale=1.0, Maximum - scale = 1.0, the minimum - scale = 1.0, user - scalable = 0 "> < script SRC = "https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" > < / script > < script SRC = "https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js" > < / script > < / head > < body > < style > * {margin: 0; padding:0; } body, html { width: 100%; height: 100%; padding-bottom:30px; } #imgBox { width: 100%; height: 100%; } #imgBox p { font-size:12px; line-height:30px; color:#aaa; background-color:#fff; text-align:center; margin-bottom:10px; } img { width: 80%; display: block; margin:0 auto; Box-shadow: 0 0 30px rgba(0,0,0,.2); } </style> <div id="imgBox"> <p> Long press the image to save to the system album and share </p> <img: SRC ='imgSrc' v-if="imgSrc" /> </div> <script> // js main structure new Vue({el:'#imgBox', data:{userName: '#imgBox', imgSrc: '',// make the final image qrCode: 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/app_download_QR.40b04a4.png' / / qr code}, mounted(){ this.drawCanvasBgImg(); }, methods: {// windowInfo () {var windowInfo = {}; windowInfo.dpr = window.devicePixelRatio; if (window.innerWidth) { windowInfo.width = window.innerWidth; } else { windowInfo.width = document.body.clientWidth; } return windowInfo; DrawCanvasBgImg () {var vm = this; drawCanvasBgImg () {var vm = this; var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); var clientWidth = this.getWindowInfo().width; Var DPR = this.getwindowinfo ().dpr; ctx.globalCompositeOperation = "source-atop"; ** canvas.width = 640; //dpr * clientWidth; // Due to the retina display of mobile phones, rendering will be multifold, so use DPR to dynamically set the canvas width and height to avoid image blurring. Canvas. Height = 1138; //dpr * clientWidth * 609 / 375; Var img = new Image() var img = new Image(); img.crossOrigin = ''; / images/death pit cross-domain (img. CrossOrigin = "Anonymous" this kind of writing can't display base64 format images). Img SRC = "https://source.unsplash.com/random"; Img. onload = function () {ctx.drawImage(img, 0, 0, canvas.width, canvas.height); vm.drawCanvasqrImg(canvas, ctx, dpr); DrawCanvasqrImg: function (canvas, CTX, DPR) {var vm = this; var start = 182; var imgX = start; Var imgY = 495; ImgWidth = 275; var img = new Image(); img.crossOrigin = ''; img.src = this.qrCode; img.onload = function () { ctx.drawImage(img, imgX, imgY, imgWidth, imgWidth); ctx.restore(); // Restore state vm.canvasFillPin(canvas, CTX, DPR); } }, canvasFillPin (canvas, ctx, dpr) { var vm = this; var fontSizeThis = 30 + 'px' + ' Arial'; var userNameY = 830; // Ctx. font = fontSizeThis; If (this.username) {ctx.fillstyle = "white"; // If (this.username) {ctx.fillstyle = "white"; ctx.textAlign = 'left'; var w = ctx.measureText(this.userName).width; ctx.fillText(this.userName,(canvas.width-w)/2, userNameY); ctx.restore(); / / restore state this. ConvertCanvasToImage (canvas); } }, convertCanvasToImage (canvas) { this.imgSrc = canvas.toDataURL("image/jpeg"); $Spin. Hide (); $Spin. } } }) </script> </body> </html>Copy the code

The above code can be used directly copy, have a question welcome to leave a message!

Effect demonstration:

Hope to help more need small partners, good things to share!!