微信小程序webview保存图片

邱秋2月前 17:39

背景

在小程序的webview里保存图片. 因为微信的js-sdk没有提供saveImageToPhotosAlbum方法

更多web和小程序的交互,请看这里

解决思路

先加载 微信js-sdk

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

分三步

1、html端把图片转为base64,然后通过postmessage传递给小程序

let img = new Image()
img.src = 'xxxx' //这里是图片的src
img.crossOrigin = 'anonymous'  //The opeartaion is insecure .其它跨域的问题 自行代理解决
img.onload = function () {
  let canvas = document.createElement('canvas')
  canvas.width = img.width
  canvas.height = img.height
  let ctx = canvas.getContext('2d')
  ctx.drawImage(this, 0, 0)
  let imgBase64Data = canvas.toDataURL('image/jpeg', 1)  //这里就拿到了base64
  wx.miniProgram.postMessage({
    data: {
      imgData: imgBase64Data // 刚才拿到的base64 数据
    }
  })
}

2、小程序监听postmessage拿到 图片base64数据

// wxml
<web-view  src="http://www.chuchur.com/save-image" bindmessage="getMessage"></web-view>

// js
Page({

  data:{
    imageData:null
  }

  getMessage(e){

    this.setData({
      imageData : e.detail.data[0].imgData
    })
  }
})

3.保存图片到相册(在小程序里)

因为拿到是base64图片数据,首先要把它存为 图片文件

wx.getFileSystemManager().writeFile({
  filePath: wx.env.USER_DATA_PATH + '/qrcode.png',  //这里先把文件写到临时目录里. 
  data: this.data.imageData.slice(22), // 注意这里
  encoding: 'base64',
  success: res => {
    console.log('success')
  },
  fail: error => { console.log(error) }
})

getFileSystemManagerwriteFile写入的base64是不包含 图片的头字节的. 所以要干掉data:image/jpeg;base64,等字符.

有了文件路径就可以保存到相册了

wx.saveImageToPhotosAlbum({
  filePath: wx.env.USER_DATA_PATH + '/qrcode.png', //这是把临时文件 保存到 相册, 收工
  success: res => {
    wx.showToast({ title: '保存成功!' })
  },
  fail: error => { console.log(error) }
})

没有接收到?不是实时触发?

文档发现虽然h5中的postMessage会马上提交信息,但是小程序并不会马上受理,在小程序webview上的监听函数,只会在特定时机触发并收到消息: 也就是postMessage所有的消息都只能等得分享或webview的生命周期结束 才会被触发. 他是一个消息队列 :

getMessage: function(e){
  if (e.type === 'message' && e.detail && e.detail.data && e.detail.data.length > 0) {
    e.detail.data.forEach(function (dataItem) {
      if (dataItem.type === 'qbreport' && dataItem.key) {
        // todo: yourFn(dataItem.key)
      }
    })
  }
}

所以, 我们在执行保存的时候 可以 立马 触发它的 返回 事件.

function(){
  // 此处省略
  wx.miniProgram.postMessage({
    data: {
      xxx:'aaa'
    }
  })

  wx.miniProgram.navigateBack({ delta: 1 }) //注意这里.
}

完整的代码如下:

html端代码:

<html>
<title>webchat webview save image</title>
<header>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</hearder>
<body>
  <button id="saveImage" onclick="saveImage">下载图片</button>
  <script>  
    function saveImage(){
      let img = new Image()
      img.src = 'xxxx' //这里是图片的src
      img.crossOrigin = 'anonymous'  //The opeartaion is insecure ,其他跨域问题自行代理解决.
      img.onload = function () {
        let canvas = document.createElement('canvas')
        canvas.width = img.width
        canvas.height = img.height
        let ctx = canvas.getContext('2d')
        ctx.drawImage(this, 0, 0)
        let imgBase64Data = canvas.toDataURL('image/jpeg', 1)  //这里就拿到了base64

        wx.miniProgram.postMessage({
          data: {
            imgData: imgBase64Data // 刚才拿到的base64 数据
          }
        })

        wx.miniProgram.navigateBack({ delta: 1 }) //注意这里.
      }
    }
  </script>
</body>
</html>

小程序端代码:

// wxml
<web-view  src="http://www.chuchur.com/save-image" bindmessage="getMessage"></web-view>

// js
Page({

  getMessage(e){
    let img =  e.detail.data[0].imgData

    wx.getFileSystemManager().writeFile({
      filePath: wx.env.USER_DATA_PATH + '/qrcode.jpeg',  //这里先把文件写到临时目录里. 
      data: img.slice(22), //注意这里
      encoding: 'base64',
      success: res => {
        console.log('success')
        wx.saveImageToPhotosAlbum({
          filePath: wx.env.USER_DATA_PATH + '/qrcode.jpeg', //这是把临时文件 保存到 相册, 收工
          success: res => {
            wx.showToast({ title: '保存成功!' })
          },
          fail: error => { console.log(error) }
        })
      },
      fail: error => { console.log(error) }
    })
  }
})

其它相关

保存远程图片

  wx.showLoading({ title: "正在下载图片...", mask: !1 })

  wx.downloadFile({
    url: '填写一个远程的图片链接',
    success: function (t) {
      wx.showLoading({ title: "正在保存图片", mask: !1 })
      wx.saveImageToPhotosAlbum({
        filePath: t.tempFilePath,
        success: function () {
          wx.showModal({ title: "自定义提示信息", content: "保存成功", showCancel: !1 });
        },
        fail: function (t) {
          wx.showModal({ title: "图片保存失败", content: t.errMsg, showCancel: !1 });
        },
        complete: function (t) { wx.hideLoading(); }
      });
    },
    fail: function (t) {
      wx.showModal({ title: "图片下载失败", content: t.errMsg, showCancel: !1 });
    },
    complete: function (t) { wx.hideLoading(); }
  })) 

本文于2月前 17:39发布在code分类下,当前已被围观51次

相关标签:小程序,html5,

永久地址:https://www.chuchur.com/article/webchat-webview-save-image

版权声明: 自由转载-署名-非商业性使用

别丢人了Mac OSChrome80#71
人品不行,GitHub再怎么装饰也没用咯[摊手]
chuchurMac OSChrome80#72
@别丢人了,去你大爷的,老子哪里惹你了,你个傻逼。老子写代码让你看了吗?