图片识别vue-cropper

imageCut.js子组件

<template><div class='imageCut' v-if='imageCutshow'><van-loading color="#1989fa" class="loading" v-show="loadingshow" /><div class="info-item"><div style="margin-top:15px;margin-left:15px;"><input type="button" class="oper" style="width: 30px; height: 30px; border-radius:50%;border: none;font-size:15px;" value="+" title="放大" @click="changeScale(1)"><!-- <input type="button" class="oper" style="width: 30px; height: 30px; border-radius:50%;border: none;font-size:15px;" value="-" title="缩小" @click="changeScale(-1)"> --><input type="button" class="oper" style="width: 30px; height: 30px; border-radius:50%;border: none;font-size:15px;" value="↺" title="左旋转" @click="rotateLeft"><input type="button" class="oper" style="width: 30px; height: 30px; border-radius:50%;border: none;font-size:15px;" value="↻" title="右旋转" @click="rotateRight"><!-- <input type="button" class="oper" style="width: 30px; height: 30px; border-radius:50%;border: none;font-size:15px;" value="↓" title="下载" @click="down('blob')"> --><!-- <input type="button" class="oper" style="width: 30px; height: 30px; border-radius:50%;border: none;font-size:15px;" value="↑" title="下载" @click="down('blob')"> --></div><div class="line"><div class="cropper-content"><div class="cropper"><vue-cropperref="cropper":img="option.img":outputSize="option.size":outputType="option.outputType":info="true":full="option.full":canMove="option.canMove":canMoveBox="option.canMoveBox":original="option.original":autoCrop="option.autoCrop":autoCropWidth="option.autoCropWidth":autoCropHeight="option.autoCropHeight":fixedBox="option.fixedBox"@realTime="realTime"@imgLoad="imgLoad"></vue-cropper></div><div class="addrssbtn"><div class="itembtn"  @click="cancleUp()">取消</div><div class="itembtn itembtn-active" style='border-left: 1px solid #ccc;' @click="finish('base64')">确定</div></div></div></div></div></div>
</template><script>
export default {props: {fileUrl: {type: String,},imageCutshow:{Boolean}},watch: {fileUrl(val) {// debugger;// if (val.length > 0) {//     lrz(val, {width: 1200})//         .then(rst=> { //             console.log('rst',rst.file.size/(1024*1024)+'M');//             this.show = true;this.option.img = val;this.imageCutshow=true;//         })//         .catch(err=>{//             this.false;//             this.Global.fetch.toast('压缩图片失败,请重新上传','none');//         });// }},},data() {return {loadingshow:false,// imageCutshow:false,headImg:'',//剪切图片上传crap: false,// previews: {},option: {img: '',outputSize:1, //剪切后的图片质量（0.1-1）full: false,//输出原图比例截图 props名fulloutputType: 'png',//裁剪生成图片的格式canMove: true, original: false, canMoveBox: true, //截图框能否拖动autoCrop: true, //是否默认生成截图框(只有自动截图开启 宽度高度才生效)autoCropWidth: 300, autoCropHeight: 200, fixedBox: false }, fileName:'',  //本机文件地址downImg: '#',imgFile:'',uploadImgRelaPath:'', //上传后的图片的地址（不带服务器域名）};}, methods: { //放大/缩小changeScale(num) { console.log('changeScale');num = num || 1; this.$refs.cropper.changeScale(num); }, //坐旋转rotateLeft() { console.log('rotateLeft');this.$refs.cropper.rotateLeft(); }, //右旋转rotateRight() { console.log('rotateRight');this.$refs.cropper.rotateRight(); }, //上传图片（点击上传按钮）finish(type) {// debugger;console.log('finish');let _this = this;let formData = new FormData();// 输出 if (type === 'blob') { this.$refs.cropper.getCropBlob((data) => { let img = window.URL.createObjectURL(data); this.upServise(img);// this.$emit('confirm', data,loading);});} else { this.$refs.cropper.getCropData((data) => { // this.model = true; // this.modelSrc = data; this.upServise(data);// this.$emit('confirm', data);}); } },// 上传接口upServise(img){this.loadingshow=true;this.$api.hshlImageDiscern({'image': img}).then((res) => {this.loadingshow=false;if(res.data.code===0){this.$emit('confirm', res.data.data);}else{// this.$emit('confirm', data);}this.$emit('update:imageCutshow', false);});},// 实时预览函数 realTime(data) { console.log('realTime');this.previews = data; }, //下载图片down(type) { console.log('down');let aLink = document.createElement('a'); aLink.download = 'author-img'; if (type === 'blob') { this.$refs.cropper.getCropBlob((data) => { this.downImg = window.URL.createObjectURL(data);aLink.href = window.URL.createObjectURL(data); aLink.click(); }); } else { this.$refs.cropper.getCropData((data) => { this.downImg = data;aLink.href = data; aLink.click(); }); } }, //选择本地图片uploadImg(e, num) { console.log('uploadImg');let _this = this;//上传图片 let file = e.target.files[0]; _this.fileName = file.name;if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) { alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种'); return false; } let reader = new FileReader(); reader.onload =(e) => { let data; if (typeof e.target.result === 'object') { // 把Array Buffer转化为blob 如果是base64不需要 data = window.URL.createObjectURL(new Blob([e.target.result])); } else { data = e.target.result; }if (num === 1) { _this.option.img = data; } else if (num === 2) { _this.example2.img = data; } }; // 转化为base64 // reader.readAsDataURL(file) // 转化为blob reader.readAsArrayBuffer(file);}, cancleUp(){this.$emit('update:imageCutshow', false);},imgLoad(msg) { console.log('imgLoad');console.log(msg); }}, };
</script><style lang="scss" scoped>
.imageCut{width: 100%;height: 100vh;position: fixed;top: 0;left:0;z-index:200;background: rgba(0, 0, 0, 1);.loading{position: relative;left:50%;top:45%;z-index: 9999;}.van-icon{font-size: 30px;color:#fff;position: absolute;left: 50%;bottom: 120px;transform: translateX(-50%);}.info {width: 720px;margin: 0 auto;.oper-dv {height:20px;text-align:right;margin-right:100px;a {font-weight: 500;&:last-child {margin-left: 30px;}}}.info-item {margin-top: 15px;label {display: inline-block;width: 100px;text-align: right;}.sel-img-dv {position: relative;.sel-file {position: absolute;width: 90px;height: 30px;opacity: 0;cursor: pointer;z-index: 2;}.sel-btn {position: absolute;cursor: pointer;z-index: 1;}}}}.cropper-content{// display: flex;// display: -webkit-flex;// justify-content: flex-end;// -webkit-justify-content: flex-end;.cropper{width: 100%;height: 500px;// margin: 30px auto;.vue-cropper{background-image: none;}}.bottombtn{width: 100%;// background-color: #;height: 60px;position: fixed;bottom: 0;display: flex;justify-content: space-between;.items{margin: 7px 10px;}}.addrssbtn{width: 100%;background-color: #fff;height: 60px;position: fixed;bottom: 0;display: flex;justify-content: space-between;.itembtn{margin: 7px 10px;height: 46px;width: 45%;line-height: 46px;text-align: center;font-size: 16px;// border-left: 1px solid #ccc;color: #000;}.itembtn-active{// background-color: royalblue;color: #0068B7;}}.show-preview{// flex: 1;// -webkit-flex: 1;// display: flex;// display: -webkit-flex;// justify-content: center;// -webkit-justify-content: center;.preview{overflow: hidden;border-radius: 50%;border:1px solid #cccccc;background: #cccccc;margin-left: 40px;}}}.cropper-content .show-preview .preview {margin-left: 0;}
}
</style>

父组件

 <image-cut  :imageCutshow.sync="imageCutshow" :fileUrl='fileUrl' @confirm='confirmgetdata'></image-cut>

        confirmgetdata(data){if(data.content==''){this.$toast('暂无解析出内容，请检查图片是否准确~');return;}this.ucAnalysis=this.checkund(data.content);this.addressParams.name=this.checkund(data.name);this.addressParams.phone=this.checkund(data.phone);this.addressParams.address=this.checkund(data.address);this.addressParams.companyName=this.checkund(data.companyName);this.addressParams.provinceName=this.checkund(data.provinceName);this.addressParams.provinceCode=this.checkund(data.provinceCode);this.addressParams.cityName=this.checkund(data.cityName);this.addressParams.cityCode=this.checkund(data.cityCode);this.addressParams.districtName=this.checkund(data.districtName);this.addressParams.districtCode=this.checkund(data.districtCode);this.addressProvincecity=this.addressParams.provinceName+this.addressParams.cityName+this.addressParams.districtName;this.addressParams.createdBy=this.checkund(data.createdBy);this.shibieTips=true;},

图片识别vue-cropper相关推荐

Vue实现长按图片识别图中二维码
Vue实现长按图片识别图中二维码思路:要想实现可以识别图片中的二维码,那必定是要将这张图进行上传操作,上传则需要file对象格式.不管是在H5还是APP中,展示的图片都是通过url的方式展示在img ...
使用阿里云的图片识别成表格ocr（将图片表格转换成excel）
为了简便财务总是要对照着别人发来的表格图片制作成自己的表格图片识别识别成表格表格识别 ocr 使用阿里云api 购买(印刷文字识别-表格识别) https://market.aliyun.com ...
图片识别 python 神经网络,神经网络提取图片特征
Python如何图像识别? Python图片文本识别使用的工具是PIL和pytesser. 因为他们使用到很多的python库文件,为了避免一个个工具的安装,建议使用pythonxypytesser是 ...
Python实现图片识别加翻译，高薪必备技能
Python使用百度AI接口实现图片识别加翻译 python python诞生30周年 encoding:utf-8 import requests import base64 from PIL im ...
物联网技术周报第 141 期: 使用 Alexa Voice 和 Raspberry Pi 构建图片识别应用
新闻 \\ \\t <Ubuntu 16.04 LTS 已在英特尔 NUC 和物联网主板上获得认证>在全球拥有数百万用户的热门GNU/Linux发行版本--Ubuntu的背后公司Canon ...
iOS--OCR图片识别
应公司财务需求,要做一个收据识别功能.所以在网上搜索了下三方SDK,其中tesseract-ocr受到了大多数网友的推荐.我当然是前往https://github.com/gali8/Tesserac ...
Atitit java 二维码识别图片识别
Atitit java 二维码识别图片识别 1.1. 解码1 1.2. 首先,我们先说一下二维码一共有40个尺寸.官方叫版本Version.1 1.3. 二维码的样例:2 1.4. 定位图案2 1. ...
plt保存图片_人工智能Keras CNN卷积神经网络的图片识别模型训练
CNN卷积神经网络是人工智能的开端,CNN卷积神经网络让计算机能够认识图片,文字,甚至音频与视频.CNN卷积神经网络的基础知识,可以参考:CNN卷积神经网络 LetNet体系结构是卷积神经网络的&qu ...
[验证码识别技术]-初级的滑动式验证图片识别
初级的滑动式验证图片识别方案 1 abstract 验证码作为一种自然人的机器人的判别工具,被广泛的用于各种防止程序做自动化的场景中.传统的字符型验证安全性已经名存实亡的情况下,各种新型的验证码如雨后 ...
DL之CNN：利用卷积神经网络算法(2→2,基于Keras的API-Functional)利用MNIST(手写数字图片识别)数据集实现多分类预测
DL之CNN:利用卷积神经网络算法(2→2,基于Keras的API-Functional)利用MNIST(手写数字图片识别)数据集实现多分类预测目录输出结果设计思路核心代码输出结果下边两张 ...

图片识别vue-cropper

图片识别vue-cropper相关推荐

最新文章

热门文章