scan-frame.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. <template>
  2. <view class="cameraBg">
  3. <canvas style="width: 100%; height: 100vh;position: absolute;left: 100000px;" canvas-id="canvas" id="canvas"></canvas>
  4. <camera device-position="back" flash="auto" style="width: 100%; height: 100vh">
  5. <cover-image src="@/static/scan-frame/cameraBg.png" class="scan-img"> </cover-image>
  6. <cover-view class="scanBtn" v-if="scanShow">
  7. <cover-view class="beat" @click="scan">
  8. <cover-image class="beatImg" src="@/static/scan-frame/album.png"></cover-image>
  9. <cover-view> 相册 </cover-view>
  10. </cover-view>
  11. <cover-view class="album" @click="takePhoto">
  12. <cover-image class="albumImg" src="@/static/scan-frame/beat.png"></cover-image>
  13. <cover-view> 拍照 </cover-view>
  14. </cover-view>
  15. <cover-view class="inputs" @click="inputs">
  16. <cover-image class="beatImg" src="@/static/scan-frame/inputs.png"></cover-image>
  17. <cover-view> 手动输入 </cover-view>
  18. </cover-view>
  19. </cover-view>
  20. </camera>
  21. </view>
  22. </template>
  23. <script>
  24. export default {
  25. data() {
  26. return {
  27. scanShow: true,
  28. sysinfo: null,
  29. imageInfo: null
  30. }
  31. },
  32. onReady() {
  33. const sysinfo = uni.getSystemInfoSync()
  34. this.sysinfo = sysinfo
  35. console.log(sysinfo)
  36. },
  37. methods: {
  38. // 手动输入
  39. inputs(){
  40. uni.redirectTo({
  41. url:"/pages/vinInput/vinInput"
  42. })
  43. },
  44. // 相册
  45. scan() {
  46. // 选择图片
  47. uni.chooseImage({
  48. count: 1,
  49. sizeType: ['original', 'compressed'],
  50. sourceType: ['album'],
  51. success: (res) => {
  52. this.compress(res.tempFilePaths[0],false)
  53. }
  54. })
  55. },
  56. // 裁剪图片
  57. cutImg(fileUrl){
  58. const vm = this
  59. const ctx = uni.createCanvasContext('canvas')
  60. ctx.drawImage(fileUrl,0,0,this.sysinfo.windowWidth,this.sysinfo.windowHeight)
  61. ctx.draw(true,()=>{
  62. const cutW = 650
  63. const cutH = 160
  64. const cutT = 400
  65. const cutL = 50
  66. const canvasW=cutW/750*this.sysinfo.windowWidth;
  67. const canvasH=cutH/1624*this.sysinfo.windowHeight;
  68. const canvasL =cutL/750*this.sysinfo.windowWidth;
  69. const canvasT= cutT/1624*this.sysinfo.windowHeight;
  70. uni.canvasToTempFilePath({
  71. x: canvasL,
  72. y: canvasT,
  73. width: canvasW,
  74. height: canvasH,
  75. canvasId: 'canvas',
  76. success: function(res) {
  77. // 在H5平台下,tempFilePath 为 base64
  78. vm.camera64(res.tempFilePath)
  79. }
  80. })
  81. })
  82. },
  83. // 启动图片压缩
  84. compress(tempFilePaths,isCut) {
  85. const vm = this
  86. vm.scanShow = false
  87. uni.showLoading({
  88. title: '智能识别中...'
  89. })
  90. uni.compressImage({
  91. src: tempFilePaths,
  92. quality: 100,
  93. success: (imageRes) => {
  94. // 获取类型
  95. uni.getImageInfo({
  96. src: imageRes.tempFilePath,
  97. success(imageInfo) {
  98. console.log(imageInfo)
  99. vm.imageInfo = imageInfo
  100. if(isCut){
  101. // 裁剪图片
  102. vm.cutImg(imageRes.tempFilePath)
  103. }else{
  104. vm.camera64(imageRes.tempFilePath)
  105. }
  106. }
  107. })
  108. }
  109. })
  110. },
  111. // 拿到图片开始进行识别
  112. camera64(filePath) {
  113. console.log(filePath)
  114. uni.getFileSystemManager().readFile({
  115. filePath: filePath,
  116. encoding: 'base64',
  117. success: (base) => {
  118. // 返回base64格式
  119. const base64Str = 'data:image/' + this.imageInfo.type + ';base64,' + base.data
  120. // 拿到base64,不需要base64 就把上层的转换去掉
  121. this.scanShow = true
  122. uni.hideLoading()
  123. uni.showToast({
  124. title: '已识别到图片,看console',
  125. duration: 2000
  126. });
  127. console.log(base64Str,'base64Str图片')
  128. // 此处为后端接口 传base64图片 进行ocr识别
  129. },
  130. fail: (err) => {
  131. console.log(err)
  132. }
  133. })
  134. },
  135. // 拍照
  136. takePhoto() {
  137. const ctx = uni.createCameraContext()
  138. ctx.takePhoto({
  139. quality: 'high',
  140. success: (res) => {
  141. this.compress(res.tempImagePath,true)
  142. }
  143. })
  144. },
  145. error(e) {
  146. console.log(e.detail)
  147. }
  148. }
  149. }
  150. </script>
  151. <style lang="scss" scoped>
  152. .cameraBg {
  153. width: 100%;
  154. height: 100vh;
  155. position: fixed;
  156. .scan-img {
  157. width: 100%;
  158. height: 100vh;
  159. z-index: 1;
  160. }
  161. .scanBtn {
  162. width: 100%;
  163. z-index: 99999;
  164. position: fixed;
  165. bottom: 100rpx;
  166. display: flex;
  167. flex-direction: column;
  168. justify-content: center;
  169. align-items: center;
  170. .beat {
  171. position: absolute;
  172. bottom: 0rpx;
  173. left: 100rpx;
  174. display: flex;
  175. flex-direction: column;
  176. justify-content: center;
  177. align-items: center;
  178. font-size: 24rpx;
  179. font-weight: 400;
  180. color: #ffffff;
  181. .beatImg {
  182. width: 88rpx;
  183. height: 88rpx;
  184. margin-bottom: 30rpx;
  185. }
  186. }
  187. .inputs{
  188. position: absolute;
  189. bottom: 0rpx;
  190. right: 100rpx;
  191. display: flex;
  192. flex-direction: column;
  193. justify-content: center;
  194. align-items: center;
  195. font-size: 24rpx;
  196. font-weight: 400;
  197. color: #ffffff;
  198. .beatImg {
  199. width: 88rpx;
  200. height: 88rpx;
  201. margin-bottom: 30rpx;
  202. }
  203. }
  204. .album {
  205. display: flex;
  206. flex-direction: column;
  207. justify-content: center;
  208. align-items: center;
  209. font-size: 24rpx;
  210. font-weight: 400;
  211. color: #ffffff;
  212. .albumImg {
  213. width: 120rpx;
  214. height: 120rpx;
  215. margin-bottom: 30rpx;
  216. }
  217. }
  218. }
  219. }
  220. </style>