微信小程序 canvas 合成海报

1、先百度了解canvas相关文档；
2、了解微信小程序授权登录与授权登录下保存图片权限问题；
3、canvas标签属性不能是display：none； <canvas class="canvas_box" wx:if="{{isShowCanvase}}" style="width:{{systemInfo.screenWidth*2}}px;height:{{systemInfo.screenWidth*2}}px;" canvas-id="canvasPoster"></canvas>
4、获取当前使用手机的像素比例

wx.getSystemInfo({success(res){// 通过像素比计算出画布的实际大小（330x490）是展示的出来的大小// this.width = 330 * res.pixelRatio// this.height = 490 * res.pixelRatiothat.setData({statusBarHeight: res.statusBarHeight})}})

5、查询当前是否有权限；

 saveImg() {// 保存图片 获取相册权限let that = this;// successwx.getSetting({success(res) {console.log("res:", res);if (!res.authSetting['scope.writePhotosAlbum']) {that.firstGetHeadUrl();} else {that.firstGetHeadUrl();}})},

6、将网络文件路径转换为临时路径，一定要临时路径；

firstGetHeadUrl() {let that = this;// 获取二维码地址// //1会员 2商家 3区域合伙人 -->let url = ''if(that.data.userInfo.identity === '1') {url = that.data.userInfo.invitatCodeImage;} else {// 区域合伙人url = that.data.userInfo.partnerInvitCodeImage;}wx.downloadFile({url: url, //仅为示例，并非真实的资源 // https://wx.qlogo.cn/mmopen/vi_32success: (downloadFileRes) => {// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容console.log('downloadFileRes:', downloadFileRes);if (downloadFileRes.statusCode === 200) {that.drawImagefun(downloadFileRes.tempFilePath)// that.getBgUrl(downloadFileRes.tempFilePath);}},fail(fail) {console.log(fail);}})},

7、利用canvas合成对应的海报；

 drawImagefun(locationHeadUrl, locationBgUrl) {let that = this;// canvas对象生成规则；let ctx = wx.createCanvasContext('canvasPoster', this)// let canvasW = 773 // 画布的真实宽度// let canvasH = 1341 //画布的真实高度let canvasW = this.data.systemInfo.screenWidth // 画布的真实宽度// let canvasH = this.data.systemInfo.screenHeight //画布的真实高度let canvasH = this.data.systemInfo.screenWidth //画布的真实高度// 头像和二维码大小都需要在规定大小的基础上放大像素比的比例后面都会 *this.systemInfo.pixelRatio// let headerW = 48 * this.data.systemInfo.pixelRatio// let headerX = (canvasW - headerW) / 2// let headerY = 40 * this.data.systemInfo.pixelRatiolet qrcodeW = 120 * this.data.systemInfo.pixelRatiolet qrcodeX = 128 * this.data.systemInfo.pixelRatiolet qrcodeY = 120 * this.data.systemInfo.pixelRatio// 填充背景// ctx.drawImage(that.data.locationBgUrl, 0, 0, canvasW*2, canvasH*2)ctx.drawImage(locationBgUrl, 0, 0, canvasW*2, canvasH*2)ctx.save()// 控制头像为圆形// ctx.setStrokeStyle('rgba(0,0,0,.2)') //设置线条颜色，如果不设置默认是黑色，头像四周会出现黑边框// ctx.arc(headerX + headerW / 2, headerY + headerW / 2, headerW / 2, 0, 2 * Math.PI)// ctx.stroke()//画完之后执行clip()方法，否则不会出现圆形效果// ctx.clip()// 将头像画到画布上var name = '邀请码：' + that.data.curCode;//绘制名字ctx.setFontSize(26);ctx.setFillStyle('#333');ctx.setTextAlign('center');ctx.fillText(name, 375, 210);ctx.stroke();// 绘制账号// var phone = this.data.visterInfo.phone;//绘制名字// ctx.setFontSize(22);// ctx.setFillStyle('#fff');// ctx.setTextAlign('left');// ctx.fillText(phone, 152, 228);// ctx.stroke();// 绘制头像 http://tmp/wx0ba96f4a1539fbd8.o6zAJs1B8BUcYzW-usej…qOltMolRxYofa97f2c3400f2f04dc93b40e09499459d.jpeg// ctx.drawImage(this.data.logoUrl, 30,70,50,50)// wx.showModal({//   title: 'that.data.locationHeadUrl drawImage',//   content: locationHeadUrl,// })// ctx.drawImage(locationHeadUrl, 58, 170, 70, 70)// 绘制logo// ctx.drawImage(that.data.logoUrl, canvasW  - 60, canvasH*2 -70, 24, 24);// ctx.setFontSize(16);// ctx.setFillStyle('#333');// ctx.setTextAlign('left');// ctx.fillText('遨游视界', canvasW  - 30, canvasH*2 - 50);ctx.stroke();// ctx.restore()// 绘制二维码ctx.drawImage(locationHeadUrl, qrcodeX, qrcodeY, qrcodeW, qrcodeW)ctx.save()ctx.draw()setTimeout(() => {//下面的13以及减26推测是因为在写样式的时候写了固定的zoom: 50%而没有用像素比缩放导致的黑边，所以在生成时进行了适当的缩小生成，这个大家可以自行尝试wx.canvasToTempFilePath({canvasId: 'canvasPoster',x: 13,y: 13,width: canvasW * 2 - 26,height: canvasH * 2 - 26,destWidth: canvasW * 2 - 26,destHeight: canvasH * 2 - 26,fileType: 'png',success: (res) => {console.log('canvasToTempFilePath res:', res);this.setData({poster: res.tempFilePath})wx.saveImageToPhotosAlbum({filePath: that.data.poster,success: (data) => {wx.showToast({title: '保存成功，快去朋友圈分享吧。',icon: 'success',duration: 4500})that.setData({isShowCanvase: false});},fail: (err) => {console.log('err:', err);if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {console.log("当初用户拒绝，再次发起授权")wx.openSetting({success(settingdata) {console.log(settingdata)if (settingdata.authSetting['scope.writePhotosAlbum']) {console.log('获取权限成功，给出再次点击图片保存到相册的提示。')} else {console.log('获取权限失败，给出不给权限就无法正常使用的提示')toastTip('获取权限失败，将无法保存图片！', 'none');}}})}},complete(res) {console.log("res2", res);}})}})}, 200)},

微信小程序 canvas 合成海报相关推荐

mpvue 微信小程序canvas生成海报
mpvue 微信小程序canvas生成海报效果贴代码 html <template><view class="poster ...
终于搞定微信小程序canvas分享海报
canvas drawer 做微信小程序中最好用的 canvas 绘图组件之一. 当前环境下,大家都非常需要分享到朋友圈这个功能,但是实现起来各有心酸(坑比较多),所以才有了如下的 canvas 绘图 ...
微信小程序canvas合成图片（海报）,生成的图片展示不出来，或者空白。
背景: 1.用户点击分享朋友圈,将二维码与一张背景图合成一张图片,然后将其显示. 2.用户点击保存图片将图片保存到手机相册里面. 问题: 用户点击分享盆友圈合成后的图片显示空白.控制台可以打印出来链接 ...
微信小程序 —— canvas生成海报图与分享
整体思路获取手机屏幕大小去依据设计尺寸比例调整 -wx.getSystemInfo 网络图片.base64图片保存到到本地临时文件路径 canvas绘制图片 - wx.createCanvasCon ...
微信小程序合成海报_微信小程序 canvas生成海报图片模糊问题
一.制作正常显示海报,生成二倍海报隐藏代码如下 {{sendName}} 保存图片 /*css*/ .btn { width: 300rpx; height: 90rpx; line-height: ...
微信小程序--canvas 画海报转发好友下载本地
获取本地手机的屏幕宽高(宽高需要按照自己实际需求计算) toCanvas() {let that = thiswx.getSystemInfo({success: function(res) {con ...
微信小程序 canvas type = 2d 绘制海报心得（包括怎么绘制图片和圆角图片和圆角矩形等）
微信小程序 canvas type=2d 使用心得为了方便这里我封装成了一个component 然后说说怎么使用最新的方法(使用方法类似于html中的canvas可以进行参考)获取--canvas ...
微信小程序分享生成海报
本文转自:微信小程序实现生成海报并且保存本地 - 张正-博客园 - 博客园 html: <view><image src="{{img}}" class='bgI ...
微信小程序 - 分享商品海报
我们在微信小程序中经常会使用到分享商品海报,或者是重绘微信小程序分享链的图片功能.实现该功能只要跟着如下几个步骤就可以快速实现啦!(本文示例代码使用的是uni-app,原生或者其他框架需要将uni前缀 ...

微信小程序 canvas 合成海报

微信小程序 canvas 合成海报相关推荐

最新文章

热门文章