后端生成二维码，前端请求接口生成二维码并展示，且多个参数后边的参数没有正常传输问题处理

news2025/3/13 16:31:15

一、后端代码

1、controller

@GetMapping("/generateQRCode/{url}")
    @ApiOperation(value = "生成url链接二维码",notes = "生成url链接二维码")
    public JsonResult<NewsQRCodeVo> generateQRCode(@PathVariable String url,HttpServletResponse servletResponse)  {
        NewsQRCodeVo response=new NewsQRCodeVo();
        try {
            QRCodeUtil.createCodeToOutputStream(url,servletResponse.getOutputStream());
        }catch (Exception e){
            throw new InformationException("生成二维码失败", InformationErrCode.NORMAL_CODE.getErrCode());
        }
        return JsonResult.ok(response);
    }

2、NewsQRCodeVo

@Data
@ApiModel(description = "新闻二维码Vo")
public class NewsQRCodeVo {

    @ApiModelProperty(value = "newsId")
    private String newsId;

    @ApiModelProperty(value = "新闻二维码图片")
    private String newsQRCodePic;

}

3、QRCodeUtil

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 lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang3.StringUtils;

import javax.imageio.ImageIO;
import javax.swing.filechooser.FileSystemView;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.OutputStream;
import java.util.HashMap;
import java.util.Map;

/**
 * @author Created by wcg
 * @Date 2025/1/24 10:56
 */
@Slf4j
public class QRCodeUtil {

        //CODE_WIDTH：二维码宽度，单位像素
        private static final int CODE_WIDTH = 400;
        //CODE_HEIGHT：二维码高度，单位像素
        private static final int CODE_HEIGHT = 400;
        //FRONT_COLOR：二维码前景色，0x000000 表示黑色
        private static final int FRONT_COLOR = 0x000000;
        //BACKGROUND_COLOR：二维码背景色，0xFFFFFF 表示白色
        //演示用 16 进制表示，和前端页面 CSS 的取色是一样的，注意前后景颜色应该对比明显，如常见的黑白
        private static final int BACKGROUND_COLOR = 0xFFFFFF;

        public static void createCodeToFile(String content, File codeImgFileSaveDir, String fileName) {
            try {
                if (StringUtils.isBlank(content) || StringUtils.isBlank(fileName)) {
                    return;
                }
                content = content.trim();
                if (codeImgFileSaveDir==null || codeImgFileSaveDir.isFile()) {
                    //二维码图片存在目录为空，默认放在桌面...
                    codeImgFileSaveDir = FileSystemView.getFileSystemView().getHomeDirectory();
                }
                if (!codeImgFileSaveDir.exists()) {
                    //二维码图片存在目录不存在，开始创建...
                    codeImgFileSaveDir.mkdirs();
                }

                //核心代码-生成二维码
                BufferedImage bufferedImage = getBufferedImage(content);

                File codeImgFile = new File(codeImgFileSaveDir, fileName);
                ImageIO.write(bufferedImage, "png", codeImgFile);

                log.info("二维码图片生成成功：" + codeImgFile.getPath());
            } catch (Exception e) {
                e.printStackTrace();
            }
        }

        /**
         * 生成二维码并输出到输出流, 通常用于输出到网页上进行显示，输出到网页与输出到磁盘上的文件中，区别在于最后一句 ImageIO.write
         * write(RenderedImage im,String formatName,File output)：写到文件中
         * write(RenderedImage im,String formatName,OutputStream output)：输出到输出流中
         * @param content  ：二维码内容
         * @param outputStream ：输出流，比如 HttpServletResponse 的 getOutputStream
         */
        public static void createCodeToOutputStream(String content, OutputStream outputStream) {
            try {
                if (StringUtils.isBlank(content)) {
                    return;
                }
                content = content.trim();
                //核心代码-生成二维码
                BufferedImage bufferedImage = getBufferedImage(content);

                //区别就是这一句，输出到输出流中，如果第三个参数是 File，则输出到文件中
                ImageIO.write(bufferedImage, "png", outputStream);

                log.info("二维码图片生成到输出流成功...");
            } catch (Exception e) {
                e.printStackTrace();
            }
        }

        //核心代码-生成二维码
        private static BufferedImage getBufferedImage(String content) throws WriterException {

            //com.google.zxing.EncodeHintType：编码提示类型,枚举类型
            Map<EncodeHintType, Object> hints = new HashMap();

            //EncodeHintType.CHARACTER_SET：设置字符编码类型
            hints.put(EncodeHintType.CHARACTER_SET, "UTF-8");

            //EncodeHintType.ERROR_CORRECTION：设置误差校正
            //ErrorCorrectionLevel：误差校正等级，L = ~7% correction、M = ~15% correction、Q = ~25% correction、H = ~30% correction
            //不设置时，默认为 L 等级，等级不一样，生成的图案不同，但扫描的结果是一样的
            hints.put(EncodeHintType.ERROR_CORRECTION, ErrorCorrectionLevel.M);

            //EncodeHintType.MARGIN：设置二维码边距，单位像素，值越小，二维码距离四周越近
            hints.put(EncodeHintType.MARGIN, 1);

            MultiFormatWriter multiFormatWriter = new MultiFormatWriter();
            BitMatrix bitMatrix = multiFormatWriter.encode(content, BarcodeFormat.QR_CODE, CODE_WIDTH, CODE_HEIGHT, hints);
            BufferedImage bufferedImage = new BufferedImage(CODE_WIDTH, CODE_HEIGHT, BufferedImage.TYPE_INT_BGR);
            for (int x = 0; x < CODE_WIDTH; x++) {
                for (int y = 0; y < CODE_HEIGHT; y++) {
                    bufferedImage.setRGB(x, y, bitMatrix.get(x, y) ? FRONT_COLOR : BACKGROUND_COLOR);
                }
            }
            return bufferedImage;
        }

}

4、pom依赖

<!-- zxing生成二维码 -->
        <dependency>
            <groupId>com.google.zxing</groupId>
            <artifactId>core</artifactId>
            <version>3.3.3</version>
        </dependency>

这样前端传一个utl完整地址，就可以直接得到二维码图片流了，测试看一下；

http://localhost:19900/api/v1/spider/paramGenerateQRCode?url=https://blog.csdn.net/qq18346342939/article/details/140149193?spm=1001.2014.3001.5502

最后扫码就是我上边输入的那个地址，测试成功，然后我们可以前端如何处理：

二、前端

1、最开始我是这样处理的，二维码生成，但是过后发现我的页面链接是有2个参数的，第二个参数是&id=xxx，实际扫码的时候会少id这个参数

<span class="span_b">
    <div class="qr-code" id="qrCode"><img id="qrImage" src="http://localhost:19900/api/v1/spider/paramGenerateQRCode?url=${window.location.href}" alt="QR Code" style="width: 100%; height: 100%;"></div>
</span>

2、最后花费了不少时间处理，原来是传参对于&等这类符号会读取异常，后边是（+、&、^等）会无法传输，然后说用encodeURIComponent包裹一下就行好了，但是包裹方式如下图，结果才好使

附代码：

<span class="span_b">
   <div class="qr-code" id="qrCode"><img id="qrImage" src="http://localhost:19900/api/v1/spider/paramGenerateQRCode?url=${encodeURIComponent(window.location.href)}" alt="QR Code" style="width: 100%; height: 100%;"></div>
</span>


/* 二维码容器的样式 */
.share_list i .share_bottom .bottom_text .span_b .qr-code {
    width: 120px;
    height: 120px;
    border: 1px solid #ddd;
}

最后这样才完全好使了！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2300389.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

（8/100）每日小游戏平台系列

（8/100）每日小游戏平台系列

项目地址位于&#xff1a;小游戏导航 新增一个打地鼠游戏&#xff01; 打地鼠&#xff08;Whack-a-Mole&#xff09;是一款经典的休闲游戏&#xff0c;玩家需要点击随机出现的地鼠&#xff0c;以获取分数。游戏时间有限&#xff0c;玩家需要在规定时间内尽可能多地击中地鼠&am…
阅读更多...
[Python人工智能] 五十.PyTorch入门 (5)快速搭建神经网络及模型保存

[Python人工智能] 五十.PyTorch入门 (5)快速搭建神经网络及模型保存

从本专栏开始，作者正式研究Python深度学习、神经网络及人工智能相关知识。前文讲解PyTorch构建分类神经网络。这篇文章将介绍如何利用PyTorch快速构建神经网络，之前的代码比较复杂，通过自定义Net类实现，本文通过Torch函数定义神经网络。前面我们的Python人工智能主要以Tens…
阅读更多...
SpringBoot+Vue+数据可视化的动漫妆造服务平台（程序+论文+讲解+安装+调试+售后等）

SpringBoot+Vue+数据可视化的动漫妆造服务平台（程序+论文+讲解+安装+调试+售后等）

感兴趣的可以先收藏起来&#xff0c;还有大家在毕设选题&#xff0c;项目以及论文编写等相关问题都可以给我留言咨询&#xff0c;我会一一回复&#xff0c;希望帮助更多的人。 系统介绍 在当今数字化高速发展的时代&#xff0c;动漫产业迎来了前所未有的繁荣&#xff0c;动漫…
阅读更多...
基于web的留守儿童网站的设计与实现

基于web的留守儿童网站的设计与实现

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…
阅读更多...
OpenCV中的边缘检测

OpenCV中的边缘检测

边缘检测是图像处理和计算机视觉中的关键技术之一&#xff0c;旨在识别图像中像素强度发生显著变化的区域&#xff0c;这些区域通常对应于物体的边界或轮廓。边缘检测在机器视觉中具有重要的需求背景&#xff0c;主要体现在以下几个方面&#xff1a; 图像分割&#xff1a;边缘…
阅读更多...
家里WiFi信号穿墙后信号太差怎么处理？

家里WiFi信号穿墙后信号太差怎么处理？

一、首先在调制解调器&#xff08;俗称&#xff1a;猫&#xff09;测试网速&#xff0c;网速达不到联系运营商&#xff1b; 二、网线影响不大&#xff0c;5类网线跑500M完全没问题&#xff1b; 三、可以在卧室增加辅助路由器&#xff08;例如小米AX系列&#xff09;90~200元区…
阅读更多...
【前端学习笔记】Webpack

【前端学习笔记】Webpack

1.介绍 Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具&#xff0c;它将 JavaScript、CSS、图片、字体等资源文件打包成一个或多个静态文件&#xff0c;以供浏览器使用。当 webpack 处理应用程序时&#xff0c;它会在内部从一个或多个入口点构建一个 依赖图(depend…
阅读更多...
数据结构（陈越，何钦铭）第三讲 树（上）

数据结构（陈越，何钦铭）第三讲 树（上）

3.1 树与数的表示 3.1.1 顺序查找 int SequentialSearch(List Tbl,ElementType K){int i;Tbl->Element[0]K;for(iTbl->Length;Tbl->Element[i]!K;i--);return i; } typedef struct LNode *List; struct LNode{ElementType Element[MAXSIZE];int Length; };3.1.2 二分…
阅读更多...
【深度解析】图解Deepseek-V3模型架构-混合专家模型（MoE）

【深度解析】图解Deepseek-V3模型架构-混合专家模型（MoE）

一、引言 最近非常火爆的DeepSeek-V3模型&#xff0c;是一个包含6710亿总参数的强大混合专家模型&#xff08;MoE&#xff09;&#xff0c;其中每个token激活370亿参数。该模型在DeepSeek-V2验证有效的核心架构基础上&#xff0c;采用多头潜在注意力&#xff08;MLA&#xff0…
阅读更多...
c#判断exe文件是不是7z或者rar的自解压文件

c#判断exe文件是不是7z或者rar的自解压文件

亲测可以实现检测7z的自解压&#xff0c;但是对于rar的自解压格式&#xff0c;最新版不支持&#xff0c;尝试修改回发现几乎检测成了exe文件&#xff0c;这显然是不正确的&#xff0c;其他版本未测试。 如下图所示&#xff0c;可以检测出自解压格式的7z文件&#xff0c;黑色显…
阅读更多...
富士SC2022，C325，C328打印机扫描到网络详细教程

富士SC2022，C325，C328打印机扫描到网络详细教程

前言&#xff1a; 在开始教程之前,我先声明目前该教程适用于FujiXerox apeos C325Z和FujiXerox DocuCentre SC2022打印机。这次教程以FujiXerox DocuCentre SC2022为例&#xff0c;该打印机IP地址为10.40.11.240。 前提条件 &#xff1a; 1. 安装打印机所需打印机和扫…
阅读更多...
人工智能3d点云之Pointnet++项目实战源码解读(点云分类与分割)

人工智能3d点云之Pointnet++项目实战源码解读(点云分类与分割)

一.项目文件概述 二.数据读取模块配置 实际代码运行时是先定义与加载好模型&#xff0c;然后再去读取数据进来传入到模型网络中去训练。但现在反过来先读取数据开始。 进入ModelNetDataLoader类的_getitem方法, 做标准化的目的是处理异常大的数值 上面返回的cls是类别,相当于…
阅读更多...
IP 路由基础 | 路由条目生成 / 路由表内信息获取

IP 路由基础 | 路由条目生成 / 路由表内信息获取

注&#xff1a;本文为 “IP 路由” 相关文章合辑。 未整理去重。 IP 路由基础 秦同学学学已于 2022-04-09 18:44:20 修改 一. IP 路由产生背景 我们都知道 IP 地址可以标识网络中的一个节点&#xff0c;并且每个 IP 地址都有自己的网段&#xff0c;各个网段并不相同&#xf…
阅读更多...
java后端开发day16--字符串（二）

java后端开发day16--字符串（二）

&#xff08;以下内容全部来自上述课程&#xff09; 1.StringBuilder 因为StringBuilder是Java已经写好的类。 java在底层对他进行了一些特殊处理。 打印对象不是地址值而是属性值。 1.概述 StringBuilder可以看成是一个容器&#xff0c;创建之后里面的内容是可变的。 作用…
阅读更多...
LabVIEW危化品仓库的安全监测系统

LabVIEW危化品仓库的安全监测系统

本案例展示了基于LabVIEW平台设计的危化品仓库安全监测系统&#xff0c;结合ZigBee无线通信技术、485串口通讯技术和传感器技术&#xff0c;实现了对危化品仓库的实时无线监测。该系统不仅能提高安全性&#xff0c;还能大幅提升工作效率&#xff0c;确保危化品仓库的安全运营。…
阅读更多...
深度学习框架探秘｜Keras 应用案例解析以及 Keras vs TensorFlow vs PyTorch

深度学习框架探秘｜Keras 应用案例解析以及 Keras vs TensorFlow vs PyTorch

引言 上一篇文章《深度学习框架探秘&#xff5c;Keras&#xff1a;深度学习的魔法钥匙》 我们初步学习了 Keras&#xff0c;包括它是什么、具备哪些优势&#xff08;简洁易用的 API、强大的兼容性、广泛的应用领域&#xff09;&#xff0c;以及基本使用方法。本文&#xff0c;…
阅读更多...
NAT（网络地址转换）技术详解：网络安全渗透测试中的关键应用与防御策略

NAT（网络地址转换）技术详解：网络安全渗透测试中的关键应用与防御策略

目录 NAT的作用 NAT类型 NAT工作流程示例 NAT 转换技术的原理 源地址转换&#xff08;SNAT&#xff0c;Source NAT&#xff09;&#xff1a; 目标地址转换&#xff08;DNAT&#xff0c;Destination NAT&#xff09;&#xff1a; 端口地址转换&#xff08;PAT&#xff0c…
阅读更多...
容器化部署Kafka的最佳实践：基于KRaft模式的无ZooKeeper方案

容器化部署Kafka的最佳实践：基于KRaft模式的无ZooKeeper方案

一、docker 部署kafka单节点 1.1安装docker 可以参考这篇CentOS 7安装docker并配置镜像加速 1.3 运行kafka&#xff08;注意修改zookeeper&#xff0c;kafka地址&#xff09; docker run -d --name kafka -e KAFKA_ADVERTISED_LISTENERSPLAINTEXT://172.16.10.180:9092 -p …
阅读更多...
【PHP】php+mysql 活动信息管理系统（源码+论文+数据库+数据库文件）【独一无二】

【PHP】php+mysql 活动信息管理系统（源码+论文+数据库+数据库文件）【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;专__注&#x1f448;&#xff1a;专注主流机器人、人工智能等相关领域的开发、测试技术。 【PHP】php 活动信息管理系统&#xff08;源码论文…
阅读更多...
thingboard告警信息格式美化

thingboard告警信息格式美化

原始报警json内容&#xff1a; { "severity": "CRITICAL","acknowledged": false,"cleared": false,"assigneeId": null,"startTs": 1739801102349,"endTs": 1739801102349,"ackTs": 0,&quo…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023