小程序canvas绘制商品海报实现分享朋友圈

效果图：

实现步骤就是点击生成图片在canvas画布中画出一张海报然后保存在本地在imags标签中展示，此处尽可能的把canvas组件隐藏但是不能用wx：if。用hidden或者display属性
wxml

<button bindtap='gotoSubmit'>生成图片</button>
<!-- 弹框 -->
<view class='tankuang2' wx:if="{{showhaibao}}"><view class='container1' bindtap="previewImg"><image style="width:100%;height:80%"  src="{{imagePath}}" ></image></view>
</view>
<canvas style="width:{{windowW}}px;height:{{windowH}}px;display:{{maskHidden?'none':''}}" canvas-id="mycanvas" />

wxss

button{width: 100%;position: fixed;z-index: 1;bottom:0;
}
.tankuang2{height: 100%;width: 100%;background-color: rgba(0, 0, 0, 0.6);z-index: 999999;position: absolute;right: 0;bottom: 0;display: flex;align-items: center;justify-content: center;
}
.tankuang2 .container1{height: 90%;width: 90%;background-color:#FFF;}

第一大坑

我在js中注释的代码很重要，实际开发中绘制商品海报必然是用网络图片，但经过多次尝试网络图片是不可以直接绘制在canvas画布上的，就必须要把他缓存下来，弄一个本地路径，此处我用本地图片所以就注释了

第二大坑

经过多次测试发现当你第一次点击生成图片的时候，它会生成一张透明的图片，根本看不到，必须要点击两次，就是调用两次生成图片的方法才可以看到生成的图片，我这里为了只让他点击一次就生成图片，在小程序生命周期函数onReady先调用一次初始化一下图片。


Page({data: {showhaibao：false，//隐藏显示maskHidden: true,//隐藏显示},onLoad: function(options) {// 此处获取设备的宽高。canvas绘制的图片以次宽高为准var _this = this;wx.getSystemInfo({success: function(res) {console.log(res)_this.setData({windowW: res.windowWidth ,windowH: res.screenHeight,})},})// wx.downloadFile({//     url: 网络图片地址必须要在小程序中配备合法域名,//     success: function (res1) {//         console.log(res1.tempFilePath)//         //缓存商品图片//         _this.setData({//             img1: res2.tempFilePath//         })//     }// })// wx.downloadFile({//     url: 网络图片地址必须要在小程序中配备合法域名,//     success: function (res1) {//         console.log(res1.tempFilePath)//         //缓存二维码图片//         _this.setData({//             img2: res2.tempFilePath//         })//     }// })},onReady: function() {// 页面渲染完成this.createNewImg();//创建初始化图片},//将金额绘制到canvas的固定setMoney: function(context) {var money ='￥29.9'context.setFontSize(24);context.setFillStyle("red");context.fillText(money, 40, 360);context.stroke();},//将说明绘制到canvas固定setSuoming :function(context){var Suoming="长按识别小程序码访问"context.setFontSize(18);context.setFillStyle("#484a3d");context.fillText(Suoming, 15, 460);context.stroke();},//将说明2绘制到canvas固定setSuoming1: function (context) {var Suoming = "子谦出品"context.setFontSize(18);context.setFillStyle("#484a3d");context.fillText(Suoming, 50, 510);context.stroke();},//将标题绘制到canvas的固定setName: function(context) {var name = "ONLY2018夏季新款蕾丝短袖连衣裙"context.setFontSize(15);context.setFillStyle("#67695b");context.fillText(name, 40, 320);context.stroke();},//将canvas转换为图片保存到本地，然后将图片路径传给image图片的srccreateNewImg: function() {var _this = this;var context = wx.createCanvasContext("mycanvas");context.setFillStyle('#FFF')console.log(this.data.windowW, this.data.windowH)context.fillRect(0, 0, this.data.windowW, this.data.windowH)var path = "这里放你的本地图片路径，或者网络图片缓存在本地的路径";  //详细看onLoad函数注释部分context.drawImage(path, 30, 20, 300, 250);  //这里是商品图片this.setSuoming(context);this.setName(context);this.setMoney(context);this.setSuoming1(context);context.drawImage(path, 205, 430, 150, 150);//这里是二维码图片context.draw(_this.getImg())},//将生成好的图片保存到本地  下面这句注释是文档中的原话。// tip: 在 draw 回调里调用canvasToTempFilePath方法才能保证图片导出成功。getImg() {var _this = this;wx.canvasToTempFilePath({canvasId: 'mycanvas',success: function success(res) {_this.setData({imagePath: res.tempFilePath,});}});},//点击图片进行预览，长按保存分享图片previewImg: function(e) {var img = this.data.imagePathwx.previewImage({current:img, // 当前显示图片的http链接urls: [img] // 需要预览的图片http链接列表})},gotoSubmit: function(e) {var _this=thisthis.setData({maskHidden:false,showhaibao:true})wx.showToast({title: '图片生成中...',icon: 'loading',duration: 2000});setTimeout(function() {wx.hideToast()_this.createNewImg();}, 2000)}})

小程序canvas绘制商品海报实现分享朋友圈相关推荐

小程序canvas绘制自适应海报并生成图片
效果图橘子可以放上小程序码或者其他什么码代码: wxml  <canvas style="width: {{canvasWidth}}px; heig ...
【修复日常bug】微信小程序canvas画商品海报出现个别用户无法生成的情况
微信小程序,在使用canvas画海报的时候,会导致个别用户无法生成的情况,你们可以尝试把绘画某些块的代码注释掉再进行扫码调试,我前几天就遇到个别客户无法生成商品海报的情况,刚开始是以为上一个同事留的坑 ...
微信小程序-canvas绘制文字实现自动换行
微信小程序-canvas绘制文字实现自动换行在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为我们只能设置文本的最大宽度,这就产生 ...
微信 html 字体自动换行,详解微信小程序-canvas绘制文字实现自动换行
在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvascontext.filltext参数为我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...
小程序Canvas绘制图片太大，自动闪退，安卓会有crash问题
2019独角兽企业重金招聘Python工程师标准>>> 问题说明: 目前小程序Canvas版本还有不少bug,性能较低. 对于图片太大使用ctx.drawImage(imgpath, ...
小程序canvas绘制微信头像
微信小程序canvas是不支持绘制网络图片的,所以逻辑就是先下载到本地,使用本地临时路径去绘制: // 查看是否授权wx.getSetting({success(res) {if (res.authS ...
小程序 canvas绘制名片、海报
记录一下微信小程序使用canvas绘制名片功能,绘制海报.分享页等也可以使用这里使用的是旧版canvas的方法,这里生成的时候,使用pc客户端看着生成的图片是没有问题的,但是真机上生成的是有白边的( ...
微信小程序Canvas绘制图案（生成海报、朋友圈海报）
现在小程序生成海报是很常见的,例如生成打卡海报.生成文案.生成宣传图.生成推广图等,都是少不了一个技术,就是图片绘制,有些是通过前端Canvas绘制,有些是通过后端绘制,当然前端Canvas绘制是比较 ...
小程序画布Canvas生成海报，分享朋友圈
一使用场景: 小程序内,想要分享海报到朋友圈,附带小程序码,达到转发引流的目的. /*** 用户点击右上角分享*/onShareAppMessage: function() {},shareBook ...

小程序canvas绘制商品海报实现分享朋友圈

小程序canvas绘制商品海报实现分享朋友圈

小程序canvas绘制商品海报实现分享朋友圈相关推荐

最新文章

热门文章