Java对图片Base64转码--HTML对Base64解码

本文介绍了如何使用Java进行图片的Base64编码,并展示了HTML如何对Base64编码的图片进行解码显示。提供了一组测试数据供读者实践操作。
摘要由CSDN通过智能技术生成

Java对图片Base64转码

 

    package base64;
    import java.awt.image.BufferedImage;  
    import java.io.ByteArrayInputStream;  
    import java.io.ByteArrayOutputStream;  
    import java.io.File;  
    import java.io.IOException;  
    import javax.imageio.ImageIO;  
    import sun.misc.BASE64Decoder;  
    import sun.misc.BASE64Encoder;  
      
    public class imageToBase64 {  
        static BASE64Encoder encoder = new sun.misc.BASE64Encoder();  
        static BASE64Decoder decoder = new sun.misc.BASE64Decoder(); 
        public static void main(String[] args) {  
            System.out.println(getImageBinary());  
        	base64StringToImage(getImageBinary()); 
        }  
          
        // 编码图片到Base64,文件请放在C盘根文件夹下。名字必须为wjp.png
        static String getImageBinary(){
            File f = new File("C:/wjp.png");         
            BufferedImage bi;  
            try {
                bi = ImageIO.read(f);  
                ByteArrayOutputStream baos = new ByteArrayOutputStream();  
                ImageIO.write(bi, "jpg", baos);  
                byte[] bytes = baos.toByteArray();  
                  
                return encoder.encodeBuffer(bytes).trim();  
            } catch (IOException e) {  
                e.printStackTrace();  
            }  
            return null;  
        }  
          
        // 解码Base64成为图片。保存在D盘根文件夹下,名字为wjp.png
        static void base64StringToImage(String base64String){  
            try {  
                byte[] bytes1 = decoder.decodeBuffer(base64String);                
                ByteArrayInputStream bais = new ByteArrayInputStream(bytes1);  
                BufferedImage bi1 =ImageIO.read(bais);  
                File w2 = new File("d://wjp.png");
                ImageIO.write(bi1, "jpg", w2);
            } catch (IOException e) {  
                e.printStackTrace();  
            }  
        }  
      
    }  


HTML对Base64解码

 

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gbk">
		<title></title>
		
		<script type="text/javascript">	
			//hideElement()  ,  showElement()
			function hideElement(id){
				document.getElementById(id).style.display="none";
			}
			function showElement(id){
				document.getElementById(id).style.display="";
			}
			
			function wjp(id){
				if(id == 1){
					var values = document.getElementById("code").value ;
					var str = "<span><img src=\"data:image/gif;base64," + values + "\"/></span><br />" ;
					showElement("div2") ;
					hideElement("div1") ;
					document.getElementById("insert").innerHTML = str;
				}
				if(id == 2){
				
					showElement("div1") ;
					hideElement("div2") ;
					document.getElementById("code").value = "" ;
				}
			}

		</script>
	</head>
	<body>
		<center>
			<div id="div1">
				<h2 style="color:red;">W_Jp Base64解码</h2>
				<textarea rows="20" cols="100" id="code"></textarea>
				<br />
				<input type="button" value="转码" οnclick="wjp(1)"/>
				<br /><br /><br /><br /><br />
			</div>
			
			<div id="div2">
				<h2 style="color:red;">W_Jp 给您的结果</h2>
				<label id="insert"></label>
				<input type="button" value="继续转码" οnclick="wjp(2)"/>
			</div>
			
		</center>
		
		<script type="text/javascript">
			showElement("div1") ;
			hideElement("div2") ;
		</script>
		
	</body>
</html>


给大家一组測试数据。能够尝试用我的HTML代码去试试。看看能否显示出图片。

 

/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0a
HBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIy
MjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAJoAMgDASIA
AhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQA
AAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3
ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWm
p6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEA
AwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSEx
BhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElK
U1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3
uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD1rS2K
aLpwCJzaoTlQf6VLPfwW3lfaJ7WLzZBFH5iqodz0UZ6k+lRWIH9k6eD2tlJFcX4m05obnT7jWTba
tLf30OniKSApFbwyA7zEu8kSErneST0Axisbu+5r0O+81t4BWMe3lr/hUUV/BNPLBHNbPNAAZo1C
Fo9wyu4dRkcjPWs7T4LnR7GRdR1Rbq2t/wDVzzR7JFjGT+8fdhiBj5sL0JOc1xvhzU7yHxU2sXsC
w6d4lOy2LIVZDEMRB8naC6ZxgtuOMYFK77hoegHVLVXuEa5sw1soa4XKZhBG4F/7owM89qmgulni
iliaGSKRdyuiqQw7EEDkGvLPiPpjXHiO3MxtpYrmxmED3G5PsrRAO7ExrucBQdoJb5mbjHBi8H6b
bpc65apbWItEsERr2a4fKQTxmT5sJGJBnBJOxlHG4gDFa2vcXXY9Tt7+G6Ehgnt5fKkMUmxUYI46
qcdCPQ0ttqEN7Ak9q9vcQvnbJFsZGwcHBA9QRXiHhm001rK71LZYITfiO0juFmSWUb4zthMcrOrr
leQjkbgNzAnHofwzdn8AacpjZAjyqGOMODIxyMHpzjnByD2wSnddQVn0Oy81ieif8BjX/CgSsOdq
HHUGNc/yph6nIzg4x6CgHkZ7Zzn0qbvuVZD/ADGDY2xnPI/drj+VHmn/AKZf9+hio+Plz2XJFLkj
qcn07GjmYWQ/zW3gFYx7eWv+FAlOASsfTJ/dr/hUZIUZ7K3FKPQDp29RRzPuFkPErZGVi57eWvH6
Uqyk7flj6H/lmv8AhUf4n8uaCSM4xux/3yKOZhZDhK2ASE/GJcfypfObdjy0z/uL/hTBwOBjHBHY
0EcY9Dj8KLvuFkP81ieif8BjX/CgSsOdqHHUGNc/yph6nIzg4x6CgHkZ7Zzn0ou+4WQ/zGDY2xnP
I/drj+VHmn/pl/36GKj4+XPZckUuSOpyfTsaOZhZD/NbeAVjHt5a/wCFAlOASsfTJ/dr/hUZIUZ7
K3FKPQDp29RRzPuFkTRSFpo1ZYiGYAjyxRTIP+PiPk/eH8PPWitYO6M5IgtuNPsux8gc/ieKgvtM
tNS+zC7iZ/ss63MIyRtkXO08dcZPB4rY023il0q28xA37vHNWhZ24GBGAPqankb1K5kc7qGm2mq2
4t76DzoEkWTymYhXYHI3AHDDPY5HtTr+xtdSsZrO9gSe2lUrIj9x7emD0I6Gug+xW/P7oc9aPsVu
esQ9aPZsOdHJXPhzTbvaLv7XcRAoDFNeTPG2zG3chba33QTkHJ5OamsND0/SbiWawtvs3m/fiidl
hJwBkRg7AcKOQM/nXT/Y7f8A55CgWduBgRgD6mjkfcOZHO2Om2emfaPskPl/abhrmUBmO6RsZPJ4
6DgcUmmaXZ6Rp0dhYw+XaxZ2IXJC5JJ5JJPJNdH9kgP/ACzH5mj7Fb4A8oYHSjkYc6MfA6gD6qea
OmB1B6YHWtj7Hb5z5Qz60fY7f/nkPzNHs2HOjH5DckZ9e30penHzD2xmtf7Fb4x5Qx6UCztwMCMA
fU0ezYc6Mj14+70B9aQ45JGcdyefwrY+xW/P7oc9aPsVuesQ9aXs2HOjH5HVjjODSjK9u2OnBrX+
x2//ADyFAs7cDAjAH1NP2bDnRkZAxx34AHekxnOfm7nPStj7JAf+WY/M0fYrfAHlDA6UezYc6MfA
6gD6qeaOmB1B6YHWtj7Hb5z5Qz60fY7f/nkPzNHs2HOjH5DckZ9e30penHzD2xmtf7Fb4x5Qx6UC
ztwMCMAfU0ezYc6Mj14+70B9aQ45JGcdyefwrY+xW/P7oc9aPsVuesQ9aXs2HOjLgyLiLLE/vAKK
1VtIFYMIwCDkH3orSMbEydyDSRjSrYeiVdqppvGnQ/T+tW6a2JYUjMqLuYgAdyaWo5/9WP8AfX/0
IUwD7RD/AM9o/wDvoUfaIf8AntH/AN9CvFdd8f8Aiez
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值