微信小程序Canvas绘制主页保存到手机相册手机主页「微信小程序Canvas绘制主页保存到手机相册」

本篇文章适用于保存用户主页、海报等至手机相册，内容包含圆角头像、文字超出显示省略号、多行超出显示省略号！（整体代码放入最下方可直接查看）

话不多说上图

页面如下

保存相册之后如下

整体分三部分来讲，分为wxml、wxss、js，主讲js！！！

wxml
页面除了canvas还有其他元素主要就是想让页面看起来不那么难看

wxss
在页面上加上样式

以上两部分没什么说的。

主要还是js
data里面放了canvas的宽高，因为下面也有用到，如果改的话只需要改动data就行了

声明一个函数 getCanvasImg(canvasId) 用来生成canvas主页;
参数canvasId：canvas的id;

主页绘制顺序是先把名字、简介绘制上去最后再去绘制圆形头像；
首先获取canvas的宽高并且给canvas一个白色的背景

将名字绘制指定位置，声明字体颜色、行高等通用变量；
名字水平居中显示，通过canvas的宽的1/2减去名字宽度的1/2;
canvas的measureText（）方法返回指定字符串的一个对象包含宽度可以用measureText(str).width获取

此时的canvas如图

接下来是主页简介部分：
canvas没有给定方法可以让文字自动换行、超出显示省略号。

我们可以通过measureText（）方法获取字符串的长度进行操作
看下面这个方法

封装一个函数textSplit(ctx, text, lineWidth, lines)；
ctx：页面的canvas
text：需要分割的文本
lineWidth：canvas上显示文本的宽度
lines：指定行数显示省略号

方法描述:
1.通过measureText（）方法获取字符串的长度;
2.根据你要在canvas上要显示的文本宽度进行判断；
3.把字符串分割通过一个字符一个字符相加获取长度,与你要显示的长度进行比较，如果大于切割，暂存数组，继续判断;多行还要进行,行数判断，当达到最后一行时，判断暂存数组的最后一个，长度是否还大于要显示的长度，如果大于进行切割拼接省略号，然后return返回。

对主页简介文字绘制

到这里，简介文字已经绘制完毕，看一下效果

接下来就是头像
canvas同样没有直接给绘制圆形头像的方法，我们可以通过arc（）画圆，通过clip（）剪切圆形区域，只有圆形区域可见，这样就形成了圆形头像。

到这之后canvas主页就已经绘制完毕了

接下来就是如何将绘制的主页保存至手机上
还是一样弄个函数

saveHomepage（）保存主页

方法描述:
1.通过wx.getSetting（）判断当前小程序是否有保存相册的权限;
2.如果有，调用 wx.saveImageToPhotosAlbum（）直接保存；
3.如果没有,调用wx.authorize（）向用户发起相册授权请求；
4.如果授权允许，调用 wx.saveImageToPhotosAlbum（）直接保存；
5.如果拒绝授权给个弹窗提示

为了方便调用保存相册,单独把保存方法wx.saveImageToPhotosAlbum（）封装起来了

到此全部流程已经结束了,上面圆形头像采用是本地图片，如果是线上还要使用wx.downloadFile（）转成本地路径才能使用。

整体代码
wxml

wxss

js