OCRIdentify.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620
  1. <template>
  2. <div class="ocr-all" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="识别中">
  3. <div style="color: #606266;font-size: 15px;font-weight: 600;">PS:选择图片后,点击要需要识别类型!</div>
  4. <div class="ocr-box">
  5. <el-upload
  6. action="#"
  7. list-type="picture-card"
  8. :on-change="handleChangePicture"
  9. :auto-upload="false">
  10. <i slot="default" class="el-icon-plus"></i>
  11. <div slot="file" slot-scope="{file}">
  12. <img
  13. class="el-upload-list__item-thumbnail"
  14. :src="file.url" alt=""
  15. >
  16. <span class="el-upload-list__item-actions">
  17. <span
  18. class="el-upload-list__item-preview"
  19. @click="handlePictureCardPreview(file)"
  20. >
  21. <i class="el-icon-zoom-in"></i>
  22. </span>
  23. <!-- <span
  24. v-if="!disabled"
  25. class="el-upload-list__item-delete"
  26. @click="handleDownload(file)"
  27. >
  28. <i class="el-icon-download"></i>
  29. </span>
  30. <span
  31. v-if="!disabled"
  32. class="el-upload-list__item-delete"
  33. @click="handleRemove(file)"
  34. >
  35. <i class="el-icon-delete"></i>
  36. </span> -->
  37. </span>
  38. </div>
  39. </el-upload>
  40. <el-dialog :visible.sync="dialogVisible">
  41. <img width="100%" :src="dialogImageUrl" alt="">
  42. </el-dialog>
  43. </div>
  44. <div style="color: #606266;font-size: 15px;font-weight: 600;text-align: center;">上传图片只能是 JPG,PNG,BMP 格式!大小不能超过 7MB!</div>
  45. <el-row>
  46. <el-button type="primary" @click="license(1)">营业执照</el-button>
  47. <el-button type="primary" @click="creditCode(1)">统一信用代码</el-button>
  48. <el-button type="primary" @click="IDcardR(1)">身份证-人像面</el-button>
  49. <el-button type="primary" @click="IDcardG(1)">身份证-国徽面</el-button>
  50. <el-button type="primary" @click="driving(1)">行驶证</el-button>
  51. <el-button type="primary" @click="household(1)">户口本</el-button>
  52. <el-button type="primary" @click="deed(1)">房产证</el-button>
  53. <el-button type="primary" @click="Marriage(1)">结婚证</el-button>
  54. <el-button type="primary" @click="mainlandPassport(1)">大陆护照</el-button>
  55. <el-button type="primary" @click="mainlandPassports(1)">护照</el-button>
  56. <el-button type="primary" @click="universal(1)">通用印刷体</el-button>
  57. <el-button type="primary" @click="license(2)">营业执照(英文)</el-button>
  58. <el-button type="primary" @click="creditCode(2)">统一信用代码(英文)</el-button>
  59. <el-button type="primary" @click="IDcardR(2)">身份证-人像面(英文)</el-button>
  60. <el-button type="primary" @click="IDcardG(2)">身份证-国徽面(英文)</el-button>
  61. <el-button type="primary" @click="driving(2)">行驶证(英文)</el-button>
  62. <el-button type="primary" @click="household(2)">户口本(英文)</el-button>
  63. <el-button type="primary" @click="deed(2)">房产证(英文)</el-button>
  64. <el-button type="primary" @click="Marriage(2)">结婚证(英文)</el-button>
  65. <el-button type="primary" @click="mainlandPassport(2)">大陆护照(英文)</el-button>
  66. <el-button type="primary" @click="mainlandPassports(2)">护照(英文)</el-button>
  67. <el-button type="primary" @click="universal(2)">通用印刷体(英文)</el-button>
  68. <div style="width:160px"></div>
  69. <div style="width:160px"></div>
  70. </el-row>
  71. </div>
  72. </template>
  73. <script>
  74. import { el } from '@fullcalendar/core/internal-common';
  75. export default {
  76. data() {
  77. return {
  78. token:'',
  79. userid:'',
  80. dialogImageUrl: '',
  81. dialogVisible: false,
  82. disabled: false,
  83. panduan:"",
  84. picBase64:'',
  85. fullscreenLoading:false,
  86. }
  87. },
  88. methods: {
  89. // handleRemove(file,) {
  90. // console.log(file);
  91. // file.status='cancel'
  92. // },
  93. handlePictureCardPreview(file) {
  94. this.dialogImageUrl = file.url;
  95. this.dialogVisible = true;
  96. },
  97. // handleDownload(file) {
  98. // console.log(file);
  99. // },
  100. handleChangePicture(file, fileList) {
  101. this.beforeAvatarUpload(file)
  102. if (fileList.length > 1) {
  103. fileList.splice(0, 1);
  104. }
  105. if(this.panduan){
  106. this.getBase64(file.raw).then(res => {
  107. this.picBase64=res
  108. console.log(res)
  109. });
  110. }
  111. },
  112. beforeAvatarUpload(file) {
  113. this.panduan=true;
  114. const isJPG = file.raw.type === 'image/jpeg';
  115. const isPNG = file.raw.type === 'image/png';
  116. const isWEBP = file.raw.type === 'image/webp';
  117. const isLt2M = file.size / 1024 / 1024 < 7;
  118. if (!isJPG&&!isPNG&&!isWEBP) {
  119. this.$message.error('上传图片只能是 JPG,PNG,BMP 格式!');
  120. this.panduan=false;
  121. }
  122. if (!isLt2M) {
  123. this.$message.error('上传图片大小不能超过 7MB!');
  124. this.panduan=false;
  125. }
  126. return isJPG && isLt2M;
  127. },
  128. getBase64(file) {
  129. return new Promise(function (resolve, reject) {
  130. const reader = new FileReader()
  131. let imgResult = ''
  132. reader.readAsDataURL(file)
  133. reader.onload = function () {
  134. imgResult = reader.result
  135. }
  136. reader.onerror = function (error) {
  137. reject(error)
  138. }
  139. reader.onloadend = function () {
  140. resolve(imgResult)
  141. }
  142. })
  143. },
  144. //身份证人像面
  145. IDcardR(val){
  146. this.fullscreenLoading = true;
  147. var url="/api/TencentOCR/GetIDCard"
  148. var that=this
  149. if(that.panduan){
  150. this.$axios({
  151. method: 'post',
  152. url:url,
  153. headers:{
  154. Authorization:'Bearer '+this.token
  155. },
  156. data:{
  157. portType: 1,
  158. userId:that.userid,
  159. language:val,
  160. picBase64:that.picBase64,
  161. cardSide:0
  162. }
  163. }).then(function(res){
  164. if(res.data.code==200){
  165. console.log(res)
  166. that.$message({
  167. message: res.data.msg,
  168. type: 'success'
  169. });
  170. that.fullscreenLoading = false;
  171. window.open(res.data.data.downUrl)
  172. }else{
  173. that.fullscreenLoading = false;
  174. that.$message({
  175. message: res.data.msg,
  176. type: 'warning'
  177. });
  178. }
  179. })
  180. }else{
  181. that.fullscreenLoading = false;
  182. this.$message.error('请检查图片是否为此类型!');
  183. }
  184. },
  185. //身份证国徽面
  186. IDcardG(val){
  187. this.fullscreenLoading = true;
  188. var url="/api/TencentOCR/GetIDCard"
  189. var that=this
  190. if(that.panduan){
  191. that.fullscreenLoading = true;
  192. this.$axios({
  193. method: 'post',
  194. url:url,
  195. headers:{
  196. Authorization:'Bearer '+this.token
  197. },
  198. data:{
  199. portType: 1,
  200. userId:that.userid,
  201. language:val,
  202. picBase64:that.picBase64,
  203. cardSide:1
  204. }
  205. }).then(function(res){
  206. if(res.data.code==200){
  207. console.log(res)
  208. that.$message({
  209. message: res.data.msg,
  210. type: 'success'
  211. });
  212. that.fullscreenLoading = false;
  213. window.open(res.data.data.downUrl)
  214. }else{
  215. that.fullscreenLoading = false;
  216. that.$message({
  217. message: res.data.msg,
  218. type: 'warning'
  219. });
  220. }
  221. })
  222. }else{
  223. that.fullscreenLoading = false;
  224. this.$message.error('请检查图片是否为此类型!');
  225. }
  226. },
  227. //营业执照
  228. license(val){
  229. this.fullscreenLoading=true;
  230. var url="/api/TencentOCR/GetBizLicenseOCR"
  231. var that=this
  232. if(that.panduan){
  233. that.fullscreenLoading = true;
  234. this.$axios({
  235. method: 'post',
  236. url:url,
  237. headers:{
  238. Authorization:'Bearer '+this.token
  239. },
  240. data:{
  241. language:val,
  242. picBase64:that.picBase64,
  243. }
  244. }).then(function(res){
  245. if(res.data.code==200){
  246. that.$message({
  247. message: res.data.msg,
  248. type: 'success'
  249. });
  250. that.fullscreenLoading=false;
  251. window.open(res.data.data.url)
  252. }else{
  253. that.fullscreenLoading=false;
  254. that.$message({
  255. message: res.data.msg,
  256. type: 'warning'
  257. });
  258. }
  259. })
  260. }else{
  261. that.fullscreenLoading = false;
  262. this.$message.error('请检查图片是否为此类型!');
  263. }
  264. },
  265. //统一信用代码
  266. creditCode(val){
  267. this.fullscreenLoading = true;
  268. var url="/api/TencentOCR/GetOrgCodeCertOCR"
  269. var that=this
  270. if(that.panduan){
  271. that.fullscreenLoading = true;
  272. this.$axios({
  273. method: 'post',
  274. url:url,
  275. headers:{
  276. Authorization:'Bearer '+this.token
  277. },
  278. data:{
  279. language:val,
  280. picBase64:that.picBase64,
  281. }
  282. }).then(function(res){
  283. if(res.data.code==200){
  284. console.log(res)
  285. that.$message({
  286. message: res.data.msg,
  287. type: 'success'
  288. });
  289. that.fullscreenLoading = false;
  290. window.open(res.data.data.url)
  291. }else{
  292. that.fullscreenLoading = false;
  293. that.$message({
  294. message: res.data.msg,
  295. type: 'warning'
  296. });
  297. }
  298. })
  299. }else{
  300. that.fullscreenLoading = false;
  301. this.$message.error('请检查图片是否为此类型!');
  302. }
  303. },
  304. //行驶证
  305. driving(val){
  306. this.fullscreenLoading = true;
  307. var url="/api/TencentOCR/GetVehicleLicense"
  308. var that=this
  309. if(that.panduan){
  310. that.fullscreenLoading = true;
  311. this.$axios({
  312. method: 'post',
  313. url:url,
  314. headers:{
  315. Authorization:'Bearer '+this.token
  316. },
  317. data:{
  318. language:val,
  319. picBase64:that.picBase64,
  320. cardSide:0
  321. }
  322. }).then(function(res){
  323. if(res.data.code==200){
  324. console.log(res)
  325. that.$message({
  326. message: res.data.msg,
  327. type: 'success'
  328. });
  329. that.fullscreenLoading = false;
  330. window.open(res.data.data.url)
  331. }else{
  332. that.fullscreenLoading = false;
  333. that.$message({
  334. message: res.data.msg,
  335. type: 'warning'
  336. });
  337. }
  338. })
  339. }else{
  340. that.fullscreenLoading = false;
  341. this.$message.error('请检查图片是否为此类型!');
  342. }
  343. },
  344. //户口本
  345. household(val){
  346. this.fullscreenLoading = true;
  347. var url="/api/TencentOCR/GetResidenceBookletOCR"
  348. var that=this
  349. if(that.panduan){
  350. that.fullscreenLoading = true;
  351. this.$axios({
  352. method: 'post',
  353. url:url,
  354. headers:{
  355. Authorization:'Bearer '+this.token
  356. },
  357. data:{
  358. language:val,
  359. picBase64:that.picBase64,
  360. }
  361. }).then(function(res){
  362. if(res.data.code==200){
  363. console.log(res)
  364. that.$message({
  365. message: res.data.msg,
  366. type: 'success'
  367. });
  368. that.fullscreenLoading = false;
  369. window.open(res.data.data.url)
  370. }else{
  371. that.fullscreenLoading = false;
  372. that.$message({
  373. message: res.data.msg,
  374. type: 'warning'
  375. });
  376. }
  377. })
  378. }else{
  379. that.fullscreenLoading = false;
  380. this.$message.error('请检查图片是否为此类型!');
  381. }
  382. },
  383. //房产证
  384. deed(val){
  385. this.fullscreenLoading = true;
  386. var url="/api/TencentOCR/GetPropOwnerCert"
  387. var that=this
  388. if(that.panduan){
  389. that.fullscreenLoading = true;
  390. this.$axios({
  391. method: 'post',
  392. url:url,
  393. headers:{
  394. Authorization:'Bearer '+this.token
  395. },
  396. data:{
  397. language:val,
  398. picBase64:that.picBase64,
  399. }
  400. }).then(function(res){
  401. if(res.data.code==200){
  402. console.log(res)
  403. that.$message({
  404. message: res.data.msg,
  405. type: 'success'
  406. });
  407. that.fullscreenLoading = false;
  408. window.open(res.data.data.url)
  409. }else{
  410. that.fullscreenLoading = false;
  411. that.$message({
  412. message: res.data.msg,
  413. type: 'warning'
  414. });
  415. }
  416. })
  417. }else{
  418. that.fullscreenLoading = false;
  419. this.$message.error('请检查图片是否为此类型!');
  420. }
  421. },
  422. //结婚证
  423. Marriage(val){
  424. this.fullscreenLoading = true;
  425. var url="/api/TencentOCR/GetMarriageLicense"
  426. var that=this
  427. if(that.panduan){
  428. that.fullscreenLoading = true;
  429. this.$axios({
  430. method: 'post',
  431. url:url,
  432. headers:{
  433. Authorization:'Bearer '+this.token
  434. },
  435. data:{
  436. language:val,
  437. picBase64:that.picBase64,
  438. }
  439. }).then(function(res){
  440. if(res.data.code==200){
  441. console.log(res)
  442. that.$message({
  443. message: res.data.msg,
  444. type: 'success'
  445. });
  446. that.fullscreenLoading = false;
  447. window.open(res.data.data.url)
  448. }else{
  449. that.fullscreenLoading = false;
  450. that.$message({
  451. message: res.data.msg,
  452. type: 'warning'
  453. });
  454. }
  455. })
  456. }else{
  457. that.fullscreenLoading = false;
  458. that.$message.error('请检查图片是否为此类型!');
  459. }
  460. },
  461. //大陆护照
  462. mainlandPassport(val){
  463. this.fullscreenLoading = true;
  464. var url="/api/TencentOCR/GetPassport"
  465. var that=this
  466. if(that.panduan){
  467. that.fullscreenLoading = true;
  468. this.$axios({
  469. method: 'post',
  470. url:url,
  471. headers:{
  472. Authorization:'Bearer '+this.token
  473. },
  474. data:{
  475. language:val,
  476. picBase64:that.picBase64,
  477. }
  478. }).then(function(res){
  479. if(res.data.code==200){
  480. console.log(res)
  481. that.$message({
  482. message: res.data.msg,
  483. type: 'success'
  484. });
  485. that.fullscreenLoading = false;
  486. window.open(res.data.data.url)
  487. }else{
  488. that.fullscreenLoading = false;
  489. that.$message({
  490. message: res.data.msg,
  491. type: 'warning'
  492. });
  493. }
  494. })
  495. }else{
  496. that.fullscreenLoading = false;
  497. that.$message.error('请检查图片是否为此类型!');
  498. }
  499. },
  500. //护照
  501. mainlandPassports(val){
  502. this.fullscreenLoading = true;
  503. var url="/api/TencentOCR/GetMLIDPassport"
  504. var that=this
  505. if(that.panduan){
  506. that.fullscreenLoading = true;
  507. this.$axios({
  508. method: 'post',
  509. url:url,
  510. headers:{
  511. Authorization:'Bearer '+this.token
  512. },
  513. data:{
  514. language:val,
  515. picBase64:that.picBase64,
  516. }
  517. }).then(function(res){
  518. if(res.data.code==200){
  519. console.log(res)
  520. that.$message({
  521. message: res.data.msg,
  522. type: 'success'
  523. });
  524. that.fullscreenLoading = false;
  525. window.open(res.data.data.url)
  526. }else{
  527. that.fullscreenLoading = false;
  528. that.$message({
  529. message: res.data.msg,
  530. type: 'warning'
  531. });
  532. }
  533. })
  534. }else{
  535. that.fullscreenLoading = false;
  536. that.$message.error('请检查图片是否为此类型!');
  537. }
  538. },
  539. //通用印刷体
  540. universal(val){
  541. this.fullscreenLoading = true;
  542. var url="/api/TencentOCR/GetGeneralBasic"
  543. var that=this
  544. if(that.panduan){
  545. that.fullscreenLoading = true;
  546. this.$axios({
  547. method: 'post',
  548. url:url,
  549. headers:{
  550. Authorization:'Bearer '+this.token
  551. },
  552. data:{
  553. language:val,
  554. picBase64:that.picBase64,
  555. }
  556. }).then(function(res){
  557. if(res.data.code==200){
  558. console.log(res)
  559. that.$message({
  560. message: res.data.msg,
  561. type: 'success'
  562. });
  563. that.fullscreenLoading = false;
  564. window.open(res.data.data.url)
  565. }else{
  566. that.fullscreenLoading = false;
  567. that.$message({
  568. message: res.data.msg,
  569. type: 'warning'
  570. });
  571. }
  572. })
  573. }else{
  574. that.fullscreenLoading = false;
  575. that.$message.error('请检查图片是否为此类型!');
  576. }
  577. },
  578. },
  579. mounted(){
  580. this.token=JSON.parse(localStorage.getItem('userinif')).token;
  581. this.userid=JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
  582. }
  583. }
  584. </script>
  585. <style>
  586. .ocr-all {
  587. background-color: #fff;
  588. padding: 10px;
  589. box-shadow: 0 0 5px #0005;
  590. border-radius: 10px;
  591. }
  592. .ocr-box .el-upload-list--picture-card .el-upload-list__item{
  593. display: inline-flex;
  594. }
  595. .ocr-box{
  596. display: flex;
  597. justify-content: center;
  598. margin-top: 180px;
  599. }
  600. .ocr-all .el-button--primary{
  601. width: 160px;
  602. margin: 10px 0px;
  603. }
  604. .ocr-all .el-button+.el-button{
  605. margin-left: 0px;
  606. }
  607. .ocr-all .el-row{
  608. width: 44%;
  609. margin: 0 auto;
  610. margin-top: 30px;
  611. margin-bottom: 180px;
  612. display: flex;
  613. flex-wrap: wrap;
  614. justify-content: space-between;
  615. }
  616. .ocr-all .el-row::after, .ocr-all .el-row::before{
  617. content: none;
  618. }
  619. </style>