java后台生成二维码,并在前端网页上显示
我做的是在网站内容详情页下点击微信分享,需要弹出二维码,话不多说,直接看效果:
1

首先在前端页面定义二维码容器,用来存放后台生成的二维码(下面是对应上图中的三个logo图标,放在这里是为了让大家看得更清楚!)

            <ul>                <li><img src="/static/Images/HitArea/logo-sina.png" alt=""  ="shareToWeiBo()"></li>                <li><img src="/static/Images/HitArea/logo-friendCircle.png" alt=""  ="WeiXin()"></li>                <li><img src="/static/Images/HitArea/logo-QQzone.png" alt=""  ="qqZoneShare()"></li>            </ul>

1
2
3
4
5

   `<!-- 存放二维码的容器 -->    <img  id="qrcode" style="padding-left: 20px">` 

1
2
给微信logo添加 () 事件(我的代码都放在对应js文件中,使用时需在HTML页面引入,你们自己也可以直接放在页面的

//js中方法,微信扫描二维码
function WeiXin(){

//debugger;//清空二维码文本框$("#qrcode").html("");var   = $("#comment ").val();var url = window.location.href;var url2 = url.split("localhost:8068/");if (url2.length > 1){    var url3 = url2[1];    var url4 = "http://www.zhengquan51.com/" + url3;} else{    //如果是在线上路径下    url4 = url2;}var icno = $("#icno").val();if (icno == undefined || icno == null){    icno = "";}//主要看这里就行了(作用是调用后台接口以及图片回显)$("#qrcode").attr("src", "/getCode/qrcode?content=" + url4);     //根据路径访问后台接口,生成二维码并通过src属性展示在容器中,url4为我需要生成二维码的页面链接内容$(".Index-Popup-Boxs").show();

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
后台代码,首先在controller层写qrcode方法,代码如下:
/**

 * 生成微信图片二维码 * * @param request * @param response * @param content   为前端传过来的二维码的内容,即路径链接 * @throws Exception */@Log("微信图片二维码")@GetMapping("/qrcode")public void qrcode(HttpServletRequest request, HttpServletResponse response, @RequestParam(name = "content") String content) throws Exception {    if (StringUtils.isBlank(content)) {        response.sendRedirect("/404.html");        return;    }    //调用工具类,生成二维码       RecodeUtil.creatRrCode(content, 180,180,response);   //180为图片高度和宽度}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
编写工具类RecodeUtil,该类存放在我项目下的utils文件目录下,你们可以自行选在位置,在controller里导入就行了,工具类代码如下:

import com.google.zxing.BarcodeFormat;
import com.google.zxing.EncodeHintType;
import com.google.zxing.MultiFormatWriter;
import com.google.zxing.WriterException;
import com.google.zxing.common.BitMatrix;
import com.google.zxing.qrcode.decoder.ErrorCorrectionLevel;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Hashtable;

public class RecodeUtil {

public static void creatRrCode(String contents, int width, int height,HttpServletResponse response) {    Hashtable hints = new Hashtable();    hints.put(EncodeHintType.ERROR_CORRECTION, ErrorCorrectionLevel.H); //容错级别最高    hints.put(EncodeHintType.CHARACTER_SET, "utf-8");  //设置字符编码    hints.put(EncodeHintType.MARGIN, 1);                //二维码空白区域,最小为0也有白边,只是很小,最小是6像素左右    try {        BitMatrix bitMatrix = new MultiFormatWriter().encode(contents, BarcodeFormat.QR_CODE, width, height, hints); // 1、读取文件转换为字节数组

// ByteArrayOutputStream out = new ByteArrayOutputStream();

        BufferedImage image = toBufferedImage(bitMatrix);        //转换成png格式的IO流        ImageIO.write(image, "png", response.getOutputStream());

// byte[] bytes = out.toByteArray();
// // 2、将字节数组转为二进制
// 64Encoder encoder = new 64Encoder();
// binary = encoder.encodeBuffer(bytes).trim();

    } catch (WriterException e) { // TODO Auto-generated catch block        e.printStackTrace();    } catch (IOException e) {        // TODO Auto-generated catch block        e.printStackTrace();    }}
/** * image流数据处理 * * @author ianly */public static 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) ? 0xFF000000 : 0xFFFFFFFF);        }    }    return image;}

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
另外,因为jar用的是google的,所以要在pom. 里导入相关依赖,这里我也帮你们准备好了! 在标签里粘贴下面两个即可:

    <dependency>        <groupId>com.google.zxing</groupId>        <artifactId>core</artifactId>        <version>2.2</version>    </dependency>    <dependency>        <groupId>com.google.zxing</groupId>        <artifactId>javase</artifactId>        <version>2.2</version>    </dependency>

1
2
3
4
5
6
7
8
9
10

做完这些就可以测试啦,有什么问题可以私聊我哦!

作者:Shuang_j
来源:CSDN
原文:https://blog.csdn.net/weixin_43601099/article/details/91493485
版权声明:本文为博主原创文章,转载请附上博文链接!

收藏 打印