文档章节

图片以base64方式展示

隆回水哥
 隆回水哥
发布于 2016/07/06 23:32
字数 445
阅读 93
收藏 11

遇到一个需求,图片需要在浏览器离线展示。

刚开始没想到什么办法,无意中发现kindeditor可以直接截图粘贴,没有上传就展示出来,查看html元素,发现图片是已base64展示展现的。

实现思路:在有网络的时候,将图片的base64数据缓存到浏览器端的localStorage;无网络则可以从localStorage读取base64数据展示图片,以base64方式展示图片如下。

1、主要依赖库

<dependency>
	<groupId>commons-codec</groupId>
	<artifactId>commons-codec</artifactId>
	<version>1.9</version>
</dependency>

2、对图片的字节码编码成base64字符串

package com.wss.lsl.demo.base64.service.impl;

import java.io.BufferedInputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;

import org.apache.commons.codec.binary.Base64;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Service;

import com.wss.lsl.demo.base64.service.ImageService;

@Service("imageService")
public class ImageServiceImpl implements ImageService {
		
	private static final Logger LOG = LoggerFactory.getLogger(ImageServiceImpl.class);
	
	@Override
	public String image2Base64(String imageFile) {
		LOG.info("图片转化为base64编码参数:imageFile={}", imageFile);
		
		BufferedInputStream bis = null;
		String result = null;
		byte[] data = null;
		try {
			bis = new BufferedInputStream(new FileInputStream(new File(imageFile)));
			int count = bis.available();
			data = new byte[count];
			bis.read(data);
			result = Base64.encodeBase64String(data);
		} catch (Exception e) {
			// ingore
		} finally {
			try {
				bis.close();
			} catch (IOException e) {
				// ingore
			}
		}
		LOG.info("图片转化为base64编码结果:result={}", result);
		return result;
	}

}

3、controller获取base64数据

@Controller
@RequestMapping("/base64")
public class Base64Controller {
	
	private static final Logger LOG = LoggerFactory.getLogger(Base64Controller.class);
	@Autowired
	private ImageService imageService;
	
	@RequestMapping(value="/show")
	public String show(Model model, String id){
		LOG.info("图片以base64格式展示");
		
		try {
			String imageFile = getFilePathFromDb(id); //  从数据库读取图片路径
			String result = imageService.image2Base64(imageFile);
			model.addAttribute("result", result);
		} catch (Exception e) {
			LOG.error("图片转化为base64格式发生异常", e);
		}
		
		return "base64/show";
	}
}

4、页面展示图片

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>以base64格式展示图片</title>
</head>
<body>
	<c:choose>
		<c:when test="${empty result }">
			图片编码失败
		</c:when>
		<c:otherwise>
			<img alt="" src="data:image/png;base64,${result }" />
		</c:otherwise>
	</c:choose>
</body>
</html>

 

© 著作权归作者所有

隆回水哥
粉丝 14
博文 50
码字总数 18935
作品 0
深圳
高级程序员
私信 提问
iOSUIWebView加载UIImage对象 生成高清二维码

iOSUIWebView加载UIImage对象 生成高清二维码 需求:生成二维码图片后 用UIWebview加载出来 之前采用把图片保存到手机中然后读取路径的方法加载。操作复杂,且如果不需要保存到本地,其步骤就...

长大以后想当小孩
2017/11/23
0
0
前端如何优雅的制作带LOGO的二维码

说在前面的话... 最近项目有个功能产品列表,可以将不同产品生成不同的二维码,扫码可以进入对应的产品详情页,同时二维码需要带公司logo,需要可以长按调起微信的下载图片的功能,其实也就是...

Color..「Blind」
2018/07/19
0
0
用Vue来实现图片上传多种方式

项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来。 没有业务场景的功能都是耍流氓,那么我们先来模拟...

huangjincq
2018/07/17
0
0
绘制SVG内容到Canvas的HTML5应用

SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术,两种绘制图形方式各有优缺点,但两者并非水火不容,尤其是SVG内容可直接绘制在Canvas上的功能,使得两者可以完美的融合在一起,...

xhload3d
2015/02/01
4.7K
0
Base64与图片

Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息。 在网络中,通过HTTP传输的文件还可以通过base64对数据进行编码进行传输。就如上面的这...

凡尘里的一根葱
2015/10/01
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot 2 实战:使用 Spring Boot Admin 监控你的应用

1. 前言 生产上对 Web 应用 的监控是十分必要的。我们可以近乎实时来对应用的健康、性能等其他指标进行监控来及时应对一些突发情况。避免一些故障的发生。对于 Spring Boot 应用来说我们可以...

码农小胖哥
28分钟前
3
0
ZetCode 教程翻译计划正式启动 | ApacheCN

原文:ZetCode 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远。 ApacheCN 学习资源 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 ...

ApacheCN_飞龙
39分钟前
3
0
CSS定位

CSS定位 relative相对定位 absolute绝对定位 fixed和sticky及zIndex relative相对定位 position特性:css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则...

studywin
48分钟前
6
0
从零基础到拿到网易Java实习offer,我做对了哪些事

作为一个非科班小白,我在读研期间基本是自学Java,从一开始几乎零基础,只有一点点数据结构和Java方面的基础,到最终获得网易游戏的Java实习offer,我大概用了半年左右的时间。本文将会讲到...

Java技术江湖
昨天
5
0
程序性能checklist

程序性能checklist

Moks角木
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部