บทความนี้จะแนะนำการแบ่งปันโปสเตอร์ Canvas WeChat และแบ่งปันกับทุกคน โดยมีรายละเอียดดังนี้:
<div class=imgBox v-cloak> <img :src='imgSrc' v-if=imgSrc /></div>
ซีเอสเอส
<สไตล์> *{ ระยะขอบ: 0; } เนื้อความ, html { ความกว้าง: 100%; } .imgBox { ความกว้าง: 100%; จอแสดงผล: บล็อก </style>สคริปต์
// โครงสร้างหลัก js new Vue({ el:'imgBox', data:{ urlParam: {},//รับค่าอ็อบเจ็กต์ใน url RandomNum: 1,//ตัวเลขสุ่มถูกใช้เพื่อกำหนดชื่อผู้ใช้หน้าพรใด: '' ,//ชื่อผู้ใช้ imgSrc: '',//รูปภาพสุดท้ายที่สังเคราะห์แล้ว userImg: '',//รูปภาพประจำตัวของผู้ใช้ userMessage: '',//ข้อความผู้ใช้}, วิธีการ: { // แบ่งปันให้เพื่อน wxShareFriends: function () {}, // ส่วนหัวคำขอการเริ่มต้น wxHttp: function () { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name=csrf-token ]' ).attr('content') } }); // รับตัวเลขสุ่ม [1,10] RandomNumbers() { this.randomNum = Math.ceil(Math.random() * 10) }, // รับอวาตาร์และตำแหน่งของผู้ใช้ WeChat และคำอวยพรของผู้ใช้ getUserInfo() { var vm = this $.post('API request address' , ฟังก์ชั่น (data) { if (data.code == 1) { vm.userImg = data.data.headimg; vm.userName = data.data.nickname; (vm.randomNum % 2 == 0) { vm.userMessage= 'เมื่อเราพบกันในโลกแห่งมนุษย์ เราก็แก่แล้ว การพบกันในโลกแห่งมนุษย์เป็นสิ่งที่ละเอียดอ่อนและศักดิ์สิทธิ์ } else { vm.userMessage = 'พบกันในโลกมนุษย์ เราแก่แล้ว' } } vm.$nextTick(function () { vm.drawCanvasBgImg(); }) }) } // รับหน้า dpr และความกว้าง getWindowInfo() { var windowInfo = {}; windowInfo.dpr = window.devicePixelRatio; if (window.innerWidth) { windowInfo.width = window.innerWidth } else { windowInfo. width = document.body.clientWidth; } กลับ windowInfo }, // วาดภาพพื้นหลังขนาดใหญ่เพื่อแชร์ในหน้ากิจกรรม DrawCanvasBgImg () {}, // ตัดวงกลมบนผืนผ้าใบของภาพพื้นหลังแล้วเติมด้วยอวตารของผู้ใช้ DrawCanvasUserImg(canvas, ctx, dpr) {}, // Fill ในชื่อผู้ใช้หรือข้อความผู้ใช้ canvasFillText (canvas, ctx, dpr, circleR) {}, // สังเคราะห์รูปภาพที่แชร์ base64 บิต ConvertCanvasToImage (canvas) { this.imgSrc = canvas.toDataURL(image/jpeg);//png เป็นพิษ และรหัส QR ไม่ได้รับการยอมรับบน Android และไม่สามารถเปลี่ยนเส้นทาง this.$Spin.hide(); ขั้นตอนวิธีการวาด //หลังจากได้รับข้อมูลแล้ว ให้เริ่มวาดภาพพื้นหลัง แนวคิดนั้นง่ายมาก: วาดภาพลงบนผืนผ้าใบ จากนั้นวาดข้อความอวตารบนผืนผ้าใบแล้วแปลงเป็น img DrawCanvasBgImg () { var vm = this; = document.createElement( canvas); var ctx = canvas.getContext(2d); var clientWidth = this.getWindowInfo().width;//รับความกว้างของหน้าจอสำหรับหน้าจอมือถือที่ปรับความกว้างของผ้าใบได้ dpr = this.getWindowInfo().dpr; ctx.globalCompositeOperation = source-atop;//** นามแฝงดูเหมือนไร้ประโยชน์ ฉันไม่รู้ว่ามันถูกใช้ผิดที่หรือเปล่า** canvas.width = dpr * clientWidth; //เนื่องจากหน้าจอโทรศัพท์มือถือ เมื่อใช้หน้าจอเรตินา จะมีการเรนเดอร์หลายครั้ง ใช้ dpr เพื่อตั้งค่าความกว้างและความสูงของผืนผ้าใบแบบไดนามิก เพื่อหลีกเลี่ยงภาพเบลอ canvas.height = dpr * clientWidth * 609 / 375;//การถอดแถบสถานะที่ส่วนหัว WeChat ควรเป็น 603 ฉันไม่เข้าใจว่า 603 ยังไม่สามารถแสดงภาพเต็มหน้าจอได้ ดังนั้นฉันจึงเพิ่มไปที่ 609 var img = new Image(); crossOrigin = '';//ภาพ Dead Pit ข้ามโดเมน (img.crossOrigin = ผู้ไม่ประสงค์ออกนามยังคงไม่สามารถแสดงภาพในรูปแบบ base64) img.src = http://xxx + this.randomNum + .jpg; img.onload = function () { ctx.drawImage(img, 0, 0, canvas.width, canvas.height); vm.drawCanvasUserImg(ผ้าใบ, ctx, dpr); อวตารของผู้ใช้ DrawCanvasUserImg (canvas, ctx, dpr) //ตัดวงกลมบนผืนผ้าใบของภาพพื้นหลังแล้วเติมด้วยอวาตาร์ของผู้ใช้ DrawCanvasUserImg: function (canvas, ctx, dpr) { var vm = this; var circleR = 50 * dpr; //Radius var circleX = canvas. width / 2 ;//พิกัด X ของศูนย์กลางวงกลม var circleY = 50 * dpr;//พิกัด Y ของศูนย์กลางวงกลม var imgX = วงกลมX - วงกลมR;//พิกัดเริ่มต้นของรูปภาพ X var imgY = CircleY - CircleR;//พิกัดเริ่มต้นของรูปภาพ Y var imgWidth = 2 * CircleR;//รูปภาพมีขนาดตามวงกลม var img = new Image(); img.crossOrigin = ''; = this.userImg; img .onload = function () { ctx.save(); // บันทึกสถานะปัจจุบันของ ctx ctx.arc(circleX,circleY,circleR, 0, 2 * Math.PI); //วาดวงกลม ctx.clip(); //ครอบตัดวงกลมด้านบน ctx.drawImage(img, imgX, imgY, imgWidth, imgWidth); //วาดบนวงกลมที่เพิ่งครอบตัด ctx.restore () ; // กู้คืนสถานะ vm.canvasFillText (canvas, ctx, dpr, circleR }} วาดข้อความบนผืนผ้าใบ // กรอกชื่อผู้ใช้หรือข้อความของผู้ใช้ canvasFillText (canvas, ctx, dpr, circleR) { var fontSizeThis = dpr * 20 + 'px' + ' Arial'; var userNameY = 0; // ชื่อผู้ใช้ พิกัดแกน Y var userMessageX = dpr * 40; //พิกัดแกน X ของข้อความผู้ใช้ var userMessageY = 0; // พิกัดแกน Y ของข้อความผู้ใช้ var LastSubStrIndex = 0;//ตัวห้อยสตริง var lineWidth = 0;//ความกว้างหนึ่งบรรทัด var allTextWidth = 0;//ความกว้างอักขระทั้งหมด ctx.font = fontSizeThis; // ชื่อผู้ใช้จะต้องเขียนชื่อผู้ใช้ถ้า (this.userName) { userNameY = circleR * 2.5; ctx.fillStyle = #0094ff; ctx.textAlign = 'center'; canvas.width / 2, userNameY); } if (this.userMessage) { userMessageY = userNameY + dpr * 35; // รับความกว้างของอักขระสำหรับ (var i = 0; i < this.userMessage .length; i++) { allTextWidth += ctx.measureText(this.userMessage[i]).width } // หากความยาวของสตริงยาวกว่าพื้นที่แคนวาส ให้พันบรรทัด 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 = 'ซ้าย'; ctx.fillText(this.userMessage.substring(lastSubStrIndex, i), userMessageX, userMessageY); userMessageY += dpr * 25;//ตั้งค่าความสูงของบรรทัด lineWidth = 0; LastSubStrIndex = i; ความยาว - 1) { ctx.fillText(this.userMessage.substring(lastSubStrIndex, i + 1), ข้อความผู้ใช้ },ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network