java后台生成二维码,并在前端网页上显示

我做的是在网站内容详情页下点击微信分享,需要弹出二维码,话不多说,直接看效果:

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

å¨è¿éæå¥å¾çæè¿°

                <ul>
                    <li><img src="/static/Images/HitArea/logo-sina.png" alt="" onclick="shareToWeiBo()"></li>
                    <li><img src="/static/Images/HitArea/logo-friendCircle.png" alt="" onclick="WeiXin()"></li>
                    <li><img src="/static/Images/HitArea/logo-QQzone.png" alt="" onclick="qqZoneShare()"></li>
                </ul>
       `<!-- 存放二维码的容器 -->
        <img  id="qrcode" style="padding-left: 20px">`

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

//js中方法,微信扫描二维码
function WeiXin(){
    //debugger;
    //清空二维码文本框
    $("#qrcode").html("");

    var title = $("#commentTitle").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();
}

3.后台代码,首先在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为图片高度和宽度
    }

 

4.编写工具类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、将字节数组转为二进制
//            BASE64Encoder encoder = new BASE64Encoder();
//            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;
    }

}

5.另外,因为jar用的是google的,所以要在pom.xml里导入相关依赖,这里我也帮你们准备好了! 在标签里粘贴下面两个即可:

        <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>

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

 转载链接 https://blog.csdn.net/weixin_43601099/article/details/91493485

生成二维码后,可以将其转换为图片格式保存在数据库中。在前端页面中,可以使用<img>标签来显示图片,将数据库中的图片数据转换为base64格式,然后将其作为src属性值即可。具体实现方式可以参考如下代码: ```java // 生成二维码 String content = "hello world"; int width = 200; // 图片宽度 int height = 200; // 图片高度 String format = "png"; // 图片格式 Hashtable hints = new Hashtable(); hints.put(EncodeHintType.CHARACTER_SET, "utf-8"); BitMatrix bitMatrix = new MultiFormatWriter().encode(content, BarcodeFormat.QR_CODE, width, height, hints); // 保存二维码图片到数据库(假设使用MySQL) try { Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "123456"); String sql = "insert into qrcode (content, image) values (?, ?)"; PreparedStatement ps = conn.prepareStatement(sql); ps.setString(1, content); ByteArrayOutputStream baos = new ByteArrayOutputStream(); MatrixToImageWriter.writeToStream(bitMatrix, format, baos); byte[] imageBytes = baos.toByteArray(); ps.setBytes(2, imageBytes); ps.executeUpdate(); ps.close(); conn.close(); } catch (SQLException e) { e.printStackTrace(); } ``` 在前端页面中,可以使用如下代码来显示数据库中保存的二维码图片: ```html <img src="data:image/png;base64,${base64EncodedImage}"> ``` 其中,${base64EncodedImage}是在后台将数据库中保存的二维码图片数据转换为base64格式后传递到前端的变量。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值