目前,腾讯还没有这个接口,曲线救国的方式就是先把内容画到canvas内,然后在把canvas转化成图片,保存到手机相册。为了便于在多个地方使用这个功能,需要将其做成组件component。然后哪里需要就搬到哪里。但是这样操作,就会遇到几个躲不过的巨坑。巨坑一:始终无法将内容(图片或者文字)绘制到画布上,始终显示空白。错误用法:let ctx = wx.createCanvasContext(‘myCanvas’);正确用法比错误用法多了一个thislet ctx = wx.createCanvasContext(‘myCanvas’, this);巨坑二:画布上绘制完毕。,无法导出图片。正确用法:依然需要传一个this进去wx.canvasToTempFilePath({},this)巨坑三:保存图片是异步的,建议加适当的延时wxml<canvas style=”width: {{windowWidth}}px; height: {{windowHeight}}px;” canvas-id=”myCanvas”></canvas>index.js// components/shareImg/index.jsconst app = getApp();Component({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { windowWidth: 750, windowHeight: 1334, pixelRatio: 1, drawInfo: { type: Object, value: { x: 0, y: 0, w: 750, h: 1334, color: ‘#f00′, fontSize: ’34’, bg:{ src: ‘/static/settings/imgBg.png’, x: 0, y: 0, w: 750, h: 1334, }, logo: { x: 0, y: 660, w: 320, h: 68 }, title: { y: 1016, }, wxCode: { x: 180, y: 1150, w: 160, h: 160 }, } }, shareData: { type: Object, value: { title: ‘苏州速迈医疗设备有限公司’, hallNo: ‘E01-04’, logo: ‘/static/pro/logo.png’, wxCode: ‘/static/pro/wxCode.png’ }, }, }, ready: function(e) { this.init(); // this.drawImg(); this.drawCanvas(); }, /** * 组件的方法列表 */ methods: { // 获取常用的属性 init: function() { let that = this; wx.getSystemInfo({ success: function(res) { that.setData({ windowWidth: res.windowWidth, windowHeight: res.windowHeight, pixelRatio: res.pixelRatio, }); } }); // console.log(“that.data.windowHeight”, that.data.windowHeight); // console.log(“that.data.windowWidth”, that.data.windowWidth); that.data.drawInfo.value.w = that.data.windowWidth; that.data.drawInfo.value.h = that.data.windowHeight; }, drawCanvas: function() { var that = this; let ctx = wx.createCanvasContext(‘myCanvas’, this); // 屏幕系数比,以设计稿375*667(iphone7)为例 let pixelRatio = this.data.pixelRatio; console.log(“pixelRatio:”,pixelRatio); // 文字基础设置 var color = that.data.drawInfo.value.color , fz = that.data.drawInfo.value.fontSize / pixelRatio , centerX = that.data.drawInfo.value.w / pixelRatio ,leftX = this.leftX() ; // 背景图绘制 var bg={ src: that.data.drawInfo.value.bg.src, x: that.data.drawInfo.value.x, y: that.data.drawInfo.value.y, w: that.data.drawInfo.value.w, h:that.data.drawInfo.value.h } ctx.drawImage(bg.src, bg.x, bg.y, bg.w, bg.h); // logo绘制 var logo = { src: that.data.shareData.value.logo, y: that.data.drawInfo.value.logo.y / pixelRatio, w: that.data.drawInfo.value.logo.w / pixelRatio, h: that.data.drawInfo.value.logo.h / pixelRatio } ctx.drawImage(logo.src, this.leftX(logo.w,bg.w), logo.y, logo.w, logo.h); // 二维码绘制 var wxCode={ src: that.data.shareData.value.wxCode, x: that.data.drawInfo.value.wxCode.x / pixelRatio, y: that.data.drawInfo.value.wxCode.y / pixelRatio, w: that.data.drawInfo.value.wxCode.w / pixelRatio, h: that.data.drawInfo.value.wxCode.h / pixelRatio } ctx.drawImage(wxCode.src, wxCode.x, wxCode.y, wxCode.w, wxCode.h); //文字绘制 // 标题 var title={ y :that.data.drawInfo.value.title.y / pixelRatio, content : that.data.shareData.value.title }; // hallNo 展位号 var hallNo={ y : title.y+ 60 / pixelRatio, content : that.data.shareData.value.hallNo } ctx.setFontSize(fz); ctx.setFillStyle(color); ctx.setTextBaseline(‘middle’); ctx.setTextAlign(‘center’) ctx.fillText(title.content, centerX, title.y); ctx.fillText(hallNo.content, centerX, hallNo.y); ctx.draw(false,function(){ setTimeout(function(){ that.canvasToImage(); },1000) }); }, // 居中绘制时的left值 leftX: function(wEl, wBg) { return (wBg – wEl) / 2; }, // 转canvas为图片 canvasToImage() { var that = this wx.canvasToTempFilePath({ // x: 0, // y: 0, // width: that.data.windowWidth, // height: that.data.windowWidth, // destWidth: that.data.windowWidth * that.data.pixelRatio, // destHeight: that.data.windowWidth * that.data.pixelRatio, canvasId: ‘myCanvas’, success: function(res) { console.log(res); console.log(‘朋友圈分享图生成成功:’ + res.tempFilePath) wx.previewImage({ current: res.tempFilePath, // 当前显示图片的http链接 urls: [res.tempFilePath] // 需要预览的图片http链接列表 }) }, fail: function(err) { console.log(‘失败’) console.log(err.errMsg) } }, that) }, }})小程序
微信小程序分享朋友圈遇到的巨坑
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序分享朋友圈遇到的巨坑
相关推荐
【微信小程序】支付过程详解
公众号再次改版高坪区E企盈小程序小程序又多了一个入口
数据恢复软件(二):用C++重写恢复B乐都县E企盈小程序MP位图文件的小程序
微信小程序加载图片时,湘桥区E企盈小程序先拉长,再恢复正常
转:(很有用)有多个按钮,点击一个变色,点击另吴中区E企盈小程序一个变色,原来的恢复颜色的方法
第12课微信小程序Component构造器自道里区E企盈小程序定义组件:
导航中的南海区E企盈小程序小竖线总结
小程序:after实现德格县E企盈小程序1px纵向分割线
汉沽区E企盈小程序企业微信内测朋友圈和客户群功能:小程序C位出道!
小程序运行加载密山市E企盈小程序机制
小程通城县E企盈小程序序中间有字的分隔线
公众号和小程序可以同名了名称支持同主体复盘锦E企盈小程序用
最新评论
独特万商直播系统,直播系统技术开发公司
万商直播系统开发公司
优秀的团队,万商直播管理系统
不错的小程序案例
优秀的团队,不错的服务!
讲的很好
主播长的帅气
好系统好服务