自己做了一个小程序，主要用于给头像加图标的那种，和qq似的，主要用canvas做的， 第一回用，掉了很多坑，所以今天总结一下自己所做的，如果大家有不理解的地方，欢迎提问；如果帮到大家的话，帮忙点个啥的
canvas可以用来画一些东西，前台生成一些海报什么的，可以保存base64图片
canvas中介绍的各种方法有很多参数，不理解的话请自行到小程序开发文档查看
我合成的方法是，第一步：获取系统信息，第二步：画背景，第三步：在这个背景上画另外一张图片，进行合成，然后转base64图片，传给后台
##你在画布，想把一张图片画上去，只要是网络图片，就一定要download file下来，使用临时路径，因为我就踩了这个大坑，直接使用网络图片，会有真机不显示的问题
##因为你头像也需要使用缓存路径，所有你需要把https://wx.qlogo.cn添加到你的downloadfile的域名下，这样就省事了很多，如果你想要测试，就把详情里的不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书，对勾去掉测试，为了实现效果不择手段
第一步：获取系统信息：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
1：//获取系统信息。手机型号，设备像素比，屏幕宽高，可使用窗口宽高，微信app的信息getSystemInfo: function () { var t = this; wx.getSystemInfo({ success: function (a) { //screenWidth,screenHeight屏幕宽高 var i = a.screenWidth / 375; t.setData({ screenWidth: i, canvasWidth: a.screenWidth / 375 * 250, canvasHeight: a.screenWidth / 375 * 250 }), e.globalData.platform = a.platform; } }) }, |
第二步：绘制背景
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
//需要获取canvas，和h5一样 const ctx = wx.createCanvasContext('myCanvas') draw: function (path) { console.log(path) var that = this //背景图片路径 var path = path //画布宽度 //画布高度 var canvasWidth = that.data.canvasWidth var canvasHeight = that.data.canvasHeight //getImageInfo()获取图片信息,倘若为网络图片，需先配置download域名才能生效。 wx.getImageInfo({ src: path, success: function (res) { //drawImage()绘制图像到画布。 //res.path所要绘制的图片资源 //0,0,是你要在画布的哪个位置开始画 //canvasWidth, canvasHeight你需要在画布上绘制多大的背景图，允许缩放 ctx.drawImage(res.path, 0, 0, canvasWidth, canvasHeight) //画完第一层背景之后，调用合成图标的方法 that.headicon() }, fail: function (res) { console.log(res); } }) }, |
第三步：画好背景，合成图标，图片做好后，我利用canvasGetImageData()方法，把画布内容保存成base64的图片，如果有想用此方法的需要三个文件，我把它放在网盘，大家可以下载
链接：https://pan.baidu.com/s/1bHXpAGDdPkmQpgLt49wUGQ 密码：6riy
const base64 = require(‘../../utils/base64.js’)
const upng = require(‘../../utils/UPNG.js’)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
headicon: function () { var that = this //图标路径 var qrcodeUrl = this.data.qrcodeUrl; //画布宽度 //画布高度 var canvasWidth = this.data.canvasWidth var canvasHeight = this.data.canvasHeight // 你需要把图标绘制到哪个位置（起点位置） var x = canvasWidth - 80 var y = canvasHeight - 80 wx.getImageInfo({ src: qrcodeUrl, success: function (res) { ctx.drawImage(qrcodeUrl, x, y, 80, 80) //保存当前画的状态 ctx.save(); //恢复当前画的状态 ctx.restore(); ctx.draw(false, () => { // 2. 获取图像数据。canvasGetImageData()在ctx.draw()里使用在有效 wx.canvasGetImageData({ // 你需要获取那张画布的数据，获取多大范围的数据 canvasId: "myCanvas", x: 0, y: 0, width: canvasWidth, height: canvasHeight, success:res=> { // 3. png编码 let pngData = upng.encode([res.data.buffer], res.width, res.height) // 4. base64编码，转成base64图片，就可以发送给后台保存了 let base64 = wx.arrayBufferToBase64(pngData) that.setData({ generatePictures: base64 }) } }) }) }, fail: function (res) { console.log(res); } }) }, |