之前一直都在寫業(yè)務(wù)類的頁(yè)面，非常少接觸canvas，最近公司要出一個(gè)測(cè)試類的H5活動(dòng)頁(yè)面，需要在用戶完成測(cè)試后把用戶輸入的資料和二維碼合并在測(cè)試結(jié)果圖中。

其中有個(gè)坑，就是canvas是不能使用rem單位的，所以開頭我就打算動(dòng)態(tài)取頁(yè)面中img的寬度來(lái)進(jìn)行2倍圖的繪畫，結(jié)果掉進(jìn)了這個(gè)坑里非常煩惱，然后突然想到其實(shí)只要按設(shè)計(jì)給你的圖片的原先尺寸進(jìn)行繪畫就行了，并不需要?jiǎng)討B(tài)進(jìn)行寬高設(shè)置。

下面是實(shí)現(xiàn)代碼：

vue框架:

import QRCode from 'qrcode' // 二維碼生成export default {....moreCode,methods: {async getImg(){let imgbox = this.$refs.imgbox; // 獲取頁(yè)面上的imglet img = new Image(); let qImg = new Image();let qCode = await this.useqrcode(); // 獲取二維碼img.src = this.resImg;qImg.src = qCode;img.onload = ()=>{var canvas = this.$refs.canvas; var ctx = canvas.getContext("2d");ctx.drawImage(img,0,0,1300,1888); // 在canvas畫背景圖原此尺寸即可ctx.drawImage(qImg,canvas.width-210-105,canvas.height-210-140,210,210); // 在canvas 添加二維碼ctx.fillStyle = 'rgba(28,52,133,1)'; // canvas 文本顏色ctx.font = "500 64px PingFangSC-Medium"; // canvas 文本屬性ctx.fillText(this.nickName,128,196); // canvas 文本內(nèi)容和位置定位// ctx.textAlign='center';//如居中，文本水平對(duì)齊方式// ctx.fillText(this.nickName,650,196); //文本水平對(duì)齊方式.X軸需要是畫布的一半imgbox.src = canvas.toDataURL("image/jpeg", 1.0) // 輸出圖片}}},async useqrcode(){ // 生成的二維碼內(nèi)容，可以添加變量let QueryDetail =`${window.location.origin}/home?source=${this.$route.query.Channel}`try {let haha = await QRCode.toDataURL(QueryDetail);return haha}catch{console.log('生成二維碼失敗')}} }

總結(jié)

以上是生活随笔為你收集整理的H5 活动利用Canvas把用户信息和二维码合并到图片内。的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。