1. 程式人生 > >huilder 上傳圖片 儲存圖片 拍照 muse ui

huilder 上傳圖片 儲存圖片 拍照 muse ui

html

<mu-bottom-sheet :open.sync="open">
  <mu-list class="list_btn">
    <mu-list-item button @click.stop="setImg" class="btn_list">
      <mu-list-item-title class="btn_text">拍照</mu-list-item-title>
    </mu-list-item>
    <mu-list-item button @click.stop="topMenuRight" class="btn_list">
      <mu-list-item-title class="btn_text">從手機相簿選擇</mu-list-item-title>
    </mu-list-item>
    <mu-list-item button @click.stop="saveImg" class="btn_list">
      <mu-list-item-title class="btn_text">儲存圖片</mu-list-item-title>
    </mu-list-item>
    <mu-list-item button @click.stop="open = false" class="btn_list">
      <mu-list-item-title class="btn_text">取消</mu-list-item-title>
    </mu-list-item>
  </mu-list>
</mu-bottom-sheet>

js

// 儲存圖片

saveImg () {
  let self = this
  console.log('圖片地址' + self.$store.state.user.icon)
  plus.gallery.save(self.$store.state.user.icon, function () {
    self.$toast.success('儲存圖片到相簿成功')
    self.open = false
  },function(){
    self.$toast.error('儲存失敗')
  })
},
//拍照
setImg () {
  let self = this
  let cmr = plus.camera.getCamera()
  cmr.captureImage(function (p){
    plus.io.resolveLocalFileSystemURL(p, function(entry){
      self.resolveImg(entry.toLocalURL())
    }, function(e){})
  }, function(e){},{filename: '_doc/camera/'})
},

// 壓縮

resolveImg (path) {
  this.open = false
  //圖片太大,需要壓縮
  let self = this
  let substr = path.substr(path.lastIndexOf("/") + 1)
  plus.io.resolveLocalFileSystemURL (path, function(entry) {
    entry.file(function(file) {
      let imgSize = file.size;
      plus.zip.compressImage({
        src: path,
        dst: '_doc/' + substr,
        width: '100%',
        quality: 100,
        overwrite: true
      }, function(event) {
        console.log("壓縮成功-->" + event.target)
        let minImg = event.target
        console.log(minImg)
        self.updateIcon(minImg) // 後臺介面方法
      })
    })
  }, function(e) {
    alert("Resolve file URL failed: " + e.message)
  })
},