Base64 image

本文轉載自查看原文 2017-09-16 14:47 3228 Base64 編碼圖像

【前端攻略】：玩轉圖片Base64編碼

什么是 base64 編碼?　　

我不是來講概念的，直接切入正題，圖片的 base64 編碼就是可以將一副圖片數據編碼成一串字符串，使用該字符串代替圖像地址。

這樣做有什么意義呢？我們知道，我們所看到的網頁上的每一個圖片，都是需要消耗一個 http 請求下載而來的（所有才有了 csssprites 技術的應運而生，但是 csssprites 有自身的局限性，下文會提到）。

沒錯，不管如何，圖片的下載始終都要向服務器發出請求，要是圖片的下載不用向服務器發出請求，而可以隨着 HTML 的下載同時下載到本地那就太好了，而 base64 正好能解決這個問題。

http://www.cnblogs.com/coco1s/p/4375774.html

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

在html中的使用

<img src='data:image/gif;base64,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'/> <br />

效果：

法1：

        ByteArrayOutputStream output = new ByteArrayOutputStream();
        RenderedImage image = producer.createImage(imageCode);
        ImageIO.write(image, "PNG", output);
        return DatatypeConverter.printBase64Binary(output.toByteArray());

法2：

import org.apache.commons.codec.binary.Base64;
import org.apache.commons.imaging.*;
import org.apache.commons.io.FileUtils;

import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

public class Base64Image {
    public static String getBase64(String path) throws IOException {
        byte[] bytes = FileUtils.readFileToByteArray(new File(path));
        String base64String = Base64.encodeBase64String(bytes);
        return base64String;

    }

    public static void getImage(String base64,String outPath) throws IOException, ImageReadException, ImageWriteException {
        if (base64!=null&&!"".equals(base64)){
            int i = base64.lastIndexOf(",");
            if (i>=0){
                base64=base64.substring(i+1);
            }
            byte[] bytes = Base64.decodeBase64(base64);

            BufferedImage bufferedImage = Imaging.getBufferedImage(bytes);
            Map<String, Object> params = new HashMap<String,Object>();

            Imaging.writeImage(bufferedImage,new File(outPath), ImageFormats.BMP, params);

        }
    }
}

https://github.com/xuejike/Base64Image/blob/6b31d9931019184f0efcc6e3d9009f0d94d374ee/src/main/java/com/bidanet/image/Base64Image.java

法3
II. Java 8 Encode an Image to Base64

public static String encoder(String imagePath) {
    String base64Image = "";
    File file = new File(imagePath);
    try (FileInputStream imageInFile = new FileInputStream(file)) {
        // Reading a Image file from file system
        byte imageData[] = new byte[(int) file.length()];
        imageInFile.read(imageData);
        base64Image = Base64.getEncoder().encodeToString(imageData);
    } catch (FileNotFoundException e) {
        System.out.println("Image not found" + e);
    } catch (IOException ioe) {
        System.out.println("Exception while reading the Image " + ioe);
    }
    return base64Image;
}

III. Java 8 Decode an Base64 String to an Image

public static void decoder(String base64Image, String pathFile) {
    try (FileOutputStream imageOutFile = new FileOutputStream(pathFile)) {
        // Converting a Base64 String into Image byte array
        byte[] imageByteArray = Base64.getDecoder().decode(base64Image);
        imageOutFile.write(imageByteArray);
    } catch (FileNotFoundException e) {
        System.out.println("Image not found" + e);
    } catch (IOException ioe) {
        System.out.println("Exception while reading the Image " + ioe);
    }
}

http://javasampleapproach.com/java/java-advanced/java-8-encode-decode-an-image-base64

http://javasampleapproach.com/java-integration/transfer-image-restfulapi-image-restfulapi
convert image to base64 with java
https://stackoverflow.com/questions/28268511/convert-image-to-base64-with-java

頁面以base64輸出圖片http://www.cnblogs.com/LittleMing/p/4882366.html

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 base64 轉 Image PIL.Image 與 base64互轉 data:image/png;base64是什么 PIL.Image與Base64 String的互相轉換圖片Image轉換為base64編碼的方法 url(data:image/png;base64,R0**)(轉) C# Image與Base64編碼互轉函數 data:image/png;base64 上傳圖像將圖片轉換成base64格式 Base64 base64