小程序开发 实现保存按钮下载图片,两张图片合成一张图片下载
时间: 2023-07-11 17:46:09 浏览: 59
好的,以下是示例代码实现小程序保存按钮下载图片,并将两张图片合成一张图片下载的功能:
```html
<!-- wxml代码 -->
<view>
<image src="{{image1}}" mode="aspectFill"></image>
<image src="{{image2}}" mode="aspectFill"></image>
<button bindtap="saveImage">保存图片</button>
</view>
```
```javascript
// js代码
Page({
data: {
image1: 'image1.jpg', // 第一张图片路径
image2: 'image2.jpg', // 第二张图片路径
},
saveImage: function() {
var that = this;
wx.showLoading({
title: '正在生成图片...',
mask: true
});
// 获取第一张图片信息
wx.getImageInfo({
src: that.data.image1,
success: function(res1) {
// 获取第二张图片信息
wx.getImageInfo({
src: that.data.image2,
success: function(res2) {
// 创建画布
var ctx = wx.createCanvasContext('canvas');
// 设置画布大小
ctx.canvas.width = res1.width;
ctx.canvas.height = res1.height + res2.height;
// 绘制第一张图片
ctx.drawImage(that.data.image1, 0, 0, res1.width, res1.height);
// 绘制第二张图片
ctx.drawImage(that.data.image2, 0, res1.height, res2.width, res2.height);
// 画布转换成图片
ctx.draw(false, function() {
wx.canvasToTempFilePath({
canvasId: 'canvas',
success: function(res) {
// 保存图片
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function() {
wx.hideLoading();
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
});
},
fail: function() {
wx.hideLoading();
wx.showToast({
title: '保存失败',
icon: 'none',
duration: 2000
});
}
});
},
fail: function() {
wx.hideLoading();
wx.showToast({
title: '生成图片失败',
icon: 'none',
duration: 2000
});
}
});
});
}
});
}
});
}
});
```
以上代码中,我们在页面中放置两张图片和一个保存按钮。点击保存按钮后,先通过 `wx.getImageInfo` 方法获取两张图片的信息(包括宽高等),然后创建画布,并设置画布大小为两张图片宽度相同,高度为两张图片高度之和。接着,我们通过 `ctx.drawImage` 方法绘制两张图片到画布上,并将画布转换成图片,最后调用 `wx.saveImageToPhotosAlbum` 方法将图片保存到相册中。
需要注意的是,由于获取图片信息和画布转换成图片都是异步操作,因此需要嵌套多个回调函数来保证操作的顺序和正确性。此外,为了能够将画布转换成图片,需要在页面中添加一个 `canvas` 标签,并给其指定一个 `canvasId`,这个 `canvasId` 需要在代码中使用到。