wxa-plugin-canvas组件文档点击下方卡片链接
wxa-plugin-canvas/jasondu/wxa-plugin-canvas/jasondu/wxa-plugin-canvas
按照组件文档安装
我是用npm包安装的，如果不指定版本号直接安装下来是最新版本号
页面内引入组件
异步生成海报
有些场景可能需要发起ajax请求后才能获取生成海报的数据，这里提供了异步生成海报的方式。
只需要引入组件中的poster/poster.js，如下调用就行了
我是这样引入poster.js的
自定义组件异步生成海报
1、封装配置项函数
/*** 全局分享到朋友圈海报配置* @param {opt} 海报封面，标题必要信息等**/P(opt){let _this = this;const config = {width: 750,height: 1054,backgroundColor: '#ffffff',debug: false,pixelRatio: 100,texts: [{x: 36,y: 614,fontSize: 32,baseLine: 'middle',text: '¥',lineNum: 1,color: '#AE221D',fontWeight:"bold",zIndex:1},{x: 68,y: 610,baseLine: 'middle',text:opt.price,fontWeight:"bold",fontSize: 48,color: '#AE221D',zIndex:1},{width: 420,x: 36,y: 664,baseLine: 'middle',text: opt.title,lineNum: 2,fontSize: 28,fontWeight:"500",lineHeight:42,color: '#505050',zIndex:1},],images: [{width: 750,height: 1054,x: 0,y: 0,url: this.C('baseUrl')+'/Public/weapp/mall/posterbg.png',zIndex:1},{width: 468,height: 468,x: 141,y: 75,url: opt.productimg,zIndex:1},{width: 191,height: 191,x: 527,y: 580,url:opt.qrcode,zIndex:1}]}opt.callback(config);},
2、调用封装的函数，生成海报
/*** 异步生成海报*/onCreatePoster() {var _this = this;if(this.hashare){Poster.create(false);return;}this.P({scene:'&id='+_this.id+'&openid='+this.$app.$options.globalData.openid,//也可以自定义参数title:_this.goodsData.title,price:_this.goodsData.productprice,productimg:_this.goodsData.thumb,qrcode:'https://lottery-/web/resource/images/mall/login_bg2.png',callback:function(v){if(v==-1){wx.showToast({title: "生成海报失败",icon: 'none',duration: 2000});return;}_this.hashare = true;_this.$wx.setData({ posterConfig: v},function(){Poster.create(true); // 入参：true为抹掉重新生成}); }});},
3、接收解析参数
onLoad(obj) {if(obj.scene){const scene = decodeURIComponent(obj.scene);let strs=scene.split('&');let theRequest = new Object();for (let i = 0; i < strs.length; i++) {theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];}obj = theRequest;}}
海报效果
使用组件遇到的问题
1、版本号问题：1.1.12版本生成不了海报，版本降级1.1.11就可以了
2、注意图片一定要设层级，不然图片不显示你会以为是图片加载不出来，然而只是层级不对图片被盖着了而已。
