需求

工作中有一個將地址生成二維碼，再將二維碼與一張背景圖合成一張海報的需求

實現

1.生成二維碼

//下載插件實現 import QRCode from 'qrcode' //生成二維碼的方法 url-地址；picUrl-背景圖片地址； getQRpic(url, picUrl) {let that = thisQRCode.toDataURL(url).then((qrUrl) => {that.getPosterPic(qrUrl, picUrl)}).catch((err) => {console.error(err)})},

2.合成一張圖片

getPosterPic(qrUrl, picUrl) {let that = thisfunction drawAndShareImage() {var canvas = document.createElement('canvas')var myImage = new Image()myImage.src = picUrl //背景圖片myImage.crossOrigin = 'Anonymous'myImage.onload = function () {canvas.width = myImage.widthcanvas.height = myImage.heightvar context = canvas.getContext('2d')context.rect(0, 0, canvas.width, canvas.height)context.fillStyle = '#fff'context.fill()context.drawImage(myImage, 0, 0, myImage.width, myImage.height)var myImage2 = new Image()myImage2.src = qrUrl //二維碼圖片myImage2.crossOrigin = 'Anonymous'myImage2.onload = function () {let x = 515 // myImage.width - myImage2.width - 34let y = 1112 // myImage.height - myImage2.height - 10// console.log(x, y, (220 / 750) * myImage.width)context.drawImage(myImage2, x, y, 220, 220)var base64 = canvas.toDataURL('image/png') //"image/png" 這里注意一下const a = document.createElement('a')a.href = base64a.setAttribute('download', '圖片名稱')a.click()}}}

總結

以上是生活随笔為你收集整理的前端vue生成二维码，再合成海报图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。