开发电脑不能连接互联网，复制文本太不方便了吧，其实不用慌！

实现背景：
    在公司上班使用两台电脑，开发电脑、互联网电脑，开发电脑是不能连接互联网的，只作为项目开发使用，互联网电脑是用来连接互联网使用的；
    平时和其他外部人员沟通都是使用互联网电脑或者手机，一旦出现下面这种情况就比较麻烦了：
    我在和外部人员联调，需要给他发订单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="https://img-blog.csdnimg.cn/2022010611283599350.jpeg">
	 * 
	 * @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="&nbsp;请输入文字内容"></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