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

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

相关文章
|
1月前
|
关系型数据库 MySQL Java
【IDEA】java后台操作mysql数据库驱动常见错误解决方案
【IDEA】java后台操作mysql数据库驱动常见错误解决方案
65 0
|
15天前
|
缓存 前端开发 JavaScript
前端开发的必修课:如何让你的网页在弱网环境下依然流畅运行?
【10月更文挑战第30天】随着移动互联网的普及,弱网环境下的网页性能优化变得尤为重要。本文详细介绍了如何通过了解网络状况、优化资源加载、减少HTTP请求、调整弱网参数和代码优化等方法,提升网页在弱网环境下的加载速度和流畅性,从而改善用户体验。
93 4
|
1月前
|
存储 前端开发 JavaScript
🚀前端轻松实现网页内容转换:一键复制、保存图片及生成 Markdown
在现代前端开发中,提升用户的交互体验至关重要。本文将详细介绍如何使用 HTML2Canvas 和 Turndown 两个强大的 JavaScript 库,实现将网页选中文本转化为图片并保存或复制到剪贴板,或将内容转换为 Markdown 格式。文章包含核心代码实现、技术细节和功能拓展方向,为开发者提供了一个轻量级的解决方案,提升用户体验。
134 68
|
7天前
|
XML 前端开发 JavaScript
前端大神揭秘:如何让你的网页秒变炫酷,让用户欲罢不能的5大绝招!
前端开发不仅是技术活,更是艺术创作。本文揭秘五大前端开发技巧,包括合理运用CSS动画、SVG图形、现代JavaScript框架、优化网页性能及注重细节设计,助你打造炫酷网页,提升用户体验。
51 30
|
8天前
|
存储 编解码 前端开发
惊!前端新手也能秒懂的高级技巧,轻松提升网页颜值与性能!
本文针对前端新手,介绍了三个简单易学的高级技巧,帮助提升网页的颜值和性能。包括使用CSS框架快速美化网页、优化图片资源加快加载速度,以及利用ARIA属性和媒体查询提高网页的可访问性和响应性。示例代码清晰,适合初学者上手实践。
19 3
|
11天前
|
存储 前端开发 搜索推荐
(前端直接编辑CAD)网页CAD二次开发中线型表的使用方法
在DWG数据库中,线型样式存储在线型样式表 `McDbLinetypeTable` 中,每个线型表记录对象 `McDbLinetypeTableRecord` 对应一种线型样式。本文介绍了如何获取、添加、遍历、删除和修改线型样式,并提供了绘制不同线型的示例代码,包括虚线、点划线和带文字的线型。通过在线示例demo,用户可以实践修改CAD图纸中的实体线型及其样式。
|
14天前
|
搜索推荐 前端开发 开发者
前端开发的必修课:如何让你的网页在搜索引擎中脱颖而出?
【10月更文挑战第31天】前端开发不仅是构建网页与用户间桥梁的关键,还需注重搜索引擎优化(SEO)。优化网页结构、合理使用关键词、提升加载速度及整合社交媒体等技巧,能帮助网页在搜索引擎中脱颖而出,吸引更多用户。
25 5
|
14天前
|
机器学习/深度学习 前端开发 JavaScript
前端小白也能学会的高大上技巧:如何让你的网页支持语音控制?
【10月更文挑战第31天】你是否曾梦想过只需动动嘴皮子就能操控网页?现在,这个梦想触手可及。即使你是前端小白,也能轻松学会让网页支持语音控制的高大上技巧。本文将介绍语音控制的基本概念、实现方法和具体示例,带你走进语音控制的奇妙世界。通过Web Speech API,你只需掌握基本的HTML、CSS和JavaScript知识,就能实现语音识别和控制功能。快来尝试吧!
48 4
|
15天前
|
前端开发 JavaScript 搜索推荐
前端小白也能学会的高大上技巧:如何让你的网页支持暗黑模式?
【10月更文挑战第30天】随着现代网页设计的发展,暗黑模式已成为一种流行趋势,提升了用户的阅读体验并增强了网页的适应性。本文介绍了如何通过简单的HTML、CSS和JavaScript实现网页的暗黑模式。首先,定义两种主题的CSS样式;然后,使用JavaScript实现模式切换逻辑,并自动检测系统主题。通过这些步骤,前端小白也能轻松掌握暗黑模式的实现,提升网页的用户体验和个性化水平。
36 4
|
14天前
|
前端开发 JavaScript 数据处理
前端界的宝藏技术:掌握这些,让你的网页秒变交互神器!
【10月更文挑战第31天】前端开发藏有众多宝藏技术,如JavaScript异步编程和Web Components。异步编程通过Promise、async/await实现复杂的网络请求,提高代码可读性;Web Components则允许创建可重用、封装良好的自定义组件,提升代码复用性和独立性。此外,CSS动画、SVG绘图等技术也极大丰富了网页的视觉和交互体验。不断学习和实践,让网页秒变交互神器。
23 2