画布绘制二维码和背景图保存到手机
功能示例
页面显示二维码加一个背景图和一个保存按钮，点击按钮如果没有授权相册，就提示你该授权了，如果授权了就保存图片到相册然后提示你保存成功或者失败。
如果保存成功要求图片符合手机屏幕尺寸不同手机保存不同的尺寸来适应。
这是保存下来的
绘制页面
首先创建canvas标签设置id
<template>
<view class="content">
<canvas class="canvas" canvas-id="myCanvas"></canvas>
</view>
</template>
base64转成临时文件
前面也说到我们想要绘制出base64格式的图片的话需要进行一下路径操作。
我们把base64图片保存在手机的文件中，然后拿到这个路径绘制到页面才可以在手机上进行保存。
首先我们拿到base64图片，然后使用wx.env.USER_DATA_PATH 创建一个类似文件夹的文件 imgPath ，在使用正则清除base64的前缀没有前缀的可以省略这一步（data:image/png;base64），还要获得操作文件的权限用于存入base64图片使用wx.getFileSystemManager()，在使用writeFileSync() 写入文件路径 imgPath 存入清除了前缀的base64二维码 imageData
内容格式为 “base64” ，这样我们就可以使用imageData来正常绘制了。
var base64url = res.data; //base64图片
var imgPath = wx.env.USER_DATA_PATH + '/invite' + 'dalaba' + '.png'; //创建名为invite的本地文件
var imageData = base64url.replace(/^data:image\/\w+;base64,/, ""); //清除base64前缀
var fs = wx.getFileSystemManager(); //获得文件系统管理器 用于操作临时文件
fs.writeFileSync(imgPath, imageData, "base64"); //文件路径 存入内容 编码格式 可以直接使用imgPath来进行操作
绘制二维码和背景
首先拿到canvas的ID在进行图片进行绘制
const ctx = uni.createCanvasContext('myCanvas'); //拿到canvas的id
使用drawImage( 图片 , x , y , 宽 , 高) 来把背景和二维码进行绘制。在进行调用。
ctx.drawImage(backurl, 0 , 0 , 500, 800); //背景图
ctx.drawImage(imgPath, 70 , 200 , 150, 150); //二维码
ctx.draw() //调用画布绘制
我们来看看页面，发现并没有达到我们想要的效果。
这里我们的二维码的宽高你可以设置固定值，但是背景图最好使用系统尺寸来设置，所以这里我们要调用接口获取系统宽高。
使用接口uni.getSystemInfo来获取，把背景图绘制的宽高改成系统宽高即可。
uni.getSystemInfo({
success: function(res) {
var windowWidth = res.windowWidth; //宽
var windowHeight = res.windowHeight; //高
const ctx = uni.createCanvasContext('myCanvas'); //拿到canvas的id
ctx.drawImage(backurl, 0 , 0 , windowWidth, windowHeight); //背景图
ctx.drawImage(imgPath, 70 , 200 , 150, 150); //二维码
ctx.draw() //调用画布绘制
}
})
授权功能
想保存到相册肯定是要获取相册的权限才行，这里我们做一个按钮进行判断是否授权，在html下加入一个按钮，绑定函数save。
<template>
<view class="content">
<canvas class="canvas" canvas-id="myCanvas"></canvas>
<button type="primary" @click="save">保存</button>
</view>
</template>
调用微信开发文档中的接口 wx.getSetting(Object object)
获取当前用户的授权设置，来进行判断，如果没有授权相册就进行下一步如果授权过了调用保存功能。
在官方文档中，success回调函数参数中，可以看到authSetting会返回用户授权的结果，而在 授权 中我们可以找到 scope 参数，包括用户信息、地理位置、摄像头、相册等等参数。这里我们需要的是scope.writePhotosAlbum。
进行判断if (!res.authSetting['scope.writePhotosAlbum'])
然后使用 uni.showModal 给用户进行提示，点击确定就提示授权如果点击取消就回到首页，或者不做操作。
怎么提示授权呢，使用了 wx.authorize(Object object) 接口提前向用户发起授权请求。
这里也需要scope参数必填，我们把上面 授权 中拿到的相册scope代入即可。
wx.authorize({ //授权相册
scope: 'scope.writePhotosAlbum',
success() {
}
})
save() {
var that = this;
wx.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
uni.showModal({
title: '您还授权相册权限',
content: '点击确认授权',
success: res => {
if (res.confirm == true) {
wx.authorize({ //授权相册
scope: 'scope.writePhotosAlbum',
success() {
}
})
} else {
uni.navigateTo({
url: "../index/index"
})
}
}
})
} else {
// 如果授权了，在这里写保存功能。
}
}
})
}
保存功能
注意：保存功能写在save()函数中的else中。
使用 wx.canvasToTempFilePath(OBJECT, this) 把画布按指定大小生成图片并返回路径的方法。
要注意的是：画布的宽高和截取指定的宽高，必须要符合真机的大小尺寸，通过绘制背景图已经拿到了了真机的系统尺寸。
width: that.windowWidth * 1.22, // 截取的画布的宽
height: that.windowHeight * 1.22, // 截取的画布的高
destWidth: that.windowWidth * 1.22 * 3, // 保存成的画布宽度
destHeight: that.windowHeight * 1.22 * 3, // 保存成的画布高度
最后在 wx.canvasToTempFilePath(OBJECT, this) 接口的成功回调success中调用 wx.saveImageToPhotosAlbum(Object object) 保存图片到系统相册，这个接口必须用户授权了相册才可以正常使用。
看到参数filepath参数需要一个图片路径，而我们已经通过上个接口拿到了这个路径，代入即可。
uni.canvasToTempFilePath({ //把画布转化成临时文件进行保存
width: that.windowWidth * 1.22, // 截取的画布的宽
height: that.windowHeight * 1.22, // 截取的画布的高
destWidth: that.windowWidth * 1.22 * 3, // 保存成的画布宽度
destHeight: that.windowHeight * 1.22 * 3, // 保存成的画布高度
fileType: 'png', // 保存成的文件类型
quality: 0, // 图片质量
canvasId: 'myCanvas', // 画布ID
success(res) {
// 2-保存图片至相册
uni.saveImageToPhotosAlbum({ // 存成图片至手机
filePath: res.tempFilePath, //画布保存的图片临时文件
success(res2) {
wx.hideLoading();
uni.showToast({
title: '图片保存成功~',
duration: 2000
})
},
fail(res3) {
if (res3.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
that.$store.dispatch('SetPhoneShow', 1)
uni.showToast({
title: '保存失败，稍后再试',
duration: 2000,
icon: 'none'
})
wx.hideLoading();
} else {
uni.showToast({
title: '保存失败，稍后再试',
duration: 2000,
icon: 'none'
})
wx.hideLoading();
}
}
})
},
fail() {
uni.showToast({
title: '保存失败，稍后再试',
duration: 2000,
icon: 'none'
})
wx.hideLoading();
}
})
总结
经过这么一个流程下来，首先是页面先有，在说功能，先绘制然后发现canvas不支持base64，那就进行处理，把base64保存成临时文件拿到路径进行绘制，绘制完成后进行授权保存，想调用保存功能必须授权那就先写授权，写好授权在看保存功能要一个图片路径，就把画布保存成一个路径在进行代入保存，最后进行一个判断提示用户是否保存成功即可。
