在浏览器中解析Base64编码图像 / 憋错料

JavaWeb: 搞定验证码
http://www.jianshu.com/p/9284a31e6ce8

import sun.misc.BASE64Decoder;
import sun.misc.BASE64Encoder;

import javax.imageio.ImageIO;
import javax.imageio.stream.FileImageOutputStream;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.*;
import java.util.Random;

/**

 * 生成随机数字或字母串，以图像方式显示，用于人工识别，使程序很难识别。

 * 减小系统被程序自动攻击的可能性。

 * 生成的图形颜色由红、黑、蓝、紫4中随机组合而成，数字或字母垂直方向位置在

 * 一定范围内也是随机的，减少被程序自动识别的几率。

 * 由于数字的0，1，2易和字母的o，l,z混淆，使人眼难以识别，因此不生成数字和字母的混合串。

 * 生成的串字母统一用小写，串的最大长度为16。

 *

 */

public class RandomGraphic {

//字符的高度和宽度，单位为像素

    private int wordHeight = 10;

    private int wordWidth = 15;

//字符大小

    private int fontSize = 16;

//最大字符串个数

    private  static final int MAX_CHARCOUNT = 16;

//垂直方向起始位置

    private final int initypos = 5;

//要生成的字符个数，由工厂方法得到

    private int charCount = 0;

//颜色数组，绘制字串时随机选择一个

    private static final Color[] CHAR_COLOR = {Color.RED,Color.BLUE,Color.MAGENTA,Color.blue};

//随机数生成器

    private Random r = new Random();

    /**

     * 生成图像的格式常量，JPEG格式,生成为文件时扩展名为.jpg；

     * 输出到页面时需要设置MIME type 为image/jpeg

     */

    public static String GRAPHIC_JPEG = "JPEG";

    /**

     * 生成图像的格式常量，PNG格式,生成为文件时扩展名为.png；

     * 输出到页面时需要设置MIME type 为image/png

     */

    public static String GRAPHIC_PNG = "PNG";

//用工厂方法创建对象

    protected RandomGraphic(int charCount){

        this.charCount = charCount;

    }

    /**

     * 创建对象的工厂方法

     * @param charCount 要生成的字符个数，个数在1到16之间

     * @return 返回RandomGraphic对象实例

     * @throws Exception 参数charCount错误时抛出

     */

    public static RandomGraphic createInstance(int charCount) throws Exception{

        if (charCount < 1 || charCount > MAX_CHARCOUNT){

            throw new Exception("Invalid parameter charCount,charCount should between in 1 and 16");

        }

        return new RandomGraphic(charCount);

    }

    /**

     *  随机生成一个数字串，并以图像方式绘制，绘制结果输出到流out中

     * @param graphicFormat 设置生成的图像格式，值为GRAPHIC_JPEG或GRAPHIC_PNG

     * @param out 图像结果输出流

     * @return 随机生成的串的值

     * @throws IOException

     */

    public String drawNumber(String graphicFormat,OutputStream out) throws IOException{

// 随机生成的串的值

        String charValue = "";

        /*charValue = randNumber();*/
        charValue = randAlphaStr(4);
        return draw(charValue,graphicFormat,out);

    }

    /**

     * 随机生成一个字母串，并以图像方式绘制，绘制结果输出到流out中

     * @param graphicFormat 设置生成的图像格式，值为GRAPHIC_JPEG或GRAPHIC_PNG

     * @param out 图像结果输出流

     * @return 随机生成的串的值

     * @throws IOException

     */

    public String drawAlpha(String graphicFormat,OutputStream out) throws IOException{

//  随机生成的串的值

        String charValue = "";

        charValue = randAlphaStr(4);

        return draw(charValue,graphicFormat,out);

    }
    // 给定范围获得随机颜色
    Color getRandColor(int fc, int bc) {
        Random random = new Random();
        if (fc > 255) {
            fc = 255;
        }
        if (bc > 255) {
            bc = 255;
        }
        int r = fc + random.nextInt(bc - fc);
        int g = fc + random.nextInt(bc - fc);
        int b = fc + random.nextInt(bc - fc);
        return new Color(r, g, b);
    }

    /**

     * 以图像方式绘制字符串，绘制结果输出到流out中

     * @param charValue 要绘制的字符串

     * @param graphicFormat 设置生成的图像格式，值为GRAPHIC_JPEG或GRAPHIC_PNG

     * @param out 图像结果输出流

     * @return 随机生成的串的值

     * @throws IOException

     */

    protected String draw(String charValue,String graphicFormat,OutputStream out) throws IOException{
        int width = (charCount+2) * wordWidth;
        int height = wordHeight * 3;
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        // 创建一个随机数生成器类。
        Random random = new Random();
        // 获取图形上下文
        Graphics g = image.getGraphics();
        // 设定背景色
        g.setColor(getColor(100));
        g.fillRect(0, 0, width, height);
        // 设定字体
        g.setFont(new Font("宋体", Font.BOLD, 18));
        // 随机产生155条干扰线，使图象中的认证码不易被其它程序探测到
        g.setColor(getRandColor(160, 200));
        for (int i = 0; i < 155; i++) {
            int x = random.nextInt(width);
            int y = random.nextInt(height);
            int xl = random.nextInt(12);
            int yl = random.nextInt(12);
            g.setColor(getColor(25));
            g.drawLine(x, y, x + xl, y + yl);
        }
        // 绘制charValue,每个字符颜色随机
        for(int i = 0; i < charCount; i++){
            String c = charValue.substring(i,i+1);
            Color color =  CHAR_COLOR[randomInt(0,CHAR_COLOR.length)];
            g.setColor(color);
            int xpos = (i+1) * wordWidth;
            // 垂直方向上随机
            int ypos = randomInt(initypos+wordHeight,initypos+wordHeight*2);
            g.drawString(c,xpos,ypos);
        }

        g.dispose();
        image.flush();
        // 输出到流
        ImageIO.write(image,graphicFormat,out);
        return charValue;
    }
    /*** 随机返回一种颜色,透明度0~255 0表示全透
     * @return 随机返回一种颜色
     * @param alpha 透明度0~255 0表示全透
     */
    private Color getColor(int alpha)
    {
        int R=(int) (Math.random()*255);
        int G=(int) (Math.random()*255);
        int B=(int) (Math.random()*255);
        return new Color(R,G,B,alpha);
    }
    public String drawInputstr(int num,String graphicFormat,OutputStream out) throws IOException{
        String charValue = randAlphaStr(num);
        int width = (charCount+2) * wordWidth;
        int height = wordHeight * 3;
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        ByteArrayOutputStream byteOut = new ByteArrayOutputStream();
        // 创建一个随机数生成器类。
        Random random = new Random();
        // 获取图形上下文
        Graphics g = image.getGraphics();
        // 设定背景色
        g.setColor(getColor(80));
        g.fillRect(0, 0, width, height);
        //设置干扰点
        CreateRandomPoint(width, height,50,g,255);
        // 设定字体
        g.setFont(new Font("宋体", Font.BOLD, 18));
        // 随机产生155条干扰线，使图象中的认证码不易被其它程序探测到
        g.setColor(getRandColor(160, 200));
        for (int i = 0; i < 135; i++) {
            int x = random.nextInt(width);
            int y = random.nextInt(height);
            int xl = random.nextInt(12);
            int yl = random.nextInt(12);
            g.setColor(getColor(200));
            g.drawLine(x, y, x + xl, y + yl);
        }
        // 绘制charValue,每个字符颜色随机
        for(int i = 0; i < charCount; i++){
            String c = charValue.substring(i,i+1);
            Color color =  CHAR_COLOR[randomInt(0,CHAR_COLOR.length)];
            g.setColor(color);
            int xpos = (i+1) * wordWidth;
            // 垂直方向上随机
            int ypos = randomInt(initypos+wordHeight,initypos+wordHeight*2);
            g.drawString(c,xpos,ypos);
        }

        g.dispose();
        image.flush();
        // 输出到流
        ImageIO.write( image, graphicFormat, out);
        return charValue;
    }
// 生成随机数字串

    protected String randNumber(){

        String charValue = "";

        for (int i = 0; i < charCount; i++){

            charValue += String.valueOf(randomInt(0,10));

        }

        return charValue;

    }

// 生成随机字母串

    private String randAlpha(){

        String charValue = "";

        for (int i = 0; i < charCount; i++){

            char c = (char) (randomInt(0,26)+‘a‘);

            charValue += String.valueOf(c);

        }

        return charValue;

    }
// 生成随机字符串

    private String randAlphaStr(int num){

        StringBuffer charValue = new StringBuffer();
        String str="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        Random random=new Random();
        StringBuffer sb=new StringBuffer();
        for(int i=0;i<num;i++){
            int number=random.nextInt(62);
            charValue.append(str.charAt(number));
        }
        return charValue.toString();
    }

    /**

     * 返回[from,to)之间的一个随机整数

     * @param from 起始值

     * @param to 结束值

     * @return [from,to)之间的一个随机整数

     */

    protected int randomInt(int from,int to){

        return from+r.nextInt(to-from);

    }

    /**
     * 随机产生干扰点
     * @param width
     * @param height
     * @param many
     * @param g
     * @param alpha 透明度0~255 0表示全透
     */
    private void CreateRandomPoint(int width,int height,int many,Graphics g,int alpha)
    {  // 随机产生干扰点
        Random random = new Random();
        for (int i=0;i<many;i++) {
            int x = random.nextInt(width);
            int y = random.nextInt(height);
            g.setColor(getColor(alpha));
            g.drawOval(x,y,random.nextInt(3),random.nextInt(3));
        }
    }

    public static void main(String[] args) throws FileNotFoundException, IOException, Exception {

// TODO Auto-generated method stub
        ByteArrayOutputStream output = new ByteArrayOutputStream();
        String str = RandomGraphic.createInstance(4).drawInputstr(4,RandomGraphic.GRAPHIC_PNG,output);
        System.out.println("----------------str:"+str);
        byte[] captcha = output.toByteArray();
        BASE64Encoder encoder = new BASE64Encoder();

        String imagestr =  encoder.encode(captcha);// 返回Base64编码过的字节数组字符串
        System.out.println("----------------:"+imagestr);
        System.out.println("----------------:"+captcha.toString());
        String path = "D:/myimg.png";
        String path2 = "D:/myimg2.png";
        byte[] data = captcha;
        if(data.length<3||path.equals("")) return;
        try{
            FileImageOutputStream imageOutput = new FileImageOutputStream(new File(path));
            imageOutput.write(data, 0, data.length);
            imageOutput.close();
            System.out.println("Make Picture success,Please find image in " + path);
        } catch(Exception ex) {
            System.out.println("Exception: " + ex);
            ex.printStackTrace();
        }

        BASE64Decoder decoder = new BASE64Decoder();
        try {
            // Base64解码
            byte[] bytes = decoder.decodeBuffer(imagestr);
            for (int i = 0; i < bytes.length; ++i) {
                if (bytes[i] < 0) {// 调整异常数据
                    bytes[i] += 256;
                }
            }
            // 生成jpeg图片
            OutputStream out = new FileOutputStream(path2);
            out.write(bytes);
            out.flush();
            out.close();

        } catch (Exception e) {

        }
      //
       // System.out.println(RandomGraphic.createInstance(4).drawAlpha(RandomGraphic.GRAPHIC_JPEG,new FileOutputStream("D:/myimg2.png")));

    }

上一篇介绍中，我们将二进制文件(BLOB)保存为Base64编码的文本，这些文本可以内嵌在XML的标签中，因此二进制信息它可以随着XML文件被拷贝、下载而不用担心信息会缺失。这项技术也在email邮件中被广泛使用。

浏览器对Base64的支持
图像是最经常被使用的一种二进制文件。而现代的浏览器的进步日新月异，IE7，FireFox和其他浏览器为包括Base64在内各种编码的图像信息提供了很好的支持。因此图形信息可以以下面的形式呈现在页面中、

Java代码

<img src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////
wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4ML
wWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw=="
alt="Base64 encoded image" width="150" height="150"/>

这种data: URI的格式能把Base64（或其他数据）可以内嵌在image标签的属性当中（或者CSS中）。我们可以看到在大部分浏览器中的显示效果：

这种做法有利有弊，好处是浏览器可以在一个连接中得到完成的页面内容，不好的地方时图像的大小会增加1/3。因此，这种内嵌的方法适合对小的图形元素比如图标、圆角等等进行处理，从而减少浏览器打开的连接数，但对大的照片、图片（量少而大）等等则不应该使用Base64编码以免影响下载速度。

为了得到刚才的Base64编码，我们将上一篇的Java修改成Struts Action，并借用了JIMI进行图形的读取和格式转换，Base64编码器则改为更普遍的Apache Commons组件，代码如下：

Java代码

public class Base64ImageAction extends ActionSupport {
private final static String galleryName = "gallery";
private static String parent = null;
private String encodeString = null;
public String getEncodeString() {
return encodeString;
}
public void setEncodeString(String encodeString) {
this.encodeString = encodeString;
}
private String getImageFullPath() {
parent = new File(this.getClass().getClassLoader().getResource(
File.separator).getPath()).getParent()+File.separator+"flag.jpg";
}
public String execute() {
ByteArrayOutputStream output = new ByteArrayOutputStream();
try {
JimiReader reader = Jimi.createJimiReader(this.getImageFullPath());
Image image = reader.getImage();
Jimi.putImage("image/png", image, output);
output.flush();
output.close();
this.encodeString = Base64.encodeBase64String(output.toByteArray());
} catch (IOException e) {
e.printStackTrace();
} catch (JimiException e) {
e.printStackTrace();
}
return SUCCESS;
}
}

对应的View端是个十分简单的Freemarker模板:

Html代码

<html>
<head>
<title>Hello,World</title>
</head>
<body>
<img src="data:image/png;base64,${encodeString}" />
</body>
</html>

处理古代浏览器
世界总是不是那么完美，尽管大部分现代浏览器对Base64的处理都十分完善，但是我们不能不考虑到一些“古老”的浏览器，而现在还是普遍使用的“古老”的浏览器，就当属IE6，在IE6里试图浏览上面的图片可能会得到一个红叉叉。我们不得不为IE6做一些特殊处理,利用下面的javascript,我们把Base64字串传回服务器端，重新解析成图片

Javascript代码

// a regular expression to test for Base64 data
var BASE64_DATA = /^data:.*;base64/i;
// path to the PHP module that will decode the encoded data
var base64Path = "/my/path/base64.php";
function fixBase64(img) {
// check the image source
if (BASE64_DATA.test(img.src)) {
// pass the data to the PHP routine
img.src = base64Path + "?" + img.src.slice(5);
}
};
// fix images on page load
onload = function() {
for (var i = 0; i < document.images.length; i++) {
fixBase64(document.images[i]);
}
};

服务器端的Struts可以参考上面的例子做反向操作，具体从略。

更完美的方法
将Base64传回服务器解码是不错的IE6补丁，但是违背了我们的初衷，对IE6来说，浏览器连接数并未有任何减少。更直接的想法，是否能用Javascript直接在浏览器中，对Base64文本进行解码呢？我们构思的场景如下：服务器端先将图片转换成PNG格式以方便客户端进行处理，Base64编码之后，利用JSON将文本传递给浏览器客户端进行处理。

我们选择PNG图形格式是因为PNG已经俨然成为新的Web图形标准，它格式非常简单，可以很方便的用javascript进行处理而不需要借助浏览器的支持。我们知道javascript直接不能处理二进制数据，但是现在这不是个问题，服务器端已经准备好了Base64编码的文本数据，现在我们只需要一个javascript的Base64解析器，你可以在这里找到一个notmasteryet的Base64解析器。

现在PNG图形格式采用了DEFLATE作为唯一的压缩算法，该算法也广泛应用在ZIP,GZIP等压缩格式中。PNG图像格式文件(或者称为数据流)由一个8字节的PNG文件署名(PNG file signature)域和按照特定结构组织的3个以上的数据块(chunk)组成。

PNG定义了两种类型的数据块，一种是称为关键数据块(critical chunk)，这是标准的数据块，另一种叫做辅助数据块(ancillary chunks)，这是可选的数据块。关键数据块定义了4个标准数据块，其中图像数据块IDAT(image data chunk)：它存储实际的数据, PNG总的数据流采用DEFLAT进行压缩。此外还擦用三角过滤“delta filters”来过滤每一行的像素的未压缩数据。DEFLAT和delta压缩在其他数据和文本处理中也被广泛应用。PNG格式你可以参考<a href="http://www.libpng.org/pub/png/spec/1.1/PNG-Contents.html">官方文档</a>。

很棒的，notmasteryet也为我们提供了一个DEFLAT解压器。

最后，我们把这些组合起来:

Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo JavaScript PNG Viewer</title>
</head>
<body onload="show(gravatar);">
<script src="../Source/Base64.js" type="text/javascript"></script>
<script src="../Source/Deflate.js" type="text/javascript"></script>
<script src="../Source/PNG.js" type="text/javascript"></script>
<script type="text/javascript">
var gravatar = ‘iVBORw0KGgoAAAANSUhEUgAAA.......数据从略......55CYII=‘;
String.prototype.padRight = function(c, n){
var txt = ‘‘;
for(var i=0;i<n-this.length;i++) txt += c;
return txt + this;
};
function show(data){
var png = new PNG(data);
var img = document.getElementById(‘image‘), limg = document.getElementById(‘largeimage‘);
document.getElementById(‘nativeimage‘).src = ‘data:image/png;base64,‘ + data;
img.innerHTML = ‘‘;
limg.innerHTML = ‘‘;
img.style.width = png.width + ‘px‘;
img.style.height = png.height + ‘px‘;
limg.style.width = (png.width * 3) + ‘px‘;
limg.style.width = (png.height * 3) + ‘px‘;
var line;
while(line = png.readLine())
{
for (var x = 0; x < line.length; x++){
var px = document.createElement(‘div‘), px2 = document.createElement(‘div‘);
px.className = px2.className = ‘pixel‘;
px.style.backgroundColor = px2.style.backgroundColor = ‘#‘ + line[x].toString(16).padRight(‘0‘, 6);
img.appendChild(px);
limg.appendChild(px2);
}
}
}
</script>
<div id="image"></div>
<div id="largeimage"></div>
<img id="nativeimage" />
</body>
</html>

相关的javascript请到blogs.ejb.cc下载。

还可以更完美
回顾上一篇的例子，我们用了ihard.net提供了Base64编码，它提供一个GZIP编码参数，你可以发现如此编码之后的文本大小和原来的图形大小相差无几。利用上一节提供了javascript是不是可以解决Base64编码后文件大小增加的问题？留着思考吧。

http://blog.csdn.net/elf8848/article/details/39927385

时间： 2024-10-03 13:39:50

在浏览器中解析Base64编码图像

在浏览器中解析Base64编码图像的相关文章

Python中进行Base64编码和解码

Python中的Base64编码的加密与解密

javaScript base64算法的实现与 java中的base64 加密解密

python中base64编码与解码

浅析用Base64编码的图片优化网页加载速度

图片的base64编码实现以及网页上显示

python学习笔记十七：base64编码

Base64编码原理及应用

基于OpenCV进行图像拼接原理解析和编码实现(提纲代码和具体内容在课件中）