之前公司要求写个云标签的模块（标签包含文字，一维码，二维码和图片），大致过程是将标签转为zpl命令传给打印客户端，客户端再传给标签打印机的，针对zpl命令生成，我想了三种思路，每种思路各有利弊。其中前端我使用的是vue，后端使用的是java，客户端使用的c#。
思路1：使用html2canvas 截取标签的整个div生成图片，将图片传到后台生成zpl命令
1.1 安装插件
npm install html2canvas --save
1.2 引入插件
import html2canvas from 'html2canvas'
1.3 截取div
//获取要被截取的div元素
var zpl=document.getElementById("zpl");
//得到div元素的宽和高
let width = zpl.offsetWidth;
let height = zpl.offsetHeight;
//创建canvas元素
let canvas = document.createElement("canvas");
//设置生成的图片的放大系数
let scaleBy = 1
//设置生成的图片的宽和高
canvas.width = width * scaleBy;
canvas.height = height * scaleBy;
// 设置图片的属性
var opts = {
allowTaint: true,//允许加载跨域的图片
tainttest: true, //检测每张图片都已经加载完成
scale: scaleBy, // 放大系数
canvas: canvas, //自定义canvas
logging: true, //日志开关，发布的时候记得改成false
dpi: 300,//dpi设置
background:'#fafafa'//背景颜色
};
//开始截图
html2canvas(zpl, opts).then(function (canvas) {
//我将生成的图片放进一个数组
that.zplList.push({
//生成的图片转换成base64，参数1为图片的格式，参数2为图片的清晰度，最大为1，最小为0.1
base64Url: canvas.toDataURL("image/png", 1.0),
})
});
1.4 图片保存到后台（见思路2的base64转图片方法），图片转成zpl命令（见最后）
思路2：一个标签的4种组件分别传入后台，在后台分别生成zpl命令。（用于先预览后打印）
2.1 安装插件
//一维码
npm install @xkeshi/vue-barcode vue
//二维码
npm install vue-qr --save
2.2 引入插件
//引入一维码
import VueBarcode from '@xkeshi/vue-barcode'
//引入二维码
import vueQr from 'vue-qr'
//一维码插件属性
{
format: "CODE128",//选择要使用的条形码类型
width: 2,//设置条之间的宽度
height: 30,//高度
text:"456",//内容
displayValue: true, //是否默认显示条形码数据
textPosition: 'bottom', //条形码数据显示的位置
background: 'transparent', //条形码背景颜色
lineColor:"#2196f3",//设置条和文本的颜色
fontOptions:"bold italic",//使文字加粗体或变斜体
font: "宋体",//设置文本的字体
fontSize: 15,//设置文本的大小
textAlign: "center",//设置文本的水平对齐方式
textMargin: 5,//设置条形码和文本之间的间距
margin: 2,//设置条形码周围的空白边距
valid: function (valid) {
//当内容格式错误时，valid为false，正确为true
}
}
//二维码插件属性
{
text: "123",//内容
size: 5,//大小
margin: 0//设置二维码周围的空白边距
}
2.3 各组件转化为图片
文本：zpl命令中不识别中文，因此需要在后台生成图片，再转成zpl命令。
一维码和二维码：使用插件生成，在页面中实际为img标签，src中为base64，因此只需要获取src，长，宽，在标签中的左边距，在标签中的上边距。
图片：在后台转成zpl命令。
（
知识点：dpi=152<=>dpmm=6，dpi=203<=>dpmm=8，dpi=300<=>dpmm=12，dpi=600<=>dpmm=24
注意点：zpl生成前，需要将客户端选择的打印机的dpi参数传给前台，因为各组件和标签的参数单位是px，需要根据dpi转换成zpl命令中的参数，下面是我自己测试得来的转换（误差很小）：
假设页面中的标签的大小与实际标签大小的比例为n:1，如页面中的标签为400px×400px，实际的标签大小为100mm×100mm，则
文本：
zpl左边距：页面中左边距×dpmm/n
zpl上边距：页面中上边距×dpmm/n
文字大小：页面中文字大小×1.5/(6/dpmm)×n
zpl宽：页面中宽×1.6/(6/dpmm)×n
zpl高：页面中高×1.6/(6/dpmm)×n
---------------------------------------------
图片（一维码，二维码也是图片）：
zpl左边距：页面中左边距×dpmm/n
zpl上边距：页面中上边距×dpmm/n
zpl宽：页面中宽×1.5/(6/dpmm)×n
zpl高：页面中高×1.5/(6/dpmm)×n
----------------------------------------------
标签：
zpl宽：页面中宽×dpmm
zpl高：页面中高×dpmm
）
上面将4种组件和标签的参数全部转换后，就可以传到后台生成图片了。
java文本转图片
@Component
public class StrToImg {
@Autowired
private FilePathUtil filePathUtil;
/**
* text:文本
* width：宽
* height:高
* fontFamily:样式
* fontSize：大小
* */
public String getStrToImgPath( String text,
double width,
double height,
String fontFamily,
double fontSize) throws IOException {
String path = filePathUtil.getFilepath() + "/LabelZPL/";
File newFile = new File(path);
if(!newFile.exists()){
newFile.mkdirs();
}
String imgPath = new Date().getTime()+".jpeg";
BufferedImage bi = null;
Graphics2D g2 = null;
try{
bi = new BufferedImage((int)width, (int)height, BufferedImage.TYPE_INT_RGB);//创建图片画布
g2 = (Graphics2D) bi.getGraphics();
//g2.setBackground(Color.white);
Color bg = new Color(255, 255, 255);
g2.setColor(bg);// 先用白色填充整张图片,也就是背景
g2.fillRect(0, 0, (int)width, (int)height);//画出矩形区域，以便于在矩形区域内写入文字
g2.setColor(Color.black);// 先用白色填充整张图片,也就是背景
Font font = new Font(fontFamily, Font.PLAIN, (int)fontSize);//设置画笔字体
g2.setFont(font);
g2.drawString(text,0,font.getSize());
ImageIO.write(bi, "jpg", new File(path + imgPath));
return path + imgPath;
} catch (Exception e) {
System.out.println(e.toString());
e.printStackTrace();
return "";
} finally {
if (g2 != null){
g2.dispose();
}
}
}
}
base64转图片
@Component
public class Base64ToImg {
@Autowired
private FilePathUtil filePathUtil;
/**
* data:base64字符串
* */
public String generateImg(String data){
String base64Data = data.split(",")[1];
/**
* 2.解码成字节数组
*/
Base64.Decoder decoder = Base64.getDecoder();
byte[] bytes = decoder.decode(base64Data);
/**
* 3.字节流转文件
*/
FileOutputStream fos = null;
String path = filePathUtil.getFilepath() + "/Base64ZPL/";
File newFile = new File(path);
if(!newFile.exists()){
newFile.mkdirs();
}
String imgPath = new Date().getTime()+".jpeg";
try {
fos = new FileOutputStream(path+imgPath);
fos.write(bytes);
return path+imgPath;
} catch (IOException e) {
return "";
} finally {
if (fos != null){
try {
fos.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
}
如果前台支持缩放组件，则后台需要改变图片大小
public class ChangeImgSize {
/**
* newWidth:转换后的宽
* newHeight：转换后的高
* path:图片路径
* */
public static boolean changeSize(double newWidth, double newHeight, String path) {
try {
//字节流转图片对象
BufferedImage input = ImageIO.read(new File(path));
Image scaledImage = input.getScaledInstance((int)newWidth, (int)newHeight,Image.SCALE_DEFAULT);
//构建图片流
BufferedImage tag = new BufferedImage((int)newWidth,(int)newHeight, BufferedImage.TYPE_INT_ARGB);
//绘制改变尺寸后的图
tag.getGraphics().drawImage(scaledImage, 0, 0,null);
//输出流
BufferedOutputStream out = new BufferedOutputStream(new FileOutputStream(path));
ImageIO.write(tag, "PNG", out);
out.close();
return true;
} catch (IOException e) {
return false;
}
}
}
2.4 图片转为zpl命令（方法见最后）
思路3：将页面中的标签和4种组件的参数传给后台，后台去生成图片。（用于自动打印）
3.1 安装jar包
//maven安装
<dependency>
<groupId>com.google.zxing</groupId>
<artifactId>core</artifactId>
<version>3.3.0</version>
</dependency>
//gradle安装
compile group: 'com.google.zxing', name: 'core', version: '3.3.0'
3.2 各组件生成图片
不同于思路2，思路3需要将打印机的dpi传给后台，后台利用思路2中的算法去生成图片。
注意点：前台生成的二维码和后台生成的二维码区别不大，但是后台生成的一维码格式没有前台生成的一维码格式丰富，需要前台砍掉一些格式的选择，其次后台生成的一维码下面没有文字，需要将前台一维码下面的文字不显示。
java生成二维码和一维码
@Component
public class CreateQRCodeOrBarCode {
@Autowired
private FilePathUtil filePathUtil;
private final String CHARSET = "utf-8";
private final int BLACK = 0xFF000000;
private final int WHITE = 0xFFFFFFFF;
/**
* width:宽
* height：高
* content:二维码内容
* */
public String CreateQRCode(String content,double width,double height) {
HashMap hints = new HashMap();
hints.put(EncodeHintType.CHARACTER_SET, "utf-8");// 字符集
hints.put(EncodeHintType.ERROR_CORRECTION, ErrorCorrectionLevel.M);// 纠错级别
hints.put(EncodeHintType.MARGIN, 0);// 空白
try {
BitMatrix bitMatrix = new MultiFormatWriter().encode(content,
BarcodeFormat.QR_CODE, (int)width, (int)height, hints);
String qrCodePath = filePathUtil.getFilepath()+ "/QRCode/";
File newFile = new File(qrCodePath);
if(!newFile.exists()){
newFile.mkdirs();
}
String imgPath = new Date().getTime()+".jpeg";
MatrixToImageWriter.writeToFile(bitMatrix, "jpeg", new File(qrCodePath+imgPath));
return qrCodePath+imgPath;
} catch (Exception e) {
System.out.println(e.toString());
return "";
}
}
/**
* width:宽
* height：高
* content:一维码内容
* format:一维码格式
* */
public String createBarCode(String content,double width,double height,String format) {
BitMatrix bitMatrix = toBarCodeMatrix(content,width,height,format);
BufferedImage image = toBufferedImage(bitMatrix);
try {
String barCodePath = filePathUtil.getFilepath() + "/BarCode/";
File newFile = new File(barCodePath);
if(!newFile.exists()){
newFile.mkdirs();
}
String imgPath = new Date().getTime()+".jpeg";
ImageIO.write(image, "jpeg", new File(barCodePath+imgPath));
return barCodePath+imgPath;
} catch (IOException e) {
System.out.println(e.toString());
return "";
}
}
public BitMatrix toBarCodeMatrix(String content,double width,double height,String format) {
try {
HashMap hints = new HashMap();
hints.put(EncodeHintType.CHARACTER_SET, CHARSET);
hints.put(EncodeHintType.ERROR_CORRECTION, ErrorCorrectionLevel.M);// 纠错级别
hints.put(EncodeHintType.MARGIN, 0);
BitMatrix bitMatrix = null;
if(format.equals("CODE39")){
bitMatrix = new MultiFormatWriter().encode(content,
BarcodeFormat.CODE_39, (int)width, (int)height, hints);
}else if(format.equals("EAN8")){
bitMatrix = new MultiFormatWriter().encode(content,
BarcodeFormat.EAN_8, (int)width, (int)height, hints);
}else if(format.equals("EAN13")){
bitMatrix = new MultiFormatWriter().encode(content,
BarcodeFormat.EAN_13, (int)width, (int)height, hints);
}else if(format.equals("ITF")){
bitMatrix = new MultiFormatWriter().encode(content,
BarcodeFormat.ITF, (int)width, (int)height, hints);
}else if(format.equals("UPC")){
bitMatrix = new MultiFormatWriter().encode(content,
BarcodeFormat.UPC_A, (int)width, (int)height, hints);
}else{
bitMatrix = new MultiFormatWriter().encode(content,
BarcodeFormat.CODE_128, (int)width, (int)height, hints);
}
return bitMatrix;
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
public BufferedImage toBufferedImage(BitMatrix matrix) {
int width = matrix.getWidth();
int height = matrix.getHeight();
BufferedImage image = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
for (int x = 0; x < width; x++) {
for (int y = 0; y < height; y++) {
image.setRGB(x, y, matrix.get(x, y) ? BLACK : WHITE);
}
}
return image;
}
}
3.3 图片转为zpl命令（方法见最后）
总结
拓展：标签中各组件可以增加一个数据源字段（除图片），然后传入对象数组，for循环数组，
对象中的key值与数据源相同时，取出对象的value值赋给组件的值，就能用一个模板打印出很多的标签了。
上面的三种思路各有利弊，下面是分析：
思路1：优点：快速简洁，代码简单。
缺点：截取出来的图片很模糊，有时候打印出来的标签中复杂的二维码我都扫不出来，所以方案也被boss pass掉了，其次用模板打印很多的标签，截图本身是异步的方法，需要加以考虑。
思路2：优点：相比于思路1打印出来清楚很多，相比思路3前端的插件功能强大，尤其是一维码。
缺点：相比思路1代码复杂多了，还要获取dpi写算法，生成很多的图片再转换成zpl，相比思路3，因为是将一维码和二维码的src传给后台，所以首先要预览下，做不出传入对象数组，就能自动打印的接口。
思路3：优点：相比于思路1打印出来清楚很多，相比思路3能写出只要传入一个模板和对象数组，就能一下子全部打印出来的接口，且不需要预览。
缺点：相比思路1代码复杂多了，相比思路2，需要舍弃前台一维码插件的很多功能。
最后附上java图片转zpl的代码和zpl命令测试地址
zpl命令测试地址
http://labelary.com/viewer.html
java图片转zpl
public class ImgToZPL {
private int blackLimit = 380;
private int total;
private int widthBytes;
private boolean compressHex = false;
private static Map<Integer, String> mapCode = new HashMap<Integer, String>();
{
mapCode.put(1, "G");
mapCode.put(2, "H");
mapCode.put(3, "I");
mapCode.put(4, "J");
mapCode.put(5, "K");
mapCode.put(6, "L");
mapCode.put(7, "M");
mapCode.put(8, "N");
mapCode.put(9, "O");
mapCode.put(10, "P");
mapCode.put(11, "Q");
mapCode.put(12, "R");
mapCode.put(13, "S");
mapCode.put(14, "T");
mapCode.put(15, "U");
mapCode.put(16, "V");
mapCode.put(17, "W");
mapCode.put(18, "X");
mapCode.put(19, "Y");
mapCode.put(20, "g");
mapCode.put(40, "h");
mapCode.put(60, "i");
mapCode.put(80, "j");
mapCode.put(100, "k");
mapCode.put(120, "l");
mapCode.put(140, "m");
mapCode.put(160, "n");
mapCode.put(180, "o");
mapCode.put(200, "p");
mapCode.put(220, "q");
mapCode.put(240, "r");
mapCode.put(260, "s");
mapCode.put(280, "t");
mapCode.put(300, "u");
mapCode.put(320, "v");
mapCode.put(340, "w");
mapCode.put(360, "x");
mapCode.put(380, "y");
mapCode.put(400, "z");
}
public String convertfromImg(BufferedImage image) throws IOException {
String cuerpo = createBody(image);
if(compressHex)
cuerpo = encodeHexAscii(cuerpo);
return headDoc() + cuerpo;
}
private String createBody(BufferedImage orginalImage) throws IOException {
StringBuffer sb = new StringBuffer();
Graphics2D graphics = orginalImage.createGraphics();
graphics.drawImage(orginalImage, 0, 0, null);
int height = orginalImage.getHeight();
int width = orginalImage.getWidth();
int rgb, red, green, blue, index=0;
char auxBinaryChar[] = {'0', '0', '0', '0', '0', '0', '0', '0'};
widthBytes = width/8;
if(width%8>0){
widthBytes= (((int)(width/8))+1);
} else {
widthBytes= width/8;
}
this.total = widthBytes*height;
for (int h = 0; h<height; h++)
{
for (int w = 0; w<width; w++)
{
rgb = orginalImage.getRGB(w, h);
red = (rgb >> 16 ) & 0x000000FF;
green = (rgb >> 8 ) & 0x000000FF;
blue = (rgb) & 0x000000FF;
char auxChar = '1';
int totalColor = red + green + blue;
if(totalColor>blackLimit){
auxChar = '0';
}
auxBinaryChar[index] = auxChar;
index++;
if(index==8 || w==(width-1)){
sb.append(fourByteBinary(new String(auxBinaryChar)));
auxBinaryChar = new char[]{'0', '0', '0', '0', '0', '0', '0', '0'};
index=0;
}
}
sb.append("\n");
}
return sb.toString();
}
private String fourByteBinary(String binaryStr){
int decimal = Integer.parseInt(binaryStr,2);
if (decimal>15){
return Integer.toString(decimal,16).toUpperCase();
} else {
return "0" + Integer.toString(decimal,16).toUpperCase();
}
}
private String encodeHexAscii(String code){
int maxlinea = widthBytes * 2;
StringBuffer sbCode = new StringBuffer();
StringBuffer sbLinea = new StringBuffer();
String previousLine = null;
int counter = 1;
char aux = code.charAt(0);
boolean firstChar = false;
for(int i = 1; i< code.length(); i++ ){
if(firstChar){
aux = code.charAt(i);
firstChar = false;
continue;
}
if(code.charAt(i)=='\n'){
if(counter>=maxlinea && aux=='0'){
sbLinea.append(",");
} else if(counter>=maxlinea && aux=='F'){
sbLinea.append("!");
} else if (counter>20){
int multi20 = (counter/20)*20;
int resto20 = (counter%20);
sbLinea.append(mapCode.get(multi20));
if(resto20!=0){
sbLinea.append(mapCode.get(resto20) + aux);
} else {
sbLinea.append(aux);
}
} else {
sbLinea.append(mapCode.get(counter) + aux);
if(mapCode.get(counter)==null){
}
}
counter = 1;
firstChar = true;
if(sbLinea.toString().equals(previousLine)){
sbCode.append(":");
} else {
sbCode.append(sbLinea.toString());
}
previousLine = sbLinea.toString();
sbLinea.setLength(0);
continue;
}
if(aux == code.charAt(i)){
counter++;
} else {
if(counter>20){
int multi20 = (counter/20)*20;
int resto20 = (counter%20);
sbLinea.append(mapCode.get(multi20));
if(resto20!=0){
sbLinea.append(mapCode.get(resto20) + aux);
} else {
sbLinea.append(aux);
}
} else {
sbLinea.append(mapCode.get(counter) + aux);
}
counter = 1;
aux = code.charAt(i);
}
}
return sbCode.toString();
}
private String headDoc(){
String str = "^GFA,"+ total + ","+ total + "," + widthBytes +", ";
return str;
}
public void setCompressHex(boolean compressHex) {
this.compressHex = compressHex;
}
public void setBlacknessLimitPercentage(int percentage){
blackLimit = (percentage * 768 / 100);
}
}
2431
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
