当前位置：首页 > news >正文

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

news 来源：原创 2025/5/17 13:40: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;
}