ajax接收后台传来的图片

最新推荐文章于 2022-12-21 15:13:09 发布

转载最新推荐文章于 2022-12-21 15:13:09 发布 · 1w 阅读

本文详细介绍了一种将图片对象转换为Base64字符串的方法，包括使用Java的ByteArrayOutputStream和ImageIO进行图片读取和编码的过程。同时，文章还展示了如何在前后端交互中利用Ajax获取并显示这种Base64编码的图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片与base64的转换

图片对象转换base64

   ByteArrayOutputStream baos = new ByteArrayOutputStream();//io流
    ImageIO.write(png, "png", baos);//写入流中
    byte[] bytes = baos.toByteArray();//转换成字节
    BASE64Encoder encoder = new BASE64Encoder();
    String png_base64 =  encoder.encodeBuffer(bytes);//转换成base64串
    png_base64 = png_base64.replaceAll("\n", "").replaceAll("\r", "");//删除 \r\n
    return png_base64;

ajax接收后台图片
后台

/**
	 * #获取验证码的图片
	 * #使用点击事件获取验证码图片
	 */
	@SuppressWarnings("unused")
	private void checkcodeImgClick(HttpServletRequest req, HttpServletResponse resp) 
			throws ServletException, IOException {
		//点击图片按键请求
		DrowPictureUtils pic = DrowPictureUtils.getDrawPicUtils();
		pic.set(65, 37);
		String checkCode = pic.generateCheckCode();//获取随机验证码
		BufferedImage image = pic.generateCheckImage(checkCode);
		req.getSession().setAttribute("checkcode", checkCode);//session需要记录该验证码
		
		//点击其他按键请求
		ByteArrayOutputStream baos = new ByteArrayOutputStream();//io流
        ImageIO.write(image, "png", baos);//写入流中
        byte[] bytes = baos.toByteArray();//转换成字节
        BASE64Encoder encoder = new BASE64Encoder();
        String png_base64 =  encoder.encodeBuffer(bytes);//转换成base64串
        png_base64 = png_base64.replaceAll("\n", "").replaceAll("\r", "");//删除 \r\n
		resp.getWriter().write(png_base64);
	}

前台

	/**
	 * 申请更新验证码
	 * 该请求不需要有任何参数
	 */
	$("#checkcodeImg").click(function() {
		$.ajax({
			type: "post",
			url: "./checkcodeImgClick.reg",
			dataType: "text",
			success: function(img, status){
				alert(img);
				$("#checkImg").attr("src","data:image/png;base64,"+img);
			},
			error:function(data){
	             alert('响应失败！');
	         },
		});
	});