時間:2017年06月23日星期五
說明:本文部份內容均來自慕課網。@慕課網:http://www.imooc.com
教學示例源碼:無
我的學習源碼:https://github.com/zccodere/s...javascript
二維碼示意圖html
使用場景java
目錄jquery
二維碼概念 二維碼發展歷史 二維碼分類 二維碼優缺點 QR Code 示例講解
二維碼概念git
二維條碼/二維碼(2-dimensional bar code)是用某種特定的幾何圖形按必定規律在平面(二位方向上)分佈的黑白相間的圖形記錄數據符號信息的圖形。
發展歷史github
一維條碼ide
一維條碼是由一組粗細不一樣、黑白(或彩色)相間的條、空及其相應的字符(數字字母)組成的標記,即傳統條碼。
一維條碼示意圖學習
二維條碼網站
二維條碼是用某種特定的幾何圖形按必定規律在平面(二維方向)上分佈的條、空相間的圖形來記錄數據符號信息。
二維條碼示意圖ui
二維條碼也有許多不一樣的碼制,就碼制的編碼原理而言,一般分爲三種類型:
1.線性堆疊式二維碼 2.矩陣式二維碼 3.郵政碼
線性堆疊式二維碼
編碼原理:創建在一維條碼基礎之上,按須要堆積成兩行或多行。
線性堆疊式二維碼示意圖
矩陣式二維碼
在一個矩形空間經過黑、白像素在矩陣中的不一樣分佈進行編碼。 在矩陣相應元素位置上,用點(方點、圓點或其餘形狀)的出現表示二進制「1」,點的不出現表示二進制的「0」
矩陣式二維碼示意圖
郵政碼
郵政碼經過不一樣長度的條進行編碼,主要用於郵件編碼,如:POSTNET、BPO 4-STATE
優勢
高密度編碼,信息容量大 (多達1850個大寫字母或2710數字或1108個字節或500個漢字) 編碼範圍廣 能夠把圖片、文字、指紋,能夠數字化的信息均可以進行編碼,用條碼顯示出來 容錯能力強 譯碼可靠性高 可引入加密措施 成本低、易製做、持久耐用
缺點
二維碼技術成爲手機病毒、釣魚網站傳播的新渠道 信息泄露
目前流行的三大國際標準:
PDF417:不支持中文 DM:專利未公開,需支付專利費用 QR Code:專利公開,支持中文
QR Code比其餘二維碼相比具備的優點
識讀速度快 數據密度大 佔用空間小
QR Code是由日本Denso公司於1994年研製的一種矩陣二維碼符號嗎,全稱是Quick Response Code
示意圖
JSP生成二維碼的方法
藉助第三方jar,如zxing和qrcodejar Javascript,如jquery.qrcode.js
zxing地址
https://github.com/zxing/zxing
Maven座標
<!-- https://mvnrepository.com/artifact/com.google.zxing/core --> <dependency> <groupId>com.google.zxing</groupId> <artifactId>core</artifactId> <version>3.3.0</version> </dependency> <!-- https://mvnrepository.com/artifact/com.google.zxing/javase --> <dependency> <groupId>com.google.zxing</groupId> <artifactId>javase</artifactId> <version>3.3.0</version> </dependency>
代碼演示:
package com.myimooc.zxing; import java.io.File; import java.nio.file.Path; import java.util.HashMap; import com.google.zxing.BarcodeFormat; import com.google.zxing.EncodeHintType; import com.google.zxing.MultiFormatWriter; import com.google.zxing.client.j2se.MatrixToImageWriter; import com.google.zxing.common.BitMatrix; import com.google.zxing.qrcode.decoder.ErrorCorrectionLevel; /** * 生成 二維碼 * @author ZhangCheng on 2017-06-23 */ public class CreateQRCode { public static void main(String[] args) { // 定義圖片的寬度和高度 int width = 300; int height = 300; // 定義圖片的格式 String format = "png"; // 定義二維碼的內容 String contents = "www.imooc.com"; Path file = new File("D:/img.png").toPath(); // 定義二維碼的參數 HashMap<EncodeHintType,Object> hints = new HashMap<EncodeHintType,Object>(); hints.put(EncodeHintType.CHARACTER_SET, "utf-8");// 設置字符編碼 hints.put(EncodeHintType.ERROR_CORRECTION, ErrorCorrectionLevel.M);// 設置容錯等級 hints.put(EncodeHintType.MARGIN, 2);// 設置邊距(默認值5) // 生成二維碼 try { BitMatrix bitMatrix = new MultiFormatWriter().encode(contents, BarcodeFormat.QR_CODE, width, height,hints); MatrixToImageWriter.writeToPath(bitMatrix, format, file); } catch (Exception e) { e.printStackTrace(); } } }
代碼演示:
package com.myimooc.zxing; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import java.util.HashMap; import javax.imageio.ImageIO; import com.google.zxing.BinaryBitmap; import com.google.zxing.EncodeHintType; import com.google.zxing.MultiFormatReader; import com.google.zxing.NotFoundException; import com.google.zxing.Result; import com.google.zxing.client.j2se.BufferedImageLuminanceSource; import com.google.zxing.common.HybridBinarizer; /** * 讀取 二維碼 * @author ZhangCheng on 2017-06-23 */ public class ReadQRCode { @SuppressWarnings({ "unchecked", "rawtypes" }) public static void main(String[] args) { MultiFormatReader formatReader = new MultiFormatReader(); // 定義二維碼文件路徑 File file = new File("D:/img.png"); // 讀取圖片文件識別爲一個圖片流 BufferedImage image; try { image = ImageIO.read(file); BinaryBitmap binaryBitmap = new BinaryBitmap( new HybridBinarizer( new BufferedImageLuminanceSource(image))); // 定義二維碼的參數 HashMap hints = new HashMap(); hints.put(EncodeHintType.CHARACTER_SET, "utf-8");// 設置字符編碼 // 解析二維碼 Result result = formatReader.decode(binaryBitmap,hints); System.out.println("解析結果:"+result.toString()); System.out.println("格式類型:"+result.getBarcodeFormat()); System.out.println("文本內容:"+result.getText()); } catch (IOException e) { e.printStackTrace(); } catch (NotFoundException e) { e.printStackTrace(); } } }
QRCode
生成:http://www.swetake.com/qrcode/index-e.html 讀取:https://osdn.jp/projects/qrcode/
代碼演示
1.生成二維碼
package com.myimooc.qrcode; import java.awt.Color; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java.io.File; import javax.imageio.ImageIO; import com.swetake.util.Qrcode; /** * 生成 二維碼 經過 Qrcode * * @author ZhangCheng on 2017-06-23 */ public class CreateQRCode { public static void main(String[] args) throws Exception { Qrcode x = new Qrcode(); // 二維碼顯示的內容 String qrData = "www.imooc.com"; int version = 7; int width = 67 + 12 * (version - 1); int height = 67 + 12 * (version - 1); // 設置二維碼排錯率,可選L(7%)、M(15%)、Q(25%)、H(30%),排錯率越高可存儲的信息越少,但對二維碼清晰 x.setQrcodeErrorCorrect('M');// 糾錯等級 x.setQrcodeEncodeMode('B');// N表明數字,A表明z-Z,B表明其餘字符 // 設置設置版本號,取值範圍1-40,值越大尺寸越大,可存儲的信息越大 x.setQrcodeVersion(version); BufferedImage bufferedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_BGR); Graphics2D gs = bufferedImage.createGraphics(); // 設置屬性 gs.setBackground(Color.WHITE); gs.setColor(Color.BLACK); gs.clearRect(0, 0, width, height); // 偏移量 int pixoff = 2; byte[] d = qrData.getBytes("gb2312"); if (d.length > 0 && d.length < 120) { boolean[][] s = x.calQrcode(d); for (int i = 0; i < s.length; i++) { for (int j = 0; j < s.length; j++) { if (s[j][i]) { gs.fillRect(j * 3 + pixoff, i * 3 + pixoff, 3, 3); } } } } gs.dispose(); bufferedImage.flush(); ImageIO.write(bufferedImage, "png", new File("D:/qrcode.png")); } }
2.讀取二維碼時,需實現 QRCodeImage 接口
package com.myimooc.qrcode; import java.awt.image.BufferedImage; import jp.sourceforge.qrcode.data.QRCodeImage; /** * 讀取 二維碼 時,需實現 QRCodeImage 接口 * * @author ZhangCheng on 2017-06-23 */ public class MyQRCodeImage implements QRCodeImage{ BufferedImage bufferedImage; public MyQRCodeImage(BufferedImage bufferedImage){ this.bufferedImage = bufferedImage; } @Override public int getHeight() { return bufferedImage.getHeight(); } @Override public int getPixel(int arg0, int arg1) { return bufferedImage.getRGB(arg0, arg1); } @Override public int getWidth() { return bufferedImage.getWidth(); } }
3.讀取二維碼
package com.myimooc.qrcode; import java.awt.image.BufferedImage; import java.io.File; import javax.imageio.ImageIO; import jp.sourceforge.qrcode.QRCodeDecoder; /** * 讀取 二維碼 經過 Qrcode * * @author ZhangCheng on 2017-06-23 */ public class ReadQRCode { public static void main(String[] args) throws Exception { File file = new File("D:/qrcode.png"); BufferedImage bufferedImage = ImageIO.read(file); QRCodeDecoder codeDecoder = new QRCodeDecoder(); String result = new String(codeDecoder.decode(new MyQRCodeImage(bufferedImage)),"gb2312"); System.out.println(result); } }
jquery-qrcode
地址:https://github.com/jeromeetienne/jquery-qrcode
代碼演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>生成二維碼</title> <script type="text/javascript" src="static/js/jquery.min.js"></script> <script type="text/javascript" src="static/js/jquery.qrcode.min.js"></script> </head> <body> 生成的二維碼以下:<br> <div id="qrcode"></div> <script type="text/javascript"> $('#qrcode').qrcode("www.imooc.com"); </script> </body> </html>
效果以下:
二維碼還能夠這樣
爲何咱們的二維碼掃描出來是文本而不是連接?
如何實現二維碼掃描安裝手機軟件?以慕課網爲例
如何實現二維碼掃描名片?
VCard是標準通訊薄基本格式
VCard規範
代碼實現