微信小程序canvas绘制海报并保存本地相册-小程序视频怎么发在电脑上
在做微信小程序电商项目中，想要分享一款商品，使用最多并且最简便的方法就是使用小程序自带的分享进行分享，但是分享出去的页面比较难看；微信小程序开发
另一种方法就是自己使用小程序绘制分享的海报，这个海报可以保存在相册里，而且可以按照自己的需求效果进行页面绘制。
前提准备：
1、一张海报背景图、商品图片、长按识别小程序码，这三个图片必须是线上图片，然后使用f将线上地址转化成本地地址，不然会导致真机不显示的问题；
2、域名配置，图片所涉及的域名一定要在小程序后台进行配置，开发的过程中虽然可以配置不校验域名，但是真正上线测试的时候一定要记得配置，不然在测试的时候会发现总是需要你去打开调试模式，有点烦人；
代码：
m点我生成海报
{{}}
{{ w }}{{ h }} c
s点击保存
{
300
}
{
#999999
0
}
s{
11111
26
#56460
#
200
70
70
10
5
50%
100
}
逻辑思路：
1、在中默认为，目的是解决遮挡 “点我生成海报” 按钮，因为样式设置了 0
2、当页面加载的时候获取设备的屏幕宽高，目的是为了让海报背景能始终居中于设备中心，后面绘制画布的时候会看到元素的位置几乎都用设备宽高进行了计算；同时，将线上图片转换为本地地址，我的图片都是上找的，如果真正项目要用的话，使替换成后台返回的图片路径即可；
3、点击 点我生成海报 按钮，调用 m 方法，开始绘制海报；
4、海报绘制函数中调用了 l(, ) ，目的值设置多文字折行功能；
5、点击 点击保存 按钮，触发( )方法，使用ttf将画布生成指定大小的图片；
6、接5，生成成功后调用s( )进行图片本地保存，使用的是ita；
温馨提示：
代码有点多，如果懒得看的童鞋们，不妨直接将代码下载下来在本地进行测试：
({
**
* 页面的初始数据
*
{
},
**
* 生命周期函数监听页面加载
*
l() {
获取设备宽高，以备海报全屏显示
si({
() {
d({
w w,
h h
})
},
})
海报背景图线上地址
''
商品图片（哪吒头像）线上地址
''
小程序二维码
c''
bg()( (d) {
d({
d
})
})
bg()( (d) {
d({
d
})
})
bg(c)( (d) {
d({
c d
})
})
},
点击生成并保持海报到手机相册
m() {
d({
})
c()
},
绘制
c() {
ww
hh
'从不拘泥任何世俗凡人的目光，我要奔向前方那光芒，生而为魔，那又如何'
使用 c 获取绘图上下文
cc('c')
海报背景图
i(, (w280)2, (h 450)2, 280, 450)
商品图片
i(, (w 170)2, (h390)2, 170,170)
商品文字描述
fs(30)
fs()
t('￥9999', (w200)2, (h +55)2)
fs(18)
fs(#999999)
t('￥9999', (w + 50)2, (h +55)2)
t((w + 45)2, (h + 44)2) 设置线条的起始路径坐标
t((w + 200)2, (h +44)2) 设置线条的终点路径坐标
() 对当前路径进行描边
商品名字，名字很长调用方法将文字折行，传参 文字内容，画布
l(, )
24定义行高25
( 0 ++) {
fs(16)
fs(#000000)
t([], (w195)2, (h +130)2 +* , 320)
}
识别小程序二维码
i(c, (w180)2, (h + 289)2, 75, 75)
fs(#000000)
fs(12)
t('长按识别小程序', (w0)2, (h + 350)2 )
fs(#000000)
fs(18)
t('享更多好货', (w0)2, (h + 390)2 )
()
},
点击保存按钮，同时将画布转化为图片
() {
ttf({
0,
0,
i 'c',
t '',
1,
() {
d({
i f
})
t((){
m({
'提示',
'将生成的海报保存到手机相册，可以发送给微信好友或分享到朋友圈',
() {
() {
s()
} () {
('用户点击取消')
}
}
})
},1000)
}
})
},
将商品分享图片保存到本地
s() {
ita({
i,
() {
t({
'保存图片成功',
'',
2000
})
}
})
},
将线上图片地址下载到本地，此函数进行了封装，只有在需要转换的时候调用即可
bg() {
函数给我很大的帮助，让我能出回调函数中的值
( () {
f({
,
() {
f
()
}
})
})
},
多文字换行
l(, ) {
a('')
''
[]
( 0 a ++) {
(t()210) {
+ a[]
}{
()
''
}
}
()
如果数组长度大于3 则截取前三个
(3) {
c(0, 3)
c[2]
[]
( 0 ++) {
(t()180) {
+ []
}{
}
}
()
[0] +这里只显示三行，超出的用表示
c(2, 1, )
c
}
},
**
* 生命周期函数监听页面初次渲染完成
*
r() {
},
**
* 生命周期函数监听页面显示
*
s() {
},
**
* 生命周期函数监听页面隐藏
*
h() {
},
**
* 生命周期函数监听页面卸载
*
u() {
}
})
总结：
1、bg()方法：项目中多次进行f线上图片路径转换成本地路径的方法，为了方便，我将此方法进行封装；
2、使用 函数： 将回调函数中的值进行了处理，能让外部接收到回调函数的值；
3、解决了绘制的海报在保存到相册的时候出现图片模糊不清，字体有明显锯齿状的情况；4、l(, )方法：解决了画布上多行文字换行功能，并且可以按需设置超过几行后显示省略号；