我要将3张图片都通过前端方法加入一个二维码,我改怎么做呢,这个时候我想到了canvas
首先使用遍历的方法,通过for遍历,有几张图片,遍历几个画布
<view style="position:fixed;top:999999999999999999999rpx;">
<canvas wx:for="{{samples}}" canvas-id='{{item.sampleId}}' style="width:{{item.str.canvasWidth}}px;height:{{item.str.canvasHeight}}px;background-color:white;"></canvas>
</view>
中间有一段关于canvasWidth和canvasHeight的,这是我要在后续进行图片的大小获取后将值赋值给画布
wx.getImageInfo({ //获取二维码的图片信息
src: data.qrUrl,
success(res) {
qrUrl = res.path
qrUrlWidth=res.width
qrUrlHeight=res.height
that.data.samples.forEach(function (item, index) {
var picture = item.samplePicKey
wx.getImageInfo({ //获取将要放在画布上的图片信息
src: picture,
success: function (ret) {
var str = {
canvasWidth: ret.width,
canvasHeight: ret.height,
id: item.sampleId
}
var a = that.data.samples
a[index].str = str
that.setData({ //将图片大小放进对应图片的对象中
samples: a
})
const ctx = wx.createCanvasContext(item.sampleId.toString())
picture = picture.toString()
ctx.drawImage(ret.path, 0, 0, ret.width, ret.height)//在画布上绘入图片,参数含义移步手册。
ctx.drawImage(qrUrl, 0, 0, (qrUrlWidth * (ret.height)) / (4 * qrUrlHeight), ret.height / 4) //打上去的二维码默认高度为四分之一
ctx.draw();
},
})
})
}
})
这一部分我们用draw方法在画布上方法后,我发现我不能直接在draw方法中加载canvas下载图像的方法canvasToTempFilePath,经过一系列尝试,我得把它独立拿出来,并且,不能通过forEach同时获取3张画布的值,只能通过递归一个个获取。
这里还要吐槽一下这个函数的麻烦之处,它获取过来的图片还得通过getImageInfo和调用用户授权保存权限才能保存到本地。
var that = this
wx.canvasToTempFilePath({
canvasId: that.data.samples[index].sampleId,
success: function (res) {
var tempFilePath = res.tempFilePath;
wx.getImageInfo({
src: tempFilePath,
success: function (ret) {
var path = ret.path;
wx.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
}
})
}
},
})
wx.saveImageToPhotosAlbum({
filePath: path,
success(result) {
var length = that.data.samples.length
index = index + 1
if (index != length) {
that.saveToMyself3(index)
}
else {
that.saveToMyself2()
wx.showModal({
title: '完成',
content: '图片已全部保存',
})
that.shareClose()
}
},
fail(res) {
wx.showModal({
title: '未保存',
content: '未保存',
})
},
})
},
fail(res) {
wx.showModal({
title: '获取图片信息失败',
content: '请重试',
})
},
})
},
fail: function (res) {
console.log(res);
}
});