个人中心
gpt4 book ai didi

Vue+Java+Base64实现条码解析的示例

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 35 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章Vue+Java+Base64实现条码解析的示例由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

前端部分（Vue + Vant） 。

  • 引入Vant、使用Vant中的Uploader组件上传文件(支持手机拍照)
?
1
2
3
import Vue from 'vue'
import { Uploader } from 'vant'
Vue.use(Uploader);
  • 使用Uploader上传组件
?
1
2
3
4
5
< van-uploader >
  < van-button icon = "plus" type = "primary" :after-read = "afterRead" >   
   上传文件(识别条码)
</ van-button >
</ van-uploader >
  • js部分、文件上传完毕后会触发 after-read 回调函数，获取到对应的 file 对象。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
afterRead(file) {
   var self = this ;
   //调用上传回调函数 - upload
   this .upLoad( this .$baseUrl + "upload/uploadParsing" , file,
   function (response) {
     if ( response.msg.length >0){
      console.log(response.msg)
     } else {
       Toast.fail( '识别失败，请重新上传条码！' ,3500)
     }
    }); 
 
  },
 
  upLoad(url, file, func) {
     var fileBase64 = ''
     // 创建Canvas对象(画布)
     debugger
     let canvas = document.createElement( "canvas" );
     // 获取对应的CanvasRenderingContext2D对象(画笔)
     let context = canvas.getContext( "2d" );
     // 创建新的图片对象
     let img = new Image();
     // 指定图片的DataURL(图片的base64编码数据)
     img.src = file.content;
     // 监听浏览器加载图片完成，然后进行进行绘制
     img.onload = () => {
       // 指定canvas画布大小，该大小为最后生成图片的大小
       canvas.width = 400;
       canvas.height = 300;
       /* drawImage画布绘制的方法。(0,0)表示以Canvas画布左上角为起点，400，300是将图片按给定的像素进行缩小。
       如果不指定缩小的像素图片将以图片原始大小进行绘制，图片像素如果大于画布将会从左上角开始按画布大小部分绘制图片，最后的图片就是张局部图。*/
 
       context.drawImage(img, 0, 0, 400, 300);
       // 将绘制完成的图片重新转化为base64编码，file.file.type为图片类型，0.92为默认压缩质量
       file.content = canvas.toDataURL(file.file.type, 0.92);
       fileBase64 = file.content
       // 最后将base64编码的图片保存到数组中，留待上传。43      console.log(fileBase64)
       //查询字典值
       this .$axios.post(url,{ 'fileBase64Code' :fileBase64})
       .then( function (response) {
        func(response.data);
       }.bind( this ))
       . catch ( function (error) {
         Toast.file( "识别失败，请重新上传条码！" ,3500);
       })
    };
  },

后端部分（Java ） 。

添加 zxing + base64 依赖 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 解析二维码 -->
　　< dependency >
     < groupId >com.google.zxing</ groupId >
     < artifactId >core</ artifactId >
     < version >3.3.3</ version >
   </ dependency >
   < dependency >
     < groupId >com.google.zxing</ groupId >
     < artifactId >javase</ artifactId >
     < version >3.3.3</ version >
   </ dependency >
 
 
   <!-- Base64 -->
   <!-- https://mvnrepository.com/artifact/net.iharder/base64 -->
   < dependency >
     < groupId >net.iharder</ groupId >
     < artifactId >base64</ artifactId >
     < version >2.3.8</ version >
   </ dependency >

Controller 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
@ResponseBody
@RequestMapping (value = "/uploadParsing" , method = RequestMethod.POST)
public ResponseMessage uploadParsing( @RequestBody imgUploadMessage uploadFile){
   ResponseMessage rm= new ResponseMessage();
   //解析Base64编码之后 读取条
   try {
     String imgStr = uploadFile.getFileBase64Code().substring(uploadFile.getFileBase64Code().indexOf( "," )+ 1 );
     Decoder decoder = Base64.getDecoder();
     byte [] base = decoder.decode(imgStr);
     for ( int i = 0 ; i < base.length; ++i) {
       if (base[i] < 0 ) {
         base[i] += 256 ;
       }
     }
      ByteArrayInputStream byteArrayInputStream = new ByteArrayInputStream(base);
      BufferedImage read = ImageIO.read( byteArrayInputStream);
       if ( null ==read) {
         rm.setMsg( "解析失败" );
         rm.setSuccess( false );
         return rm;
       }
       BufferedImageLuminanceSource source = new BufferedImageLuminanceSource(read);
       BinaryBitmap bitmap = new BinaryBitmap( new HybridBinarizer(source));
       Map<DecodeHintType,Object> hints= new HashMap<>();
       hints.put(DecodeHintType.CHARACTER_SET, "GBK" );
       hints.put(DecodeHintType.PURE_BARCODE,Boolean.TRUE);
       hints.put(DecodeHintType.TRY_HARDER,Boolean.TRUE);
 
       Result decode = new MultiFormatReader().decode(bitmap, hints);
       log.debug( "条形码的内容是：" + decode.getText());
       rm.setMsg(decode.getText());
     
     } catch (Exception e) {
       e.printStackTrace();
       log.debug( "解析失败：" ,e);
       rm.setSuccess( false );
       rm.setMsg( "解析失败" );
     }
    return rm;
}

以上就是Vue+Java+Base64实现条码解析的示例的详细内容，更多关于Vue+Java+Base64实现条码解析的资料请关注我其它相关文章！ 。

原文链接：https://www.cnblogs.com/bingziweb/p/13713505.html 。

最后此篇关于Vue+Java+Base64实现条码解析的示例的文章就讲到这里了,如果你想了解更多关于Vue+Java+Base64实现条码解析的示例的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

35 4 0
文章推荐： Java 实现网络爬虫框架详细代码
文章推荐： VirtualBox虚拟机启动时提示“获取VirtualBox COM对象失败”怎么解决？
文章推荐： 游戏切换到桌面会黑屏几秒怎么解决？
文章推荐： Java File类 mkdir 不能创建多层目录的解决
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com