H5+App点击图片保存到相册

业务场景：webapp点击图片保存到相册

使用的h5api：

• plus.gallery(系统相册): http://www.html5plus.org/doc/zh_cn/gallery.html
• plus.nativeObj.Bitmap: http://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.Bitmap

思路：点击保存到相册要调用保存到相册的save方法，第一个参数为手机的本地文件路径，这里就有一个问题我们需要将当前页面的文件先存入手机的系统文件中，经过api寻找发现nativeObj中的Bitmap是可以通过loadBase64Data()将base64转换成原生图片对象，之后使用bitmap.save可以将原生图片对象放入系统文件并且通过成功回调获得文件的地址，之后再调用gallery的save()保存即可。

imageDown

入口函数（转化的图片base64，成功回调，失败回调）

const imageDown = function (base64, success, error) {
  var bitmap = new window.plus.nativeObj.Bitmap('image')
  bitmap.loadBase64Data(base64, function (i) {
    bigmapToSave(bitmap, success, error)
  }, function (err) {
    window.plus.nativeUI(err.message)
  })
}

export default imageDown

bigmapTosave

调用保存Bitmap的图片到本机系统文件，为之后相册保存提供路径

const bigmapToSave = function (bitmap, success, error) {
  var name = randomString(10)
  bitmap.save(`_doc/${name}.jpg`, { overwrite: false }, function (event) {
    console.log(event.target)
    imageSaveByGallery(event.target, success, error)
  }, function (err) {
    window.plus.nativeUI(err.message)
  })
}

注意：这里使用随机一个字符串作为存储的安卓路径名，是因为如果写死同个路径，不同的base64图片对象会覆盖原有的路径，不同机型还没测试，bitmap.save()中saveOption的overwrite在我测试机上无效。故使用过这个方法

imageSaveByGallery

保存到相册，保存成功调用外部的成功的回调，失败调用失败的回调

const imageSaveByGallery = function (url, success, error) {
  window.plus.gallery.save(url, function (event) {
    const tarbitmap = window.plus.nativeObj.Bitmap.getBitmapById('image')
    tarbitmap.clear()
    success()
  }, function (err) {
    window.plus.nativeUI(err.message)
    error()
  })
}

注意：当保存成功之后要记得使用bitmap.clear()清楚内存，因为原生图像的内存占用较大，文档中有所提示

randomString

随机一个字符串

const randomString = function randomString (e) {
  e = e || 32
  var t = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
  var a = t.length
  var n = ''
  for (var i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a))
  return n
}