lzc-OCR.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. <template>
  2. <view class="box" @click="chooseImage">
  3. <image class="sfsb" mode="widthFix" :src="bSrc"></image>
  4. </view>
  5. </template>
  6. <script>
  7. let convert = require('./common/base64.js')
  8. import {
  9. translate
  10. } from '@/common/image.js'
  11. import config from '@/config.js'
  12. export default {
  13. data() {
  14. return {
  15. preSrc: '',
  16. bSrc: this.src,
  17. size: 0
  18. };
  19. },
  20. props: {
  21. src: {
  22. type: String,
  23. default: '/static/images/sfsb.png'
  24. },
  25. disabled: {
  26. type: Array,
  27. default: () => []
  28. }
  29. },
  30. mounted() {},
  31. methods: {
  32. // 选择本地图片
  33. chooseImage() {
  34. if (this.disabled.length > 0) return;
  35. uni.chooseImage({
  36. count: 1,
  37. mediaType: ['image'],
  38. sizeType: ['compressed'],
  39. sourceType: ['camera'],
  40. success: (res) => {
  41. uni.showLoading({
  42. title: '正在识别中...'
  43. })
  44. this.$emit('start', {
  45. animal: true,
  46. img: res.tempFilePaths[0]
  47. })
  48. let size = res.tempFiles[0].size
  49. let scale = 1
  50. if (size / 1024 / 1024 > 0.8) scale = 0.6
  51. translate(res.tempFilePaths[0], scale, 'blob', this.setSrc)
  52. }
  53. })
  54. },
  55. setSrc(e, blobUrl) {
  56. this.preSrc = blobUrl
  57. uni.getFileInfo({
  58. filePath: blobUrl,
  59. success: (res) => {
  60. console.log("身份证压缩:", res, res.size / 1024);
  61. this.size = res.size / 1024 / 1024
  62. let size = res.size
  63. let scale = 1
  64. if (size / 1024 / 1024 > 0.8) {
  65. scale = 0.6
  66. translate(this.preSrc, scale, 'blob', this.setSrc)
  67. } else {
  68. e = e.replace('data:image/jpeg;base64,', "");
  69. this.getAccessToken(e)
  70. }
  71. },
  72. fail: (err) => {
  73. console.log("err:", err);
  74. }
  75. })
  76. },
  77. setFace(e) {
  78. },
  79. // 获取AccessToken
  80. getAccessToken(path) {
  81. uni.request({
  82. url: '/baiduApi/oauth/2.0/token',
  83. data: {
  84. grant_type: 'client_credentials',
  85. client_id: config.ocr_client_id,
  86. client_secret: config.ocr_client_secret
  87. },
  88. method: 'POST',
  89. header: {
  90. 'Content-Type': 'application/x-www-form-urlencoded'
  91. },
  92. success: (res) => {
  93. this.bSrc = this.preSrc
  94. this.uploadImage(path, res.data.access_token)
  95. }
  96. })
  97. },
  98. // 身份证识别
  99. uploadImage(path, token) {
  100. uni.request({
  101. url: '/baiduApi/rest/2.0/ocr/v1/idcard',
  102. data: {
  103. image: path,
  104. access_token: token,
  105. id_card_side: 'front',
  106. detect_photo: true,
  107. detect_risk: true,
  108. detect_card: true,
  109. },
  110. timeout: 30000,
  111. method: 'POST',
  112. header: {
  113. 'Content-Type': 'application/x-www-form-urlencoded'
  114. },
  115. success: (res) => {
  116. uni.hideLoading()
  117. console.log(res,res.data, this.bSrc)
  118. this.$emit('end', res.data, this.bSrc)
  119. }
  120. })
  121. },
  122. }
  123. }
  124. </script>
  125. <style>
  126. .box {
  127. width: 100%;
  128. /* height: 100%; */
  129. }
  130. .sfsb {
  131. width: 100%;
  132. /* width: 180px; */
  133. }
  134. </style>