首页 >> js开发 >> jsVue+Java+Base64实现条码解析的示例js大全
jsVue+Java+Base64实现条码解析的示例js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
前端部分（Vue + Vant）
前端部分（Vue + Vant）
引入Vant、使用Vant中的Uploader组件上传文件(支持手机拍照)
引入Vant、使用Vant中的Uploader组件上传文件(支持手机拍照)
import Vue from 'vue'
import { Uploader } from 'vant'
Vue.use(Uploader);
import Vue from 'vue'
import { Uploader } from 'vant'
Vue.use(Uploader);
使用Uploader上传组件
使用Uploader上传组件
上传文件(识别条码)
上传文件(识别条码)
js部分、文件上传完毕后会触发 after-read 回调函数，获取到对应的 file 对象。
js部分、文件上传完毕后会触发 after-read 回调函数，获取到对应的 file 对象。after-read
file
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);
})
};
},
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 ）后端部分（Java ）添加 zxing + base64 依赖
com.google.zxing
core
3.3.3
com.google.zxing
javase
3.3.3
net.iharder
base64
2.3.8
com.google.zxing
core
3.3.3
com.google.zxing
javase
3.3.3
net.iharder
base64
2.3.8
@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 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;
}
@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 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实现条码解析的资料请关注其它相关文章！
前端部分（Vue + Vant）
引入Vant、使用Vant中的Uploader组件上传文件(支持手机拍照)
引入Vant、使用Vant中的Uploader组件上传文件(支持手机拍照)
import Vue from 'vue'
import { Uploader } from 'vant'
Vue.use(Uploader);
import Vue from 'vue'
import { Uploader } from 'vant'
Vue.use(Uploader);
使用Uploader上传组件
使用Uploader上传组件
上传文件(识别条码)
上传文件(识别条码)
js部分、文件上传完毕后会触发 after-read 回调函数，获取到对应的 file 对象。
js部分、文件上传完毕后会触发 after-read 回调函数，获取到对应的 file 对象。after-read
file
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);
})
};
},
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 ）后端部分（Java ）添加 zxing + base64 依赖
core
javase
base64
core
javase
base64
@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
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;
}
@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
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实现条码解析的资料请关注其它相关文章！
刚刚发布热门点击发布时间
- [02/23]chrome 浏览器插件外包:定制您的专属Chrome插件！专业外包团队助您轻松实现创意！
- [02/23]专业电脑浏览器插件外包服务，助力企业数字化转型！
- [02/23]解放双手，效率翻倍！Chrome插件前端自动化外包服务，助您轻松实现业务流程自动化！
- [02/23]定制您的专属Chrome插件！专业外包团队助您轻松实现创意！
- [02/23]Chrome插件外包：为你的浏览器赋能，开启无限可能
- [09/06]node js 调用kimi 接口批量生成网页
- [07/21]Node.js数据采集外包服务-数据采集专家-用Node.js释放数据的力量
- [07/21]专业前端开发-从PSD到响应式网页的无缝转换
- [07/18]专业Chrome插件开发- 为您的业务插上翅膀
- [07/18]智能数据抓取 -浏览器插件接口抓取服务外包
- [07/17]vue3 setup 监听url变化
- [07/17]git 回滚到指定 commit
- [07/15]浏览器插件使用场景:浏览器插件在数据抓取方面的使用场景非常广泛
- [07/15]Chrome 浏览器插件的使用场景
- [07/15]Chrome 浏览器插件开发的特点
