123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223 |
- <template>
- <view class="cameraBg">
- <canvas style="width: 100%; height: 100vh;position: absolute;left: 100000px;" canvas-id="canvas" id="canvas"></canvas>
- <camera device-position="back" flash="auto" style="width: 100%; height: 100vh">
- <cover-image src="@/static/scan-frame/cameraBg.png" class="scan-img"> </cover-image>
- <cover-view class="scanBtn" v-if="scanShow">
- <cover-view class="beat" @click="scan">
- <cover-image class="beatImg" src="@/static/scan-frame/album.png"></cover-image>
- <cover-view> 相册 </cover-view>
- </cover-view>
- <cover-view class="album" @click="takePhoto">
- <cover-image class="albumImg" src="@/static/scan-frame/beat.png"></cover-image>
- <cover-view> 拍照 </cover-view>
- </cover-view>
- <cover-view class="inputs" @click="inputs">
- <cover-image class="beatImg" src="@/static/scan-frame/inputs.png"></cover-image>
- <cover-view> 手动输入 </cover-view>
- </cover-view>
- </cover-view>
- </camera>
- </view>
- </template>
- <script>
-
- export default {
- data() {
- return {
- scanShow: true,
- sysinfo: null,
- imageInfo: null
- }
- },
- onReady() {
- const sysinfo = uni.getSystemInfoSync()
- this.sysinfo = sysinfo
- console.log(sysinfo)
- },
- methods: {
- // 手动输入
- inputs(){
- uni.redirectTo({
- url:"/pages/vinInput/vinInput"
- })
- },
- // 相册
- scan() {
- // 选择图片
- uni.chooseImage({
- count: 1,
- sizeType: ['original', 'compressed'],
- sourceType: ['album'],
- success: (res) => {
- this.compress(res.tempFilePaths[0],false)
- }
- })
- },
- // 裁剪图片
- cutImg(fileUrl){
- const vm = this
- const ctx = uni.createCanvasContext('canvas')
- ctx.drawImage(fileUrl,0,0,this.sysinfo.windowWidth,this.sysinfo.windowHeight)
- ctx.draw(true,()=>{
- const cutW = 650
- const cutH = 160
- const cutT = 400
- const cutL = 50
- const canvasW=cutW/750*this.sysinfo.windowWidth;
- const canvasH=cutH/1624*this.sysinfo.windowHeight;
- const canvasL =cutL/750*this.sysinfo.windowWidth;
- const canvasT= cutT/1624*this.sysinfo.windowHeight;
- uni.canvasToTempFilePath({
- x: canvasL,
- y: canvasT,
- width: canvasW,
- height: canvasH,
- canvasId: 'canvas',
- success: function(res) {
- // 在H5平台下,tempFilePath 为 base64
- vm.camera64(res.tempFilePath)
- }
- })
- })
- },
- // 启动图片压缩
- compress(tempFilePaths,isCut) {
- const vm = this
- vm.scanShow = false
- uni.showLoading({
- title: '智能识别中...'
- })
- uni.compressImage({
- src: tempFilePaths,
- quality: 100,
- success: (imageRes) => {
- // 获取类型
- uni.getImageInfo({
- src: imageRes.tempFilePath,
- success(imageInfo) {
- console.log(imageInfo)
- vm.imageInfo = imageInfo
- if(isCut){
- // 裁剪图片
- vm.cutImg(imageRes.tempFilePath)
- }else{
- vm.camera64(imageRes.tempFilePath)
- }
- }
- })
- }
- })
- },
- // 拿到图片开始进行识别
- camera64(filePath) {
- console.log(filePath)
- uni.getFileSystemManager().readFile({
- filePath: filePath,
- encoding: 'base64',
- success: (base) => {
- // 返回base64格式
- const base64Str = 'data:image/' + this.imageInfo.type + ';base64,' + base.data
- // 拿到base64,不需要base64 就把上层的转换去掉
- this.scanShow = true
- uni.hideLoading()
- uni.showToast({
- title: '已识别到图片,看console',
- duration: 2000
- });
- console.log(base64Str,'base64Str图片')
- // 此处为后端接口 传base64图片 进行ocr识别
- },
- fail: (err) => {
- console.log(err)
- }
- })
- },
- // 拍照
- takePhoto() {
- const ctx = uni.createCameraContext()
- ctx.takePhoto({
- quality: 'high',
- success: (res) => {
- this.compress(res.tempImagePath,true)
- }
- })
- },
- error(e) {
- console.log(e.detail)
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .cameraBg {
- width: 100%;
- height: 100vh;
- position: fixed;
- .scan-img {
- width: 100%;
- height: 100vh;
- z-index: 1;
- }
- .scanBtn {
- width: 100%;
- z-index: 99999;
- position: fixed;
- bottom: 100rpx;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- .beat {
- position: absolute;
- bottom: 0rpx;
- left: 100rpx;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- font-size: 24rpx;
- font-weight: 400;
- color: #ffffff;
- .beatImg {
- width: 88rpx;
- height: 88rpx;
- margin-bottom: 30rpx;
- }
- }
- .inputs{
- position: absolute;
- bottom: 0rpx;
- right: 100rpx;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- font-size: 24rpx;
- font-weight: 400;
- color: #ffffff;
- .beatImg {
- width: 88rpx;
- height: 88rpx;
- margin-bottom: 30rpx;
- }
- }
- .album {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- font-size: 24rpx;
- font-weight: 400;
- color: #ffffff;
- .albumImg {
- width: 120rpx;
- height: 120rpx;
- margin-bottom: 30rpx;
- }
- }
- }
- }
- </style>
|