版权声明:本文为博主原创文章,未经博主允许不得转载。 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>