分享朋友圈现在大家的通用做法就是通过Canvas生成一张图片后进行保存，然后自行转发朋友圈。最近项目有这个需求, 于是就记录一下。（老规矩，我的博客复制粘贴就好使）
如果想要海报上的二维码扫码完直接跳到指定的页面, 那么就需要生成一个带参数的二维码, 你需要看我的另一篇博客：微信小程序生成带参数的二维码以及小程序码
先看一下效果图：
index.wxml代码：
<view class="container"> <image src="{{shareImage}}" class="share-image"></image> <canvasdrawer painting="{{painting}}" class="canvasdrawer" bind:getImage="eventGetImage"/> <button bind:tap="eventDraw">绘制</button> <button bind:tap="eventSave">保存到本地</button></view>index.wxss代码：
.share-image { width: 600rpx; height: 810rpx; margin: 0 75rpx; padding: 1px; margin-top: 40px;}button { margin-top: 100rpx;}index.js代码：
Page({ data: { painting: {}, shareImage: '', }, onLoad() { this.eventDraw() }, eventDraw() { var that = this; wx.showLoading({ title: '绘制分享图片中', mask: true }) this.setData({ painting: { width: 375, height: 568, clear: true, views: [ //这个是一个纯白的图片,给整个画布一个白背景,要不然会有马赛克 { type: 'image', url: 'https://tjhaizhixian.com/weixin/item/bai.jpg', width: 375, height: 568 }, //边框,直接拿了一张图,当做边框 { type: 'image', url: 'https://tjhaizhixian.com/weixin/item/biankuang.png', width: 375, height: 568 }, //商品图 { type: 'image', url: 'https://tjhaizhixian.com/seafood/public/commercial/19/goodsimg/20191014/d4484c7f364078fffad452d2e158636b.jpg', width: 328, height: 328, top:20, left:22, }, //商品名称 { type: 'text', content: '产品名称产品名称产品名称产品名称产品名称产品名称11111111111111111111111111111111111111111111', fontSize: 20, lineHeight: 21, color: '#000000', textAlign: 'left', top: 360, left: 36, width: 290, MaxLineNumber: 2, breakWord: true, bolder: true }, //线条,同样也是用的图 { type: 'image', url: 'https://tjhaizhixian.com/weixin/item/xiantiao.png', width: 325, height: 5, top: 443, left:22 }, //商品价格 { type: 'text', content: '￥198.00', fontSize: 20, color: '#E62004', textAlign: 'left', top: 414, left: 36, bolder: true }, //店铺名称 { type: 'text', content: '店铺名称店铺名称', fontSize: 15, lineHeight: 21, color: '#7E7E8B', textAlign: 'left', top: 414, left: 267, width: 70, MaxLineNumber: 1, breakWord: true, }, // 文字, 打不出这个文字带阴影的效果, 所以也用的图 { type: 'image', url: 'https://tjhaizhixian.com/weixin/item/wenzi.png', width: 145, height: 75, top: 460, left: 36, }, //二维码 { type: 'image', url: 'https://tjhaizhixian.com/Public/Home/images/banner/min_code.jpg', top: 455, left: 260, width: 85, height: 85 }, ] } }) }, eventSave() { wx.saveImageToPhotosAlbum({ filePath: this.data.shareImage, success(res) { wx.showToast({ title: '保存图片成功', icon: 'success', duration: 2000 }) } }) }, eventGetImage(event) { console.log(event) wx.hideLoading() const { tempFilePath, errMsg } = event.detail if (errMsg === 'canvasdrawer:ok') { this.setData({ shareImage: tempFilePath }) } }})index.json里面的代码：
{ "navigationBarTitleText": "生成海报", "usingComponents": { //在使用页面注册组件(下面有下载地址,如果放的路径不一样,自行就修改为你的路径就行) "canvasdrawer": "/components/canvasdrawer/canvasdrawer" }}组件下载地址:
链接：https://pan.baidu.com/s/1i9zq01x58p1MdDMVmnz-_Q&shfl=sharepset 提取码：8hrj 二、对象结构1.数据对象的第一层需要三个参数: width、height、views。配置中所有的数字都是没有单位的。这就意味着 canvas 绘制的是一个比例图。具体显示的大小直接把返回的图片路径放置到 image 标签中即可。
2.当前可以绘制3种类型的配置: image、text、rect。配置的属性基本上使用的都是 css 的驼峰名称，还是比较好理解的。
image（图片）
属性含义默认值可选值url绘制的图片地址，可以是本地图片，如：/images/1.jpegtop左上角距离画板顶部的距离left左上角距离画板左侧的距离width要画多宽0height要画多高0text（文本）
属性含义默认值可选值content绘制文本默认为空color颜色blackfontSize字体大小16textAlign文字对齐方式leftcenter、left、rightlineHeight行高，只有在多行文本中才有用20top文本左上角距离画板顶部的距离0left文本左上角距离画板左侧的距离0breakWord是否需要换行falsetrue、falseMaxLineNumber最大行数，只有设置 breakWord: true ，当前属性才有效，超出行数内容的显示为…2width和 MaxLineNumber 属性配套使用，width 就是达到换行的宽度0bolder是否加粗falsetrue、falsetextDecoration显示中划线、下划线效果noneunderline（下划线）、line-through（中划线）rect (矩形，线条)
属性含义默认值可选值background背景颜色blacktop左上角距离画板顶部的距离left左上角距离画板左侧的距离width要画多宽0height要画多高0