微信小程序 如何把小程序页面保存至用户相册

思路

canvas绘制出页面

将canvas转化成图片，获取到临时路径

用临时路径将图片保存至相册

组件及API

canvas ( 画布 ) 官方文档链接

wx.canvasToTempFilePath ( 将canvas转换为临时文件路径 ) 官方文档链接

wx.saveImageToPhotosAlbum( 保存图片到系统相册 ) 官方文档链接

举个栗子

wxml

<view class="container">
<canvas canvas-id='share' style='width:100vw;height:90vh;'></canvas>
<view class='tips' bindtap='saveImageToPhotosAlbum'>点击保存图片</view>
</view>

js

//绘制
onReady:function(){
var context = wx.createCanvasContext('share')
context.setStrokeStyle("#00ff00")
context.setLineWidth(5)
context.rect(0, 0, 200, 200)
context.stroke()
context.draw(false, this.getTempFilePath)
}

//获取临时路径
getTempFilePath:function(){
wx.canvasToTempFilePath({
canvasId: 'share',
success: (res) => {
this.setData({
shareTempFilePath: res.tempFilePath
})
}
})
}

//保存至相册
saveImageToPhotosAlbum:function(){
if (!this.data.shareTempFilePath){
wx.showModal({
title: '提示',
content: '图片绘制中，请稍后重试',
showCancel:false
})
}
wx.saveImageToPhotosAlbum({
filePath: this.data.shareTempFilePath,
success:(res)=>{
console.log(res)
},
fail:(err)=>{
console.log(err)
}
})
}

github：https://github.com/webxing

简书：https://www.jianshu.com/u/489662a091fd