| uniapp 使用canvas画海报（微信小程序） | 您所在的位置：网站首页 › 画海报教程 › uniapp 使用canvas画海报（微信小程序） |
uniapp 使用canvas画海报（微信小程序）
|
效果展示： 项目要求：点击分享绘制海报，并实现分享到好友，朋友圈，并保存 先实现绘制海报 分享 // 生成海报 goShare(item, index) { let _this = this; this.shareId = item.id this.isShare = true // uni.hideTabBar() let userInfo = uni.getStorageSync('userInfo') uni.getImageInfo({ src: userInfo.avatar, success: function(res) { if (res.path) { _this.canvasr(item, index, res.path, userInfo.nickname); } }, }); }, // 画海报 canvasr(item, index, avatar, username) { let ctx = uni.createCanvasContext('firstCanvas1'); // 背景图 let postImage = '../../static/images/poster_bg.png'; //背景图 ctx.globalAlpha = 0; // 设置图像透明度为0 为了让背景透明 ctx.setFillStyle('#ffffff'); // 默认白色 ctx.fillRect(0, 0, 327, 482); ctx.globalAlpha = 1; // 设置图像透明度为1 ctx.drawImage(postImage, 0, 0, 327, 482); // （图片，x，y，宽，高）背景图 ctx.save(); // 头像 ctx.restore(); // let avatar = userInfo.avatar + "?timestamp=" + Date.now(); //地址栏加入新参数 解决canvas图片跨域问题 this.drawAvatar(ctx, avatar, 30, 20, 15) // 昵称 + ctx.setFontSize(12); //设置字体字号 ctx.setFillStyle('#000000'); //设置字体颜色 // ctx.fillText(username, 65, 39); // （文字，x，y） let _strlineW = 0; let nickname = ''; let actI = 0; for (let i = 0; i < username.length; i++) { _strlineW += ctx.measureText(username[i]).width; if(_strlineW 60 && _strlineW 6) { let rowCut = row.slice(0, 6); let rowPart = rowCut[5]; let test = ""; let empty = []; for (let i = 0; i < rowPart.length; i++) { if (ctx.measureText(test).width < maxWidth) { test += rowPart[i]; } else { break; } } empty.push(test); // let group = empty[0] //这里只显示两行，超出的用...表示 let group = empty[0] + "..." //这里只显示两行，超出的用...表示 rowCut.splice(5, 1, group); row = rowCut; } // 把文本绘制到画布中 for (let i = 0; i < row.length; i++) { // 一次渲染一行 ctx.fillText(row[i], axisX, axisY + i * titleHeight, maxWidth); } // 保存当前画布状态 ctx.save() // 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。 // ctx.draw() },下面是海报下面的分享弹窗 微信好友 朋友圈 保存图片 取消因为分享到朋友圈实在没找到有使用自定义按钮的可能，所以还是需要点击右上角胶囊 onLoad(){ //分享功能 wx.showShareMenu({ withShareTicket: true, //设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击 menus: ["shareAppMessage", "shareTimeline"] }) } //点击分享朋友，朋友圈事件 shareWeixin(scene) { if (scene == 'WXSceneTimeline') { uni.showToast({ title: '点击右上角胶囊分享朋友圈', icon: 'none', duration: 2000 }) } else { uni.share({ provider: "weixin", scene: scene, type: 0, href: '/subPackage/index/like_details?id=' + this.shareId + '&type=1', title: '点子分享', success(res) { console.log(res); }, fail(err) { console.log(err); } }) } }, onShareAppMessage(res) { if (res.from === 'button') { // 来自页面内分享按钮 return { title: 'xxxxxxx', //分享的名称 path: '/subPackage/index/like_details?id=' + this.shareId + '&type=1', mpId: 'wx000000000', //此处配置微信小程序的AppId imageUrl: '' } } return { title: 'xxxxx', //分享的名称 path: '/subPackage/index/like_details?id=' + this.shareId + '&type=1', mpId: 'wx0000000000', //此处配置微信小程序的AppId imageUrl: '' } }, //分享到朋友圈 onShareTimeline(res) { return { title: this.timeItem, path: '/pages/index/index', type: 0, summary: "", imageUrl: '' } },以上就是画海报以及分享的全部过程了，另有一个点： 就是分享朋友的地址path: '/subPackage/index/like_details?id=' + this.shareId + '&type=1' 这里这个加个type=1是因为点击分享进入小程序的是个详情页，可能会出现点击左上角返回不能返回首页，所以加上这个type可以在分享页加个判断 onLoad(option) { if(option.type && option.type==1){ //分享来的页面 this.shareType = 1 } }, //左上角的点击返回事件加判断，当是分享进入的时候回到首页 goBack(){ if(this.shareType==1){ uni.switchTab({ url:'/pages/index/index' }) }else{ uni.navigateBack() this.shareType = 0 } }, |
【本文地址】
公司简介
联系我们