小程序生成海报，easy-canvas, painting参数使用demo

微信小程序不支持直接分享到朋友圈简直是一个大坑，最开始自己写了一个原始版本的canvas海报生成方式，结果发现生成的海报不是变形就是不适配所有屏幕，着实头疼了不少时间，前端实在太菜，偶然下载了一个电商小程序，发现其中使用的海报生成组件着实亮瞎我的近视眼，研究了下，简直是生成海报的一大福音。

组件名称：easy-canvas

组件GitHub开源地址：https://github.com/AfanSama/easy-canvas

组件实战效果图：

组件使用方式【复制于作者说明】：

git clone https://github.com/AfanSama/easy-canvas 到本地
把 components 中的 easy-canvas 拷贝到自己项目下。

在使用页面注册组件

{"usingComponents": {"easy-canva": "/components/easy-canva/easy-canva"}
}

在页面 **.wxml 文件中加入如下代码
```
<easy-canvas painting="{{painting}}" bind:getImage="eventGetImage"/>
```
painting 是需要传入的 json。 getImage 方法是绘图完成之后的回调函数，在 event.detail 中返回绘制完成的图片地址。

组件参数【复制于作者说明】：

数据对象的第一层需要三个参数: width、height、mode、views。配置中所有的数字都是没有单位的。这就意味着 canvas 绘制的是一个比例图。具体显示的大小直接把返回的图片路径放置到 image 标签中即可。

mode 可选值有 same, 默认值为空，常规下尽量不要使用。如要使用请看 Q&A的第1点。

当前可以绘制3种类型的配置: image、text、rect、roundrect。配置的属性基本上使用的都是 css 的驼峰名称，还是比较好理解的。

image（图片）

属性	含义	默认值	可选值
url	绘制的图片地址，可以是本地图片，如：`/images/1.jpeg`
top	左上角距离画板顶部的距离
left	左上角距离画板左侧的距离
width	要画多宽	0
height	要画多高	0
borderRadius	是否圆形	0	true
opacity	图片透明度	100	1-100(对应百分比)

text（文本）

属性	含义	默认值	可选值
content	绘制文本	''（空字符串）
color	颜色	black
fontSize	字体大小	16
textAlign	文字对齐方式	left	center、right
lineHeight	行高，只有在多行文本中才有用	20
top	文本左上角距离画板顶部的距离	0
left	文本左上角距离画板左侧的距离	0
breakWord	是否需要换行	false	true
MaxLineNumber	最大行数，只有设置 `breakWord: true` ，当前属性才有效，超出行数内容的显示为...	2
width	和 `MaxLineNumber` 属性配套使用，`width` 就是达到换行的宽度
bolder	是否加粗	false	true
textDecoration	显示中划线、下划线效果	none	underline（下划线）、line-through（中划线）

rect (矩形，线条)

属性	含义	默认值
background	背景颜色	black
top	左上角距离画板顶部的距离
left	左上角距离画板左侧的距离
width	要画多宽	0
height	要画多高	0
shadowBlur	阴影模糊	0
shadowColor	阴影颜色

roundrect(圆角矩形)

属性	含义	默认值
background	背景颜色	black
top	左上角距离画板顶部的距离
left	左上角距离画板左侧的距离
width	要画多宽	0
height	要画多高	0
radius	圆角度数	0
shadowBlur	阴影模糊	0
shadowColor	阴影颜色

项目所需数据：产品相关信息，如产品名，产品价格，假使我们已经有了产品id，并获取到了产品信息，赋值于product_info

项目核心参数：封装当前的产品id到菊花码中，用以其他人扫码后能直接进入对应产品详情

开始步骤：onload首先应获取对应二维码

获取菊花码有三个接口，生成的个数，应用场景分别不同，因为涉及产品分享，这个需要生成的个数不能限制，开发传送门：

wxacode.getUnlimited接口生成的个数不限，开发文档

https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.getUnlimited.html

返回数据：会直接返回图片二进制内容

注意：

POST 参数需要转成 JSON 字符串，不支持 form 表单提交。
接口只能生成已发布的小程序的二维码
调用分钟频率受限（5000次/分钟），如需大量小程序码，建议预生成

服务端调用接口生成方式：生成的符合规范的base64数据，接下来就需要前端去处理即可。

public function get_eq(){$ACCESS_TOKEN = $this->get_all_access_token();  //全局调用token，自行获取并存储$url = "https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token={$ACCESS_TOKEN}";$array = ['page' => I("page"),'scene' => I("scene"),'is_hyaline' => true,];$eq_info = $this->_requestPost($url,json_encode($array),'post');$base64_image ="data:image/jpeg;base64,".base64_encode($eq_info);$back_array  = ['img_url' => $base64_image];return $this->renderSuccess(compact('back_array'));
}public function _requestPost($url, $data, $ssl=true) {//curl完成$curl = curl_init();//设置curl选项curl_setopt($curl, CURLOPT_URL, $url);//URL$user_agent = isset($_SERVER['HTTP_USER_AGENT']) ? $_SERVER['HTTP_USER_AGENT'] : 'Mozilla/5.0 (Windows NT 6.1; WOW64; rv:38.0) Gecko/20100101 Firefox/38.0 FirePHP/0.7.4';curl_setopt($curl, CURLOPT_USERAGENT, $user_agent);//user_agent，请求代理信息curl_setopt($curl, CURLOPT_AUTOREFERER, true);//referer头，请求来源curl_setopt($curl, CURLOPT_TIMEOUT, 30);//设置超时时间//SSL相关if ($ssl) {curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);//禁用后cURL将终止从服务端进行验证curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 2);//检查服务器SSL证书中是否存在一个公用名(common name)。}// 处理post相关选项curl_setopt($curl, CURLOPT_POST, true);// 是否为POST请求curl_setopt($curl, CURLOPT_POSTFIELDS, $data);// 处理请求数据// 处理响应结果curl_setopt($curl, CURLOPT_HEADER, false);//是否处理响应头curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);//curl_exec()是否返回响应结果// 发出请求$response = curl_exec($curl);if (false === $response) {echo '<br>', curl_error($curl), '<br>';return false;}curl_close($curl);return $response;
}

获取对应菊花码：

Page({/*** 页面的初始数据*/data: {goods_id:1,eq_img:'',pro_path:'',shareImage:'',painting: {},pop:false,},onShow:function(){let _this = this;_this.get_eq();
},//获取二维码
get_eq:function(){let _this = this;App._get('wxapp/get_eq', {page:'pages/goods/index',scene:'goods_id='+_this.data.goods_id}, function(result) {/*处理base64图片*/const fsm = wx.getFileSystemManager();const FILE_BASE_NAME = 'tmp_base64src';function base64src(base64data) {return new Promise((resolve, reject) => {const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];if (!format) {reject(new Error('ERROR_BASE64SRC_PARSE'));}const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;const buffer = wx.base64ToArrayBuffer(bodyData);fsm.writeFile({filePath,data: buffer,encoding: 'binary',success() {console.log(filePath)_this.setData({eq_img:filePath});resolve(filePath);},fail() {reject(new Error('ERROR_BASE64SRC_WRITE'));},});});};base64src(result.data.back_array.img_url);});
},

至此，我们需要的大部分数据都获取到了

wxss:

/*邀请组件*/
.map-pop{position: fixed;bottom: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, .6);overflow: hidden;padding: 20rpx 30rpx;box-sizing: border-box;  z-index: 999;}
.share-image {width: 560rpx;height: 740rpx;margin: 200rpx 66rpx 30rpx;}
.save{width:560rpx;height:70rpx;line-height:70rpx;font-size:30rpx;margin-bottom:30rpx;}
.clone{width:560rpx;height:70rpx;line-height:70rpx;font-size:30rpx;}

js:

//触发生成海报generatePoster: function () {this.setData({pop: true});console.log(this.data.shareImage);if (this.data.shareImage == '') {wx.showLoading({title: '生成中'});this.eventDraw();}},//生成海报eventDraw: function () {let _this = this,shop_price = _this.data.goods.shop_price, //产品价格goods_name = _this.data.goods.goods_name, //产品名称pro_path = _this.data.goods.original_img; //产品图片eq_img = _this.data.eq_img, //二维码if (_this.data.eq_img == '') {wx.showLoading({title: '二维码还未生成，请重试'});return false;}else{_this.setData({painting: {width: 560,height: 740,clear: true,views: [{type: 'rect',top: 0,left: 0,width: 560,height: 740,background:'#ffffff'},{type: 'image',url: pro_path,top: 15,left: 15,width: 530,height: 530},{type: 'image',url: eq_img,top: 575,left: 410,width: 125,height: 125},{type: 'image',url: '../../images/logo.png',top: 575,left: 20,width: 125,height: 125},{type: 'text',content: goods_name,fontSize: 24,lineHeight: 34,color: '#727272',breakWord:true,MaxLineNumber:2,width:200,top: 570,left: 160,bolder: true},{type: 'text',content: '惊喜价:￥'+shop_price,fontSize: 30,lineHeight: 30,color: '#d13106',top: 650,left: 160,bolder: true},{type: 'text',content: '长按图片识别图中二维码',fontSize: 22,lineHeight: 30,color: '#727272',top: 700,left: 280,textAlign:'center'},]}});}},//关闭海报层clone: function() {this.setData({pop: false});},//获取图片eventGetImage: function (event) {wx.hideLoading()const { tempFilePath, errMsg } = event.detailif (errMsg === 'canvasdrawer:ok') {this.setData({shareImage: tempFilePath})}},//保存图片eventSave: function () {wx.saveImageToPhotosAlbum({filePath: this.data.shareImage,success(res) {App.common.successToShow('保存图片成功');}})},

至此，点击分享：