img 標簽使用 base64 顯示圖片

 

 

Data URI scheme是在RFC2397中定義的，目的是將一些小的數據，直接嵌入到網頁中，從而不用再從外部文件載入。

base64簡單地說，它把一些 8-bit 數據翻譯成標准 ASCII 字符

圖像文件的內容直接寫在了HTML 文件中，這樣做的好處是，節省了一個HTTP 請求。壞處呢，就是瀏覽器不會緩存這種圖像。

 

Data URI scheme支持的類型有：

　　 data:,文本數據

　　 data:text/plain,文本數據

　　 data:text/html,HTML代碼

　　 data:text/html;base64,base64編碼的HTML代碼

　　 data:text/css,CSS代碼

　　 data:text/css;base64,base64編碼的CSS代碼

　　 data:text/javascript,Javascript代碼

　　 data:text/javascript;base64,base64編碼的Javascript代碼

　　 data:image/gif;base64,base64編碼的gif圖片數據

　　 data:image/png;base64,base64編碼的png圖片數據

　　 data:image/jpeg;base64,base64編碼的jpeg圖片數據

　　 data:image/x-icon;base64,base64編碼的icon圖片數據

　　

 

以img標簽為例進行舉例說明：

<img src=“./images/test.jpg”/>

 

使用base64顯示的形式：

<img src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFU”/>

 

 

JS將圖片轉為base64

function image2Base64(img) {    //圖片轉為base64編碼
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var dataURL = canvas.toDataURL("image/png");
    return dataURL;
}

function getImgBase64(){        //獲取base64編碼
    var base64="";
    var img = new Image();
    img.src="img/test.jpg";
    img.onload=function(){
        base64 = image2Base64(img);
        alert(base64);
    }
}
getImgBase64();    //使用函數