apicloud相机及从相册里上传图片并剪切

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Thekingyu/article/details/80875601

<template>
  <div class="chat" style="font-size: 0.16rem">
    <img :src=tu />
    <div @click="bb">点击上传图片</div>
    <div id="box" v-show="btn" @click="bao">点击保存</div>
  </div>
</template>

<script>
  import { DatetimePicker } from 'mint-ui';
  export default {
    name: 'chat',
    data () {
      return {
        res:'',
        path:'',
        tu:'',
        btn:false,
      }
    },
    // components:{HeaderName,FooterName},
    methods:{
      bb:function () {
// 点击弹出选择框
        api.actionSheet({
          cancelTitle : '取消',
          buttons : ['拍照', '手机相册']
        }, function(ret, err) {
          if (ret) {
            // 调用拍照功能
            getPicture(ret.buttonIndex);
          }
        });

        let that=this;
        let thathttp=this.$http

        //相机拍照
        function getPicture(sourceType) {
          // 1为相机拍照，2为从相册选择
          if (sourceType == 1) {
            api.getPicture({
              sourceType : 'camera',
              encodingType : 'jpg',
              mediaValue : 'pic',
              allowEdit : false,
              quality : 96,
              saveToPhotoAlbum : false
            }, function(ret, err) {
              // 获取拍照图像并剪辑
              if (!ret.data.length) {
                api.toast({
                  msg : '请使用相机拍照',
                  duration : 3000,
                  location : 'bottom'
                });
              } else {
                // 剪辑图片
                var FNImageClip = api.require('FNImageClip');
                that.btn=true;
                FNImageClip.open({
                  rect : {
                    x : 0,
                    y : 0,
                    w : api.winWidth,
                    h : api.winHeight-50
                    // - document.querySelector('#box').offsetHeight
                  },
                  srcPath : ret.data,
                  mode : 'image',
                  style : {
                    mask : 'rgba(0,0,0,0.75)',
                    clip : {
                      w : 200,
                      h : 200,
                      x : (api.frameWidth - 200) / 2,
                      y : (api.frameHeight - 200) / 2,
                      borderColor : '#0f0',
                      borderWidth : 1,
                      appearance : 'rectangle'
                    }
                  },
                }, function(ret, err) {
                });
              }
            });
          } else if (sourceType == 2) {
            // 从相册里选择图片
            var UIMediaScanner = api.require('UIMediaScanner');
            UIMediaScanner.open({
              type : 'picture',
              column : 4,
              classify : true,
              max : 1,
              sort : {
                key : 'time',
                order : 'desc'
              },
              texts : {
                stateText : '已选择*项',
                cancelText : '取消',
                finishText : '完成'
              },
              styles : {
                bg : '#fff',
                mark : {
                  icon : '',
                  position : 'bottom_left',
                  size : 20
                },
                nav : {
                  bg : '#eee',
                  stateColor : '#000',
                  stateSize : 18,
                  cancelBg : 'rgba(0,0,0,0)',
                  cancelColor : '#000',
                  cancelSize : 18,
                  finishBg : 'rgba(0,0,0,0)',
                  finishColor : '#000',
                  finishSize : 18
                }
              },
              scrollToBottom : {
                intervalTime : 3,
                anim : true
              },
              exchange : true,
              rotation : true
            }, function(ret) {
              if (ret) {
                that.path=ret
                that.wei=JSON.stringify(ret.list)
                // ret.list[0].path为图片路径
              // 剪辑图片
                var FNImageClip = api.require('FNImageClip');
                that.btn=true;
                FNImageClip.open({
                  rect: {
                    x: 0,
                    y: 0,
                    w: api.winWidth,
                    h: api.winHeight - 50
                  },
                  srcPath: ret.list[0].path,
                  style : {
                    mask : 'rgba(0,0,0,0.75)',
                    clip : {
                      w : 200,
                      h : 200,
                      x : (api.frameWidth - 200) / 2,
                      y : (api.frameHeight - 200) / 2,
                      borderColor : '#0f0',
                      borderWidth : 0,
                      appearance : 'rectangle'
                    }
                  },
                  fixedOn: api.frameName
                }, function(ret, err) {
          // 剪辑模块没有保存按钮，保存按钮为自己定义，，本次用了 #box
                });

              }
            });
          }}
      },
      bao:function () {
// 点击保存按钮
        function nub(minNum, maxNum) {
          switch(arguments.length) {
            case 1:
              return parseInt(Math.random() * minNum + 1);
              break;
            case 2:
              return parseInt(Math.random() * (maxNum - minNum + 1) + minNum);
              break;
            default:
              return 0;
              break;
          }
        }

        let thathttp=this.$http
        var that=this;
        var FNImageClip = api.require('FNImageClip');
        var nubs = nub(1000, 3000);
        FNImageClip.save({
          destPath : 'fs://tx_' + nubs + '.jpg',
          copyToAlbum : false,
          quality : 1
        }, function(ret, err) {
          // 保存按钮消失
         that.btn=false;
          // ret.destPath为返回图片路径
          var tx = ret.destPath;
          FNImageClip.close();
          if (ret) {
            // 出现加载中
            api.showProgress({
              animationType: 'fade',
              title: '吃饱屎冷静下',
              text: '先喝杯茶...',
            });
            // 上传图片
            // avatar名字前后端一致
            api.ajax({
              method:"post",
              url:that.text1()+'/v1/users/avatar/53/1',
              data:{
                files: {
                  avatar:ret.destPath
                }
              },
              dataType:'json',
              async:true,
            },function(ret,err){
              if(ret.code==200){
                that.tu=that.text1()+ ret.data.path
              }else {
              }
              // 成功后删除加载中
              api.hideProgress();
            })
          } else {
            alert(JSON.stringify(err));
          }
        });
      },
      go:function () {
        this.$router.push({ path: '/' })
      },
      openPicker() {
        this.$refs.picker.open();
      },
      goIndex:function () {
        window.location.hash = '/'
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #box{
    width: 100%;
    height: 0.5rem;
    position: fixed;
    bottom:0;
    left: 0;
    text-align: center;
    font-size: 0.14rem;
    z-index: 200;
    background: #3ABA63;
    line-height: 0.5rem;
  }
</style>