VUE+Springboot实现生成二维码及二维码下载功能

发布时间:2024年01月04日

一、Springboot相关

1、pom依赖引入

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

2、代码实现

import com.google.zxing.BarcodeFormat;
import com.google.zxing.WriterException;
import com.google.zxing.client.j2se.MatrixToImageWriter;
import com.google.zxing.common.BitMatrix;
import com.google.zxing.qrcode.QRCodeWriter;

/**
     * 生成图片二维码
     *
     * @param content 二维码内容
     * @return
     */
    private String buildQRCode(String content, String[] arr) {
        ByteArrayOutputStream outputStream = null;
        ByteArrayInputStream in = null;
        ByteArrayOutputStream outputStream1 = null;
        try {
            QRCodeWriter qrCodeWriter = new QRCodeWriter();
            BitMatrix bitMatrix = qrCodeWriter.encode(content, BarcodeFormat.QR_CODE, 1000, 1000);

            //去掉二维码白边
            int[] rec = bitMatrix.getEnclosingRectangle();
            int resWidth = rec[2] + 1;
            int resHeight = rec[3] + 1;

            BitMatrix resMatrix = new BitMatrix(resWidth, resHeight);
            resMatrix.clear();
            for (int i = 0; i < resWidth; i++) {
                for (int j = 0; j < resHeight; j++) {
                    if (bitMatrix.get(i + rec[0], j + rec[1]))
                        resMatrix.set(i, j);
                }
            }
            //去掉二维码白边  结束

            outputStream = new ByteArrayOutputStream();
            MatrixToImageWriter.writeToStream(resMatrix, "PNG", outputStream);

            int width = 1000;
            int height = 1500;
            outputStream1 = new ByteArrayOutputStream();
            in = new ByteArrayInputStream(outputStream.toByteArray());
            BufferedImage image = ImageIO.read(in);
            BufferedImage bi = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
            Graphics2D g2 = bi.createGraphics();


//            //开始绘图 这版设置透明似乎有点点问题  暂时注掉
//            g2.setBackground(Color.WHITE);
//            g2.clearRect(0, 0, width, height);
//            g2.setPaint(new Color(255, 255, 255,1));      //设置背景颜色
//            g2.fillRect(0, 0, width, height);  //填充颜色
//
//            //设置透明  start
//            bi = g2.getDeviceConfiguration().createCompatibleImage(width, height, Transparency.TRANSLUCENT);
//            g2 = bi.createGraphics();
//            //设置透明  end

            g2.setBackground(Color.WHITE);
            g2.clearRect(0, 0, width, height);

            /** 设置生成图片的文字样式 * */
            Font font = new Font("黑体", Font.BOLD, 80);
            g2.setFont(font);
            g2.setPaint(Color.BLACK);

            //生成头部文字
            /** 防止生成的文字带有锯齿 * */
            g2.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_ON);

            FontRenderContext context = g2.getFontRenderContext();
            Rectangle2D bounds = font.getStringBounds(QR_CODE_HEAD_STR, context);
            double headX = (width - bounds.getWidth()) / 2;
            /** 在图片上生成文字 * */
            g2.drawString(QR_CODE_HEAD_STR, (int) headX, 80);

            g2.drawImage(image, 0, 165, width - 1, height - 520, null); //这里减去25是为了防止字和图重合

            font = new Font("黑体", Font.BOLD, 60);
            g2.setFont(font);

            double i = 2.5;
            for (String str : arr) {
                /** 设置字体在图片中的位置 在这里是居中* */
                context = g2.getFontRenderContext();
                bounds = font.getStringBounds(str, context);
                double x = (width - bounds.getWidth()) / 2;
                double y = (height - 75 - bounds.getHeight());
                double ascent = -bounds.getY() - bounds.getHeight() * i - 9 * i;
                double baseY = y + ascent;

                /** 防止生成的文字带有锯齿 * */
                g2.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_ON);

                /** 在图片上生成文字 * */
                g2.drawString(str, (int) x, (int) baseY);

                i--;
            }

            //todo 放置尾部logo
            Response response = fileUploadFeignService.getFileInputStream("img/logopng.png");
            BufferedImage tailImage = ImageIO.read(response.body().asInputStream());
            //缩小图片尺寸
            g2.drawImage(tailImage, (width - tailImage.getWidth() / 3) / 2 + 5, 1400, tailImage.getWidth() / 3, tailImage.getHeight() / 3, null);

            int c = bi.getRGB(999, 1100);

            BufferedImage tmpImg = new BufferedImage(width, height,BufferedImage.TYPE_4BYTE_ABGR);//新建一个类型支持透明的BufferedImage
            for(int k = 0; k < width; ++k)//把原图片的内容复制到新的图片,同时把背景设为透明
            {
                for(int j = 0; j < height; ++j){
                    //把背景设为透明
                    if(bi.getRGB(k, j) == c){
                        tmpImg .setRGB(k, j, c & 0x00ffffff);
                    }
                    //设置透明度
                    else{
                        int rgb = tmpImg .getRGB(k, j);
                        rgb = ((10 * 255 / 10) << 24) | (rgb & 0x00ffffff);
                        tmpImg .setRGB(k, j, rgb);
                    }
                }
            }

            g2.dispose();
            ImageIO.write(tmpImg, "PNG", outputStream1);

            Base64.Encoder encoder = Base64.getEncoder();

            String text = encoder.encodeToString(outputStream1.toByteArray());
            return text;
        } catch (WriterException e) {
            e.printStackTrace();
            return "";
        } catch (IOException e) {
            e.printStackTrace();
            return "";
        } finally {
            try {
                if (outputStream != null) {
                    outputStream.close();
                }

                if (in != null) {
                    in.close();
                }

                if (outputStream1 != null) {
                    outputStream1.close();
                }

            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

content:二维码内容

arr:二维码图片上要显示的内容

//todo 放置尾部logo
Response response = fileUploadFeignService.getFileInputStream("img/logopng.png");

?3、controller调用‘

public AjaxResult getInfo()
    {
        AjaxResult ajax = AjaxResult.success();
            ajax.put("img", "data:image/png;base64," + buildQRCode(qrCodeContent, qrCodeMessage.toArray(new String[qrCodeMessage.size()])));
        }
        return ajax;
    }

二、vue页面

1、vue弹出二维码页面

<el-dialog :title="title" :visible.sync="openLabel" :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row v-show="false">
          <el-col>
            <el-form-item label="电子标签码" prop="electronicLabelCode">
              <el-input v-model="form.electronicLabelCode" placeholder="请输入电子标签码" :disabled="isDisabled"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item prop="file" ref="uploadElement" label="二维码">
              <el-upload
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :disabled="true">
                <el-image v-if="dangerousImageUrl" :src="dangerousImageUrl" class="avatar">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="">
              <el-link @click="downloadQRCode" :disabled="isDisabled">下载二维码图片</el-link>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-if="!isDisabled" v-show="false">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

dangerousImageUrl :

????????请求后端接口响应

????????????????this.dangerousImageUrl = response.img;

2、二维码图片下载

//二维码图片下载
    downloadQRCode() {
      let aLink = document.createElement('a');
      let blob = this.base64ToBlob(this.dangerousImageUrl); //new Blob([content]);

      let evt = document.createEvent("HTMLEvents");
      evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错  事件类型,是否冒泡,是否阻止浏览器的默认行为
      aLink.download = "group_" + new Date().getTime() + ".png";
      aLink.href = URL.createObjectURL(blob);

      // aLink.dispatchEvent(evt);
      aLink.click();
    },

    base64ToBlob(code) {
      let parts = code.split(';base64,');
      let contentType = parts[0].split(':')[1];
      let raw = window.atob(parts[1]);
      let rawLength = raw.length;

      let uInt8Array = new Uint8Array(rawLength);

      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], { type: contentType });
    },

文章来源:https://blog.csdn.net/askuld/article/details/135383163
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。