引用:https://blog.csdn.net/skyblacktoday/article/details/83214546
小程序不能直接将网络图片画到canvas上,,需要使用wx.getImageInfo
将图片存到本地,,然后再画入canvas ,
generateCard(){ const {canvasWidth} = this.data const ctx = wx.createCanvasContext('canvas') ctx.width = canvasWidth ctx.drawImage("../../assets/recommend_scene/certificate.jpg",0,0,canvasWidth,300) ctx.setFontSize(24) ctx.setFillStyle("#000") ctx.fillText(this.data.userinfo.username,170,218) // 绘制圆角矩形路径并裁剪 const imgX = 190; // 图片的X坐标 const imgY = 156; // 图片的Y坐标 const imgWidth = 40; // 图片的宽度 const imgHeight = 40; // 图片的高度 const borderRadius = 20; // 圆角半径 ctx.save(); // 保存当前的绘图上下文 // 创建圆角矩形路径 ctx.beginPath(); ctx.moveTo(imgX + borderRadius, imgY); ctx.arcTo(imgX + imgWidth, imgY, imgX + imgWidth, imgY + imgHeight, borderRadius); ctx.arcTo(imgX + imgWidth, imgY + imgHeight, imgX, imgY + imgHeight, borderRadius); ctx.arcTo(imgX, imgY + imgHeight, imgX, imgY, borderRadius); ctx.arcTo(imgX, imgY, imgX + imgWidth, imgY, borderRadius); ctx.closePath(); ctx.clip(); // 裁剪路径 wx.getImageInfo({ src: this.data.userinfo.avatar, success:(res)=>{ console.log(res,"123") ctx.drawImage(res.path,imgX,imgY,imgWidth,imgHeight) ctx.restore(); // 恢复之前保存的绘图上下文 ctx.draw(false,(res)=>{ wx.canvasToTempFilePath({ canvasId:"canvas", success:(res)=>{ this.setData({ imageData:res.tempFilePath }) }, fail:(err)=>{ wx.showToast({ title: '生成图片失败', icon:"none" }) } }) }) } }) },
saveCard(){ const { imageData } = this.data if(imageData){ wx.saveImageToPhotosAlbum({ filePath: imageData, success:()=>{ wx.showToast({ title: '卡片已保存到相册', }) }, fail:(err)=>{ wx.showToast({ title: '保存失败', icon:"none" }) } }) }else{ wx.showToast({ title: '请先生成卡片', }) } },
上一篇:r7 1700配什么主板稳定
下一篇:彩信群发软件_是否支持彩信