H5+app點擊圖片保存到相冊


 

MoustacheYJ
2019.09.25 17:53:29字數 573閱讀 2,647

業務場景:webapp點擊圖片保存到相冊

使用的h5api:

plus.gallery(系統相冊)http://www.html5plus.org/doc/zh_cn/gallery.html,plus.nativeObj.Bitmaphttp://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.Bitmap

思路:點擊保存到相冊要調用保存到相冊的save方法,第一個參數為手機的本地文件路徑,這個就有一個問題我們需要將當前的頁面的文件先存入手機的系統文件中,經過api的尋找發現nativeObj中的bitmap是可以通過loadBase64Data()將base64轉換成原生圖片對象,之后使用bitmap.save可以將原生圖片對象放入系統文件並且通過成功回調獲得文件的地址,之后再調用先gallery的save()保存就好了。

1.imageDown:入口函數(轉化的圖片base64,成功回調,失敗回調)

 

 
初始化bitmap對象

2.bigmapTosave:調用保存bitmap的圖片到本機系統文件,為之后相冊保存提供路徑

 

 
保存返回bitmap一個地址路徑

注意:這里使用過的隨機一個字符串的作為存的安卓路徑名,是因為如果寫死同個路徑,不用的base64圖片對象會覆蓋原有的路徑,不同機型還沒測試,bitmap.save()中的saveOption的overwrite在我測試機上無效。故使用過這個方法

3.imageSaveByGallery:保存到相冊,保存成功調用外部的成功的回調,失敗調用失敗的回調

 

 
保存到相冊

注意:當你保存成功之后要記得使用bitmap.clear()清楚內存,因為原生圖像的內存占用較大,文檔中有所提示

4.randomString:隨機一個字符串

 

 
隨機一個字符串

完整代碼:

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)

  })

}

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)

  })

}

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

  })

}

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

}

export default imageDown


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM