DBMNG数据库管理与应用

抓住自己最有兴趣的东西,由浅入深,循序渐进地学……
当前位置:首页 > 移动应用 > 微信开发

微信小程序保存图片到相册(授权)

前两天在做小程序项目的时候,碰到两个点。1.将答题获得的分数占比绘制成canvas图表(暂不做说明)。2.将最终出来的截图图通过一键按钮保存到相册。总体来说这两个点都不算难度。然而还是让出现了插曲,原因在于绘制图表成功后,保存图片时,性能消耗很高,页面卡死。由于第一次弄,由公司老大哥推荐wxdraw.min.js,最后通过检测,发现正是使用wxdraw.min.js将图绘制到canvas上时造成的。(我觉得更大的可能性是由于场景的适用性造成的,或许是我用法不对),于是还是去官方文档看了下将图片绘制到Canvas上的API,秒解。

1.将图片绘制到canvas上 微信官方相关接口

/**
*  result 表示canvas的ID
*  imgSrc1和imgSrc2表示图片的src
*  后面的四个数字表示坐标轴(x,y)以及长宽度
*/let ctx= wx.createCanvasContext('result')ctx.drawImage(imgSrc1, 0, 0, 100, 200)ctx.drawImage(imgSrc2, 0, 0, 100, 200)ctx.draw();

2. 将绘制后的canvas保存为图片 微信官方相关接口

canvasToPath () {
 return new Promise((resolve, reject) {
   let self = this
   wx.canvasToTempFilePath({
     x: 0,
     y: 0,
     width: 750,
     height: 1218,
     destWidth: 750,
     destHeight: 1218,
     canvasId: 'result',
     success: function (res) {
       resolve(res.tempFilePath)
     }
   })
 })}

3.将图片保存到相册

在保存图片到相册的时候,是需要授权的,这个时候 需要先检测下是否授权,没有则进行授权验证,通过后则执行保存办法。如果拒绝授权,则默认开启手机设置,进行授权。

// js文件// 保存图片方法saveImage (filePath) {
 wx.saveImageToPhotosAlbum({
   filePath: filePath,  // 此为图片路径
   success: (res) => {
     console.log(res)
     this.showToast('保存成功')
   },
   fail: (err) => {
     console.log(err)
     this.showToast('保存失败,请稍后重试')
   }
 })}// 微信提示方法showToast (title) {
 wx.showToast({
   title: title  });}// 点击保存图片到相册(授权)saveImageToPhotos (filePath) {
 let self = this
 // 相册授权
 wx.getSetting({
   success(res) {
     // 进行授权检测,未授权则进行弹层授权
     if (!res.authSetting['scope.writePhotosAlbum']) {
       wx.authorize({
         scope: 'scope.writePhotosAlbum',
         success () {
           self.saveImage(filePath)
         },
         // 拒绝授权时,则进入手机设置页面,可进行授权设置
         fail() {
           wx.openSetting({
             success: function (data) {
               console.log("openSetting success");
             },
             fail: function (data) {
               console.log("openSetting fail");
             }
           });
         }
       })
     } else {
       // 已授权则直接进行保存图片
       self.saveImage(filePath)
     }
   },
   fail(res) {
     console.log(res);
   }
 })}// 按钮点击触发clickSave () {
 this.canvasToPath().then((res) => {
   this.saveImageToPhotos(res)
 })}





来源:https://www.jianshu.com/p/ecfef42dadd4


本站文章内容,部分来自于互联网,若侵犯了您的权益,请致邮件chuanghui423#sohu.com(请将#换为@)联系,我们会尽快核实后删除。
Copyright © 2006-2023 DBMNG.COM All Rights Reserved. Powered by DEVSOARTECH            豫ICP备11002312号-2

豫公网安备 41010502002439号