VUE获取文件流渲染图片文件

最新推荐文章于 2024-08-22 04:06:14 发布

ShawnWang04

最新推荐文章于 2024-08-22 04:06:14 发布

阅读量1.7k

点赞数

分类专栏：前端文章标签： vue.js html html5

本文链接：https://blog.csdn.net/Wang________/article/details/119999260

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

该博客介绍了如何使用Java生成随机验证码，并将其通过HTTP响应返回给前端展示。前端使用axios获取服务器返回的验证码图片流，并转化为img标签的src属性进行显示。同时，后台将验证码文本存入Redis以备后续验证。

摘要由CSDN通过智能技术生成

getVerificationCode() {
        // 渲染文件流
        axios.request({
          url: '/api/',
          responseType: 'blob',
          method: 'get'
        }).then(res => {
          let blob = new Blob([res.data], {
            type: "image/png"
          });
          let url = window.URL.createObjectURL(blob);
          // 将图片转换成img标签可以识别的url
          this.imgData = url;
        }), (error) => {
          this.$message({
            type: 'warning',
            message: '系统错误，请联系管理员!'
          });
        }
      }

Java 生成验证码返回

工具类

package com.analysis.learning.common.utils;

/**
 * Created with ShawnWang.
 *
 * @Author: ShawnWang
 * @Date: 2021-08-30 15:24
 * @Description:
 */

import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;

public class VerifyCode {
    private int w = 70;
    private int h = 35;
    private Random r = new Random();
    // {"宋体", "华文楷体", "黑体", "华文新魏", "华文隶书", "微软雅黑", "楷体_GB2312"}
    private String[] fontNames  = {"宋体", "华文楷体", "黑体", "微软雅黑", "楷体_GB2312"};
    private String codes  = "23456789abcdefghjkmnopqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ";
    //背景色设置
    private Color bgColor  = new Color(158, 158, 158);
    public static String text ;

    private Color randomColor () {
        int red = r.nextInt(150);
        int green = r.nextInt(150);
        int blue = r.nextInt(150);
        return new Color(red, green, blue);
    }

    private Font randomFont () {
        int index = r.nextInt(fontNames.length);
        String fontName = fontNames[index];
        int style = r.nextInt(4);
        int size = r.nextInt(5) + 24;
        return new Font(fontName, style, size);//指定字体名称、样式和点大小，创建一个新 Font。
    }
    //画干扰的线条
    private void drawLine (BufferedImage image) {
        int num  = 3;//画三条
        Graphics2D g2 = (Graphics2D)image.getGraphics();
        for(int i = 0; i < num; i++) {
            int x1 = r.nextInt(w);
            int y1 = r.nextInt(h);
            int x2 = r.nextInt(w);
            int y2 = r.nextInt(h);
            g2.setStroke(new BasicStroke(1.5F));
            g2.setColor(Color.BLUE);
            g2.drawLine(x1, y1, x2, y2);
        }
    }

    private char randomChar () {
        int index = r.nextInt(codes.length());
        return codes.charAt(index);
    }

    private BufferedImage createImage () {
        BufferedImage image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
        Graphics2D g2 = (Graphics2D)image.getGraphics();
        g2.setColor(this.bgColor);
        g2.fillRect(0, 0, w, h);
        return image;
    }

    public BufferedImage getImage () {
        BufferedImage image = createImage();
        Graphics2D g2 = (Graphics2D)image.getGraphics();
        StringBuilder sb = new StringBuilder();
        // 向图片中画4个字符
        for(int i = 0; i < 4; i++)  {
            String s = randomChar() + "";
            sb.append(s);
            float x = i * 1.0F * w / 4;
            g2.setFont(randomFont());
            g2.setColor(randomColor());
            /**
             * 首字符的基线位于用户空间的 (x, h-5) 位置处
             * 原点在左上角,X轴递增的方向是从左向右;Y轴是从上到下
             * 在提供的坐标位于基线上最左边字符的情况下，可以从右到左呈现字形
             * h-5表示y轴方向,向上偏移了5
             */
            g2.drawString(s, x, h-5);
        }
        text = sb.toString();
        drawLine(image);
        return image;
    }

    public String getText () {
        return text;
    }

    public static void output (BufferedImage image, OutputStream out)
            throws IOException {
        ImageIO.write(image, "JPEG", out);
    }
}

Controller 层

@RequestMapping(value = "/VC")
    @ResponseBody
    public void  VC(HttpServletRequest request, HttpServletResponse response ) throws Exception{
        
        response.setHeader("Cache-Control", "no-store, no-cache");
        
        VerifyCode code=new VerifyCode();
        BufferedImage image = code.getImage();
        //将验证码文本存到Redis
        System.err.println(" 验证码 "+code.getText());
        
        ImageIO.write(image,"jpg",response.getOutputStream());
    }