Collection
Collection
分享朋友圈现在大家的通用做法就是通过Canvas生成一张图片后进行保存，然后自行转发朋友圈。最近项目有这个需求, 于是就记录一下。（老规矩，我的博客复制粘贴就好使）
如果想要海报上的二维码扫码完直接跳到指定的页面, 那么就需要生成一个带参数的二维码, 你需要看我的另一篇博客：微信小程序生成带参数的二维码以及小程序码
先看一下效果图：
index.wxml代码：
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
class="container"> src="{{shareImage}}"class="share-image"> painting="{{painting}}"class="canvasdrawer"bind:getImage="eventGetImage"/> bind:tap="eventDraw">绘制 bind:tap="eventSave">保存到本地
index.wxss代码：
.share-image{width:600rpx;height:810rpx;margin:075rpx;padding:1px;margin-top:40px;}button{margin-top:100rpx;}
index.js代码：
Page({data:{painting:{},shareImage:'',},onLoad(){this.eventDraw()},eventDraw(){varthat=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://tjhan.com/seafood/public78fffad452d2e158636b.jpg',width:328,height:328,top:20,left:22,},//商品名称{type:'text',content:'产品名称产品11111',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.detailif(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.jpeg|||
|top|左上角距离画板顶部的距离|||
|left|左上角距离画板左侧的距离|||
|width|要画多宽|0||
|height|要画多高|0||
text（文本）
|属性|含义|默认值|可选值|
|—|—|—|—|
|content|绘制文本|默认为空||
|color|颜色|black||
|fontSize|字体大小|16||
|textAlign|文字对齐方式|left|center、left、right|
|lineHeight|行高，只有在多行文本中才有用|20||
|top|文本左上角距离画板顶部的距离|0||
|left|文本左上角距离画板左侧的距离|0||
|breakWord|是否需要换行|false|true、false|
|MaxLineNumber|最大行数，只有设置 breakWord: true ，当前属性才有效，超出行数内容的显示为…|2||
|width|和 MaxLineNumber 属性配套使用，width 就是达到换行的宽度|0||
|bolder|是否加粗|false|true、false|
|textDecoration|显示中划线、下划线效果|none|underline（下划线）、line-through（中划线）|
rect (矩形，线条)
|属性|含义|默认值|可选值|
|—|—|—|—|
|background|背景颜色|black||
|top|左上角距离画板顶部的距离|||
|left|左上角距离画板左侧的距离|||
|width|要画多宽|0||
|height|要画多高|0||
