H5+混合app点击图片保存到相册

690 阅读1分钟
图片名称

看一看

h5+API: www.html5plus.org/doc/zh_cn/w…
plus.gallery(系统相册)www.html5plus.org/doc/zh_cn/g…
plus.nativeObj.bitMap(原生对象下的图片对象)www.html5plus.org/doc/zh_cn/g…

简易流程图

  • 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)
  })
}

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

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
}

  • bigmapTosave:调用保存bitmap的图片到本机系统文件,为之后相册保存提供路径
const bigmapToSave = function (bitmap, success, error) {
  var name = randomString(10)
  bitmap.save(`_doc/${name}.jpg`, { overwrite: false }, function (event) {
    imageSaveByGallery(event.target, success, error)
  }, function (err) {
    window.plus.nativeUI(err.message)
  })
}

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


  • 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()
  })
}