微信小程序canvas商品分享海报

先上效果图

1、wxml

 <button class="footer-item" bindtap="creatShareImageTap">分享</button><view class='share-mask' hidden="{{shareMask == false}}" catchtouchmove='true'></view><view class='canvas-box'><canvas canvas-id="goods-share" style='width:750rpx;height:1206rpx;position:fixed;left:9999px'></canvas></view>

2、wxss

 .share-mask{width: 100%;height: 100%;position: fixed;z-index: 998;left: 0;top: 0;background: #000;opacity: 0.5;}.imagePathBox{position: fixed;top: 0;right: 0;bottom: 0;z-index: 999;width: 100%;height: 100%;/* width: 264px;height: 376px; */left:0;/* margin-left:-132px; */
}
.shengcheng{width: 70.4%;height: 62.3%;position: fixed;top: 164rpx;left: 50%;margin-left: -35.2%;z-index: 10;
}
.imagePathBox .share-btns{display: flex;justify-content: space-between;position: fixed;bottom:150rpx;width: 72.4%;left:13.8%;z-index: 9999;
}
.imagePathBox .share-btn{font-size: 32rpx;background-color: #FABE00;color: #333;border-radius: 40rpx;width: 43%;height: 80rpx;bottom:30rpx;padding:0;margin: 0;
}
.imagePathBox .share-btn::after{border:none;
}
.close-btn{top: 0;left: 0;right: 0;bottom: 0;z-index: 999;position: fixed;height: 20px;
}
.closeBtn{width: 44rpx;height: 44rpx;text-align: center;vertical-align: middle;position: fixed;top:84rpx;right:84rpx;
}
.previewimg image{ width:100%; height:100%; }

3、js

creatShareImageTap(){var rpx=this.data.rpx;//适配比例this.setData({shareMask:false})const url=this.data.myUrl//const url='https://ylhdev.oss-cn-beijing.aliyuncs.com/20200426171219.png'//开始制作this.drawCanvas(this.data.details,url,rpx)
},
drawCanvas: function (sourceData,url,rpx){wx.showLoading({title: '分享图生成中...'})var that=this;let promise1 = new Promise(function (resolve, reject) {wx.getImageInfo({src: url,success: function (res) {resolve(res);}})});let promise2 = new Promise(function (resolve, reject) {wx.getImageInfo({src: sourceData.goodsPicList[0].goodsPicUrl,success: function (res) {resolve(res);}})});let promise3 = new Promise(function (resolve, reject) {wx.getImageInfo({src: that.data.userInfo.avatarUrl,success: function (res) {resolve(res);}})});Promise.all([promise1, promise2,promise3]).then(res=>{const ctx = wx.createCanvasContext('goods-share');ctx.setFillStyle("#fff")ctx.fillRect(0, 0, 375*rpx, 583*rpx)// ctx.strokeStyle = "white";// ctx.strokeRect(0,0,375*rpx, 583*rpx);ctx.setFillStyle('#fff');ctx.fillRect(0, 375*rpx, 425*rpx, 255*rpx);ctx.drawImage(res[0].path, 272*rpx, 485*rpx, 82*rpx, 82*rpx)ctx.drawImage(res[1].path, 0, 0, 375*rpx, 425*rpx)
ctx.save() // 对当前区域保存
ctx.beginPath() // 开始新的区域
ctx.arc(28.5*rpx, 560*rpx, 18*rpx, 0, 2 * Math.PI);
ctx.clip();  // 从画布上裁剪出这个圆形
ctx.drawImage(res[2].path,11.5*rpx, 542*rpx, 35*rpx, 35*rpx)// 把图片填充进裁剪的圆形
ctx.restore() // 恢复//绘制说明ctx.setTextAlign('left')ctx.setFillStyle('#333')ctx.font='normal bold 16px sans-serif'// ctx.setFontSize(16)that.dealWords({ctx: ctx,//画布上下文fontSize: 16,//字体大小word: '         '+sourceData.goodsName,//需要处理的文字maxWidth: 335*rpx,//一行文字最大宽度x: 13*rpx,//文字在x轴要显示的位置y: 425*rpx,//文字在y轴要显示的位置maxLine: 2//文字最多显示的行数})if(sourceData.goodsType==2){ctx.setFillStyle('#FF5850')ctx.fillRect(11*rpx, 434*rpx, 33*rpx, 18*rpx)ctx.setTextAlign('left')ctx.setFillStyle('#fff')// ctx.setFontSize(14)ctx.font='normal normal 14px sans-serif'ctx.fillText('严选', 13*rpx, 447*rpx)}ctx.setTextAlign('left')ctx.setFillStyle('#F52340')// ctx.setFontSize(14)ctx.font='normal normal 14px sans-serif'ctx.fillText('特权价￥', 11*rpx, 501*rpx)ctx.setTextAlign('left')ctx.setFillStyle('#F52340')ctx.setFontSize(22)ctx.fillText(sourceData.specialPrice||'0.00',70*rpx, 503*rpx)ctx.setLineWidth(1);ctx.setStrokeStyle('#999')if(JSON.stringify(sourceData.selectPrice).length>2&&sourceData.selectPrice>10){ctx.moveTo(58*rpx, 521*rpx);ctx.lineTo(86*rpx, 521*rpx);}else{ctx.moveTo(58*rpx, 521*rpx);ctx.lineTo(80*rpx, 521*rpx);}ctx.setTextAlign('left')ctx.setFillStyle('#999')// ctx.setFontSize(14)ctx.font='normal normal 14px sans-serif'ctx.fillText('售价￥  ' + sourceData.selectPrice,11*rpx,527*rpx)ctx.setTextAlign('left')ctx.setFillStyle('#666')// ctx.setFontSize(14)ctx.font='normal normal 14px sans-serif'ctx.fillText(that.data.userInfo.nickName, 51*rpx, 557*rpx)ctx.setTextAlign('left')ctx.setFillStyle('#999')// ctx.setFontSize(10)ctx.font='normal normal 10px sans-serif'ctx.fillText('邀请好友享受内部优惠价', 51*rpx, 573*rpx)ctx.setTextAlign('left')ctx.setFillStyle('#999')ctx.setFontSize(10)ctx.fillText('长按识别', 290*rpx, 584*rpx)ctx.stroke()ctx.draw(false,function(){that.share2();})})
},
//文字处理
dealWords: function (options) {options.ctx.setFontSize(options.fontSize);//设置字体大小var allRow = Math.ceil(options.ctx.measureText(options.word).width / options.maxWidth);//实际总共能分多少行var count = allRow >= options.maxLine ? options.maxLine : allRow;//实际能分多少行与设置的最大显示行数比，谁小就用谁做循环次数var endPos = 0;//当前字符串的截断点for (var j = 0; j < count; j++) {var nowStr = options.word.slice(endPos);//当前剩余的字符串var rowWid = 0;//每一行当前宽度  if (options.ctx.measureText(nowStr).width > options.maxWidth) {//如果当前的字符串宽度大于最大宽度，然后开始截取for (var m = 0; m < nowStr.length; m++) {rowWid += options.ctx.measureText(nowStr[m]).width;//当前字符串总宽度if (rowWid > options.maxWidth) {if (j === options.maxLine - 1) { //如果是最后一行options.ctx.fillText(nowStr.slice(0, m - 1) + '...', options.x, options.y + (j + 1) * 24);  //(j+1)*18这是每一行的高度    } else {options.ctx.fillText(nowStr.slice(0, m), options.x, options.y + (j + 1) * 24);}endPos += m;//下次截断点break;}}} else {//如果当前的字符串宽度小于最大宽度就直接输出options.ctx.fillText(nowStr.slice(0), options.x, options.y + (j + 1) * 24);}}
},
//输出图像到canvas容器
share2: function () {var that = thiswx.canvasToTempFilePath({canvasId: 'goods-share',success: function (res) {console.log('share分享图--------',res)that.setData({imagePath: res.tempFilePath,shareMask:true})wx.hideLoading();},fail: function (res) {console.log(res)}})
},//预览previewImage1: function () {var that = thisvar wximg = that.data.imagePath;wx.previewImage({urls: Array(wximg)})
},

体验线上效果，关注下面云乐汇好物小程序，爆款京东商品，自购省分享赚

关注我个人微信公众号获取更多前端资讯

微信小程序canvas商品分享海报相关推荐

使用PHP的GD库绘制电商小程序的商品分享海报
GD(代表 Graphic Draw)是一个开源代码库,在 PHP 中创建和操作图像是必需的. 除了创建 JPEG.PNG 和 GIF 图像外,它还可以创建图形.图表和缩略图. 下面的例子是PHP使用 ...
微信小程序使用wxa-plugin-canvas分享海报和朋友圈
之前在写海报的时候自己也封装过一个,这里再给大家推荐一个组件wxa-plugin-canvas.目前就使用感来说还是不错的.这里有一个开源的地址,大家可以把它下载下来放进自己的组件中开源项目地址:h ...
uniapp微信小程序canvas生成简单海报并下载
今天项目接到个任务,就是手写canvas海报,并能下载图片.百度了很多海报组件,都不尽人意.萌生了自己手写海报的想法. 话不多说先贴文档 uni-app官网其实该文档和微信小程序类似最终效果,微信 ...
微信小程序实现生成分享海报案例
一.引入插件painter (1)克隆地址:https://gitcode.net/mirrors/Kujiale-Mobile/Painter (2)下载的painter放到小程序的componen ...
小程序Canvas生成分享海报避坑指南
关于小程序使用Canvas画布生成分享海报,网上有很多的教程,但是结合到自己的业务上面就BUG百出了接下来分享一下我的经历微信出了新的api 微信公众平台目前更新不是太即使,查问题好多帖子都是一两 ...
记一次微信小程序canvas 2d 生成海报问题
因项目需要,需要制作海报分享. 如: 事情总是不是那么顺利,canvas生成海报生成中遇到各种奇葩问题.一开始是 wx.canvasToTempFilePath 中获取不到canvas对象,调用返回 ...
微信小程序非webview分享给好友及生成分享海报
微信小程序非webview分享给好友及分享海报 UI展示点击分享显示分享sheet: 点击生成海报,展示海报预览图片: 组件目录结构: 代码 works文件 woks.json中引入: " ...
微信小程序 canvas type = 2d 绘制海报心得（包括怎么绘制图片和圆角图片和圆角矩形等）
微信小程序 canvas type=2d 使用心得为了方便这里我封装成了一个component 然后说说怎么使用最新的方法(使用方法类似于html中的canvas可以进行参考)获取--canvas ...
mpvue 微信小程序canvas生成海报
mpvue 微信小程序canvas生成海报效果贴代码 html <template><view class="poster ...

微信小程序canvas商品分享海报

微信小程序canvas商品分享海报相关推荐

最新文章

热门文章