微信小程序点击保存图片到本机功能

1.首先我们要把想保存的图片绘制在画布上<viewclass='container'><canvasstyle='width:{{canvasWidt

1.首先我们要把想保存的图片绘制在画布上

<view class='container'>
 <canvas style='width:{{canvasWidth}}px; height:{{canvasHeight}}px' class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true">
 </canvas>
 <button bindtap='clickMe'>保存图片</button>
</view>

2.我们在看看看js代码在用wx.canvasToTempFilePath方法会返回一个tempFilePath图片路径

// canvas 全局配置
var context = null;
var rpx
var posterHeight = 0
var posterWidth = 0
var avatarPadding = 0 //距离边界
var avatarRadiu = 0 //头像半径
var textScale = 0 //文字比例
 
//注册页面
Page({
 
 data: {
 img: "../../images/img1.jpg",
 myCanvasWidth: 0,
 myCanvasHeight: 0,
 posterHeight: 0,
 },
 
 onLoad: function (options) {
 var that = this
 var myCanvasWidth = that.data.myCanvasWidth //为了让图片满铺页面
 var myCanvasHeight = that.data.canvasHeight
 context = wx.createCanvasContext('canvas');
 
 wx.getSystemInfo({
 success: function (res) {
 myCanvasWidth = res.screenWidth
 myCanvasHeight = res.screenHeight
 posterWidth = Math.round(res.screenWidth * 0.68) //计算让画布图片自适应
 posterHeight = Math.round(posterWidth * 1920 / 1080)
 avatarPadding = Math.round(posterWidth * 20 / 375)
 avatarRadiu = Math.round(posterWidth * 25 / 375)
 textScale = Math.round(posterWidth / 375)
 rpx = res.windowWidth / 375;
 that.setData({
 myCanvasWidth: myCanvasWidth,
 myCanvasHeight: myCanvasHeight,
 posterHeight: posterHeight
 })
 context.drawImage(that.data.img, 0, 0, that.data.myCanvasWidth, that.data.myCanvasHeight); //画布绘制图片
 context.draw();
 
 },
 })
 },
 clickMe: function () { //保存图片
 wx.canvasToTempFilePath({
 canvasId: 'canvas',
 fileType: 'jpg',
 success: function (res) {
 console.log(res)
 wx.saveImageToPhotosAlbum({
 filePath: res.tempFilePath,
 success(res) {
 console.log(res)
 wx.hideLoading();
 wx.showToast({
 title: '保存成功',
 });
 // //存入服务器
 // wx.uploadFile({
 // url: 'a.php', //接口地址
 // filePath: res.tempFilePath,
 // name: 'file',
 // formData: { //HTTP 请求中其他额外的 form data 
 // 'user': 'test'
 // },
 // success: function (res) {
 // console.log(res);
 
 // },
 // fail: function (res) {
 // console.log(res);
 // },
 // complete: function (res) {
 // }
 // });
 },
 fail() {
 wx.hideLoading()
 }
 })
 }
 })
 },
})

3,css样式 直接给画布设置高度宽度就可以 图片会铺满屏幕

总结

以上所述是小编给大家介绍的微信小程序点击保存图片到本机功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！ 如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

微信小程序保存图片 微信小程序保存图片本地