實現背景：
在公司上班使用兩臺電腦，開發電腦、互聯網電腦，開發電腦是不能連接互聯網的，只作爲項目開發使用，互聯網電腦是用來連接互聯網使用的；
平時和其他外部人員溝通都是使用互聯網電腦或者手機，一旦出現下面這種情況就比較麻煩了：
我在和外部人員聯調，需要給他發訂單id，訂單號等等信息，這些數據都是在開發電腦，不能聯網怎麼辦？
1.拍照（我方便，他不方便啊），2.手動輸入（實在太麻煩了，錯一個都不行），3.U盤複製到互聯網電腦（還是麻煩）
所以就想着做一個 文本轉二維碼的web項目，部署到測試環境服務器上面，大家都可以使用；
功能：
頁面輸入框輸入文本內容，點擊生成二維碼，手機微信掃碼顯示內容，可以複製或者轉發給其他人；
源碼地址： https://gitee.com/zhaoHengCodes/zCode.git
環境：springBoot、bootstrap、thymeleaf
實現效果圖：
1. 項目頁面效果
2. 手機微信掃碼效果
1、實現思路
進入主頁面，在文本框輸入相應的字符串，點擊生成二維碼，調用後臺接口，後臺返回base64字符串，頁面使用img標籤顯示二維碼
2、後臺關鍵代碼
2.1 生成二維碼的類
package com.zhh.api.util;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.HashMap;
import org.springframework.util.Base64Utils;
import com.google.zxing.BarcodeFormat;
import com.google.zxing.EncodeHintType;
import com.google.zxing.WriterException;
import com.google.zxing.client.j2se.MatrixToImageWriter;
import com.google.zxing.common.BitMatrix;
import com.google.zxing.qrcode.QRCodeWriter;
/**
* 生成二維碼
* @author zhoaheng
*
*/
public class QRCodeGenerator {
/**
* 文本生成二維碼圖片的Base64編碼
* 前端通過通過img標籤顯示，前綴加上base64編碼（前綴：data:image/jpeg;base64,）例如：
* <img src="data:image/jpeg;base64,base64編碼">
*
* @param text 文本
* @param width 圖片寬度
* @param height 圖片高度
* @return
* @throws WriterException
* @throws IOException
*/
public static String getQRCodeBase64(String text, int width, int height) throws WriterException, IOException {
QRCodeWriter qrCodeWriter = new QRCodeWriter();
HashMap<EncodeHintType, Object> hints = new HashMap<>();
hints.put(EncodeHintType.CHARACTER_SET, "utf-8");
BitMatrix bitMatrix =qrCodeWriter.encode(text,BarcodeFormat.QR_CODE, width, height,hints);
ByteArrayOutputStream pngOutputStream = new ByteArrayOutputStream();
MatrixToImageWriter.writeToStream(bitMatrix, "PNG", pngOutputStream);
byte[] base64Byte = pngOutputStream.toByteArray();
String data = Base64Utils.encodeToString(base64Byte);
return data;
}
}
2.2 controller
package com.zhh.api.code.controller;
import java.io.IOException;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import com.google.zxing.WriterException;
import com.zhh.api.common.ResultBean;
import com.zhh.api.util.QRCodeGenerator;
/**
* 二維碼生成
* @author zhaoheng
*
*/
@Controller
@RequestMapping("/qrCode")
public class QrCodeController {
private static final Logger log = LoggerFactory.getLogger(QrCodeController.class);
/**
* 跳轉到主頁面
* @return
*/
@RequestMapping("/toIndex")
public ModelAndView toIndex(){
ModelAndView modelAndView = new ModelAndView("code/index");
return modelAndView;
}
/**
* 字符串生成二維碼
* @param text 文字
* @return
*/
@ResponseBody
@RequestMapping("/createdQrCode")
public ResultBean reCode(@RequestParam(value="text",defaultValue="")String text){
try {
if (StringUtils.isEmpty(text) || text.replaceAll(" ", "").length() == 0) {
return ResultBean.error("-1", "請輸入文本內容！","");
}
return ResultBean.success(QRCodeGenerator.getQRCodeBase64(text, 200,200));
} catch (WriterException | IOException e) {
log.error("字符串生成二維碼異常,字符串：{}",text,e);
e.printStackTrace();
return ResultBean.error("-1", "生成二維碼異常："+e.getMessage(), "");
}
}
}
3、前端關鍵代碼
3.1 js
// 項目訪問前綴
var serverPath = "/zCode";
// base64圖片前綴
var qrCodeImgPrefix = "data:image/jpeg;base64,";
$(function () {
/**
* 點擊生成二維碼按鈕
*/
$("#createdCodeButton").click(function(){
var textContent = $("#textContent").val();
if (isEmpty(textContent)) {
alert("請輸入文本內容！");
return false;
}
if(textContent.length > 500){
alert("輸入字符不能大於1000！");
return false;
}
getCode(textContent);
});
/**
* 調用生成二維碼的方法
* text 需要生成二維碼的字符串
*/
function getCode(text){
$.ajax({
type:"POST",
dataType:"json",
async:false,
url: serverPath + "/qrCode/createdQrCode",
data:{"text":text},
error:function(data){
alert("生成二維碼失敗！");
},
success:function(data){
var imgSrc = qrCodeImgPrefix + data.data;
$("#qrCodeImg").attr('src',imgSrc);
}
});
}
//判斷字符是否爲空的方法
function isEmpty(obj){
var regu = "^[ ]+$";
var re = new RegExp(regu);
if(typeof obj == "undefined" || obj == null || obj == "" || re.test(obj)){
return true;
}else{
return false;
}
}
});
3.2 html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<title>文本生成二維碼</title>
<link rel="icon" th:href="@{/static/image/common/favicon.ico}" type="image/x-icon"> <!-- 在網頁標題左側顯示圖標 -->
<link rel="shortcut icon" th:href="@{/static/image/common/favicon.ico}" type="image/x-icon"> <!-- 在收藏夾顯示圖標 -->
<!-- jquery -->
<script th:src="@{/static/js/jquery.min.js}"></script>
<!-- bootstrap -->
<link th:href="@{/static/js/bootstrap-3.3.7-dist/css/bootstrap.min.css}" rel="stylesheet">
<script th:src="@{/static/js/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>
<!-- bootstrap-table -->
<link th:href="@{/static/js/bootstrap-table/dist/bootstrap-table.min.css}" rel="stylesheet">
<script th:src="@{/static/js/bootstrap-table/dist/bootstrap-table.min.js}"></script>
<script th:src="@{/static/js/bootstrap-table/dist/bootstrap-table-zh-CN.min.js}"></script>
<script th:src="@{/static/js/index.js}"></script>
</head>
<body>
<br/><br/>
<div class="container">
<div class="row" >
<div class="col-md-6">
<!-- 文本輸入 -->
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">文本內容</h3>
</div>
<div class="panel-body">
<form role="form">
<div class="form-group">
<textarea class="form-control" id="textContent" rows="8" placeholder=" 請輸入文字內容"></textarea>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" id="createdCodeButton" class="btn btn-primary">生成二維碼</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-6" >
<!-- 圖片展示 -->
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">微信掃碼</h3>
</div>
<div class="panel-body">
<a href="#" class="thumbnail">
<img id="qrCodeImg" src="" class="img-rounded" alt="此處生成二維碼">
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
3、源碼地址：https://gitee.com/zhaoHengCodes/zCode.git