我是一名刚毕业工作俩月的实习生，技术很菜，如果文章有写的地方，在评论区写出来，让像我一样的小白少走点弯路。.
需要将图片保存至手机， 但是微信小程序官方文档提供的保存至手机api参数是一张图片，而我这是两张图片，一张背景图，一张接口返回的二维码，所以需要先将两张图片合成一张
第一步：在wxml中写canvas 画布，
<canvas id="myCanvas" type="2d" style="border: 1px solid red; width: 340px; height: 450px; z-index: 11;" />第二步：在js中创建实列获取对象
wx.createSelectorQuery()
.select('#myCanvas') // 在 WXML 中填入的 id
.fields({ node: true, size: true })
.exec((res) => {
// Canvas 对象
const canvas = res[0].node
// 渲染上下文
const ctx = canvas.getContext('2d')
}切记这段代码在onLoad的生命周期中写。创建 Canvas 实例，获取 CanvasRenderingContext2D 对象（Canvas 绘图上下文）来绘制形状、文本、图像等。
第三步：设置宽高调整图片
// Canvas 画布的实际绘制宽高
const width = res[0].width
const height = res[0].height
// 初始化画布大小
const dpr = wx.getWindowInfo().pixelRatio
canvas.width = width * dpr
canvas.height = height * dpr
ctx.scale(dpr, dpr)我的画布宽高在wxml的行内样式中写了，通过这段代码来获取
第四步：绘制内容
直接看整个代码
onLoad(options) {
wx.createSelectorQuery()
.select('#myCanvas') // 在 WXML 中填入的 id
.fields({ node: true, size: true })
.exec((res) => {
// Canvas 对象
const canvas = res[0].node
// 渲染上下文
const ctx = canvas.getContext('2d')
// Canvas 画布的实际绘制宽高
const width = res[0].width
const height = res[0].height
// 初始化画布大小
const dpr = wx.getWindowInfo().pixelRatio
canvas.width = width * dpr
canvas.height = height * dpr
ctx.scale(dpr, dpr)
// 图片对象
const image = canvas.createImage()//本地背景图
const imgs = canvas.createImage()//接口返回二维码图片
// 图片加载完成回调
image.onload = () => {
// 将图片绘制到 canvas 上
ctx.drawImage(image, 0, 0,340,450)
ctx.drawImage(imgs,115,124,110,110)
// 文本 一定要写到图片后面 要不然会被盖住
ctx.font = "15px SimHei";
ctx.textAlgin = "left"
ctx.fillStyle = "#333333";
ctx.fillText(store.data.User.info.nickname, 120, 275);
ctx.font = "12px SimHei";
ctx.fillStyle = "#999999";
ctx.fillText(store.data.User.info.shop_info.name+' 店主', 100,300);
ctx.textAlgin = "center"
}
// 设置图片src
image.src = '../../../images/二维码背景.png'
imgs.src = 'http://ljtest.remo.cn/uploads/qrcode/shop1.png'
//没加定时器之前合成的图片是一片灰色，加了之后才有图片，测试了一下最少需要400毫秒
setTimeout(()=>{
wx.canvasToTempFilePath({
canvas: canvas,
success: res => {
// 生成的图片临时文件路径
this.setData({
img:res.tempFilePath
})
},
})
},1000)
})
},使用 CanvasRenderingContext2D 绘制，根据业务需要在画布中绘制头像、文字、背景等。有不懂的代码直接去微信官方文档查一下，他们讲的很详细，我这里就不一 一解释了
接下来该保存图片至手机了
我直接封装好了，如何在点击事件的函数中直接调用
下面是我封装的代码
// 保存图片到本地
export function getAvaterInfo (url) {
wx.saveImageToPhotosAlbum({
filePath: url,
success(res) {
wx.showModal({
content: '图片已保存到相册，赶紧晒一下吧~',
showCancel: false,
confirmText: '好的',
confirmColor: '#333',
success: function (res) {
if (res.confirm) { }
},
fail: function (res) { }
})
},
fail: function (err) {
console.log(err)
wx.showModal({
content: '需要授权保存到相册',
showCancel: false,
confirmText: '好的',
confirmColor: '#333',
success: function (res) {
if (res.confirm) {
wx.openSetting({
success(settingdata) {
console.log(settingdata)
if (settingdata.authSetting['scope.writePhotosAlbum']) {
console.log('获取权限成功，给出再次点击图片保存到相册的提示。')
} else {
console.log('获取权限失败，给出不给权限就无法正常使用的提示')
}
}
})
}
},
fail: function (res) { }
})
}
})
}然后引用、在点击事件中调用文章来源：https://www.toymoban.com/news/detail-489780.html
const funct = require ('../../../utils/function')abc(){
funct.getAvaterInfo(this.data.img)
},函数名随便起的，将合成的图片直接传过去就行。文章来源地址https://www.toymoban.com/news/detail-489780.html
到了这里，关于微信小程序原生将两张图片合成一张并保存至手机中的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
