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

简介: java后台生成二维码,并在前端网页上显示我做的是在网站内容详情页下点击微信分享,需要弹出二维码,话不多说,直接看效果:1首先在前端页面定义二维码容器,用来存放后台生成的二维码(下面是对应上图中的三个logo图标,放在这里是为了让大家看得更清楚!) <ul> ...

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>

1
2
3
4
5

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

1
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();

}
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、将字节数组转为二进制
// 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;
}

}

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

1
2
3
4
5
6
7
8
9
10

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

相关文章
|
4月前
|
前端开发 JavaScript API
(前端3D模型开发)网页三维CAD中加载和保存STEP模型
本文介绍了如何使用`mxcad3d`库在网页上实现STEP格式三维模型的导入与导出。首先,通过官方教程搭建基本项目环境,了解核心对象如MxCAD3DObject、Mx3dDbDocument等的使用方法。接着,编写了加载和保存STEP模型的具体代码,包括HTML界面设计和TypeScript逻辑实现。最后,通过运行项目验证功能,展示了从模型加载到保存的全过程。此外,`mxcad3d`还支持多种其他格式的三维模型文件操作。
|
16天前
|
人工智能 自然语言处理 前端开发
DeepSite:基于DeepSeek的开源AI前端开发神器,一键生成游戏/网页代码
DeepSite是基于DeepSeek-V3模型的在线开发工具,无需配置环境即可通过自然语言描述快速生成游戏、网页和应用代码,并支持实时预览效果,显著降低开发门槛。
246 36
DeepSite:基于DeepSeek的开源AI前端开发神器,一键生成游戏/网页代码
|
6天前
|
前端开发 Java 物联网
智慧班牌源码,采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署
智慧班牌系统是一款基于信息化与物联网技术的校园管理工具,集成电子屏显示、人脸识别及数据交互功能,实现班级信息展示、智能考勤与家校互通。系统采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署与私有化定制。核心功能涵盖信息发布、考勤管理、教务处理及数据分析,助力校园文化建设与教学优化。其综合性和可扩展性有效打破数据孤岛,提升交互体验并降低管理成本,适用于日常教学、考试管理和应急场景,为智慧校园建设提供全面解决方案。
62 14
|
1月前
|
前端开发 Cloud Native Java
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
|
1月前
|
数据可视化 JavaScript Java
2K star!三分钟搭建企业级后台系统,这款开源Java框架绝了!
"LikeAdmin Java是基于Spring Boot + Mybatis Plus + Vue 3的快速开发平台,内置RBAC权限管理、工作流引擎、数据可视化、三方登录等核心模块,助力开发者快速构建企业级中后台管理系统"
121 18
|
2月前
|
安全 前端开发 开发工具
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
108 5
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
|
2月前
|
监控 前端开发 Java
构建高效Java后端与前端交互的定时任务调度系统
通过以上步骤,我们构建了一个高效的Java后端与前端交互的定时任务调度系统。该系统使用Spring Boot作为后端框架,Quartz作为任务调度器,并通过前端界面实现用户交互。此系统可以应用于各种需要定时任务调度的业务场景,如数据同步、报告生成和系统监控等。
76 9
|
2月前
|
数据采集 前端开发 JavaScript
如何利用Java和Kotlin实现动态网页内容抓取
如何利用Java和Kotlin实现动态网页内容抓取
|
3月前
|
前端开发 NoSQL Java
【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
本文介绍了如何配置和启动基于Java的若依(RuoYi)项目,涵盖后端和前端的详细步骤。首先,准备Redis、MySQL以及IDE(如Idea和VS)。接着,通过GitHub获取代码并导入到IDE中,执行必要的SQL文件和配置数据库密码。然后,启动Redis并进行相关配置。最后,按照前端配置步骤克隆前端代码库,打开终端执行命令完成前端配置。整个过程详细记录了每一步的操作,帮助开发者顺利部署若依项目。 如果你觉得有帮助,请点赞、关注和收藏,这将是我持续分享的动力!
1247 2
|
5月前
|
XML 前端开发 JavaScript
前端大神揭秘:如何让你的网页秒变炫酷,让用户欲罢不能的5大绝招!
前端开发不仅是技术活,更是艺术创作。本文揭秘五大前端开发技巧,包括合理运用CSS动画、SVG图形、现代JavaScript框架、优化网页性能及注重细节设计,助你打造炫酷网页,提升用户体验。
170 30