data:image/png;base64 上傳圖像將圖片轉換成base64格式

你們可能注意到了，網頁上有些圖片的src或css背景圖片的url後面跟了一大串字符，好比：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///+ZmZmOUEqyAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACusAAArrAYKLDVoAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvMjAvMTIGkKG+AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAAB1JREFUCJljONjA8LiBoZyBwY6BQQZMAtlAkYMNAF1fBs/zPvcnAAAAAElFTkSuQmCC

那麼這是什麼呢？這是Data URI scheme。

Data URI scheme是在RFC2397中定義的，目的是將一些小的數據，直接嵌入到網頁中，從而不用再從外部文件載入。好比上面那串字符，實際上是一張小圖片，將這些字符複製黏貼到火狐的地址欄中並轉到，就能看到它了，一張1X36的白灰png圖片。

在上面的Data URI中，data表示取得數據的協定名稱，image/png 是數據類型名稱，base64 是數據的編碼方法，逗號後面就是這個image/png文件base64編碼後的數據。

 

目前，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圖片數據

 

base64簡單地說，它把一些 8-bit 數據翻譯成標準 ASCII 字符，網上有不少免費的base64 編碼和解碼的工具，在PHP中能夠用函數base64_encode() 進行編碼，如 echo base64_encode(file_get_contents(‘wg.png’));

目前，IE八、Firfox、Chrome、Opera瀏覽器都支持這種小文件嵌入。

 

舉個圖片的例子：

網頁中一張圖片能夠這樣顯示：

<img src="http://mail.163.com/images/x.png" />

 也能夠這樣顯示：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///+ZmZmOUEqyAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACusAAArrAYKLDVoAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvMjAvMTIGkKG+AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAAB1JREFUCJljONjA8LiBoZyBwY6BQQZMAtlAkYMNAF1fBs/zPvcnAAAAAElFTkSuQmCC" />

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

 

c#後臺代碼：

private string decodeBase64ToJpg(string dataURL,string imgName)
        {
            try
            {
                string filePath = "D:\\Temp\\images\\" + imgName;
                byte[] arr = Convert.FromBase64String(dataURL.Substring(dataURL.IndexOf("base64,") + 7).Trim('\0'));
                using (MemoryStream ms = new MemoryStream(arr))
                {
                    Bitmap bmp = new Bitmap(ms);
                    //新建第二個bitmap類型的bmp2變量
                    Bitmap bmp2 = new Bitmap(bmp, bmp.Width, bmp.Height);
                    //將第一個bmp拷貝到bmp2中
                    Graphics draw = Graphics.FromImage(bmp2);
                    draw.DrawImage(bmp,0,0);
                    draw.Dispose();
                    bmp2.Save(filePath, System.Drawing.Imaging.ImageFormat.Jpeg);
                    ms.Close();
                    return filePath;
                }
            }
            catch (Exception ex)
            {
                return "";
            }
           
        }

public string decodeBase64ToPng(string dataURL, string imgName)
        {
            string filename = "";//聲明一個string類型的相對路徑
            string imagesurl2 = "";

            String base64 = dataURL.Substring(dataURL.IndexOf(",") + 1);      //將‘，’之前的多餘字符串刪除
            System.Drawing.Bitmap bitmap = null;//定義一個Bitmap對象，接收轉換完成的圖片
            try//會有異常拋出，try，catch一下
            {
                String inputStr = base64;//把純淨的Base64資源扔給inpuStr,這一步有點多餘

                byte[] arr = Convert.FromBase64String(inputStr);//將純淨資源Base64轉換成等效的8位無符號整形數組

                System.IO.MemoryStream ms = new System.IO.MemoryStream(arr);//轉換成沒法調整大小的MemoryStream對象
                System.Drawing.Bitmap bmp = new System.Drawing.Bitmap(ms);//將MemoryStream對象轉換成Bitmap對象
                
                ms.Close();//關閉當前流，並釋放全部與之關聯的資源
                bitmap = bmp;
                filename = imgName;//所要保存的相對路徑及名字+ ".png"
                //string tmpRootDir = Server.MapPath(System.Web.HttpContext.Current.Request.ApplicationPath.ToString()); //獲取程序根目錄
                imagesurl2 = "D:\\Temp\\images\\" + filename; //轉換成絕對路徑
                bitmap.Save(imagesurl2, System.Drawing.Imaging.ImageFormat.Png);//保存到服務器路徑
                
            }
            catch (Exception)
            {
            }
            return imagesurl2;//返回路徑
        }      

前端代碼：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>ajax</title>

        <script src="js/jquery-1.9.1.min.js"></script>
    </head>

    <body>
        <div class="upload">
            <input type="button" class="btn" onclick="img_upload_file.click()" value="上傳">
            <input type="file" id="img_upload_file" style="display: none;" class="test">
            <div class="img_center">
                <img src="" id="img_upload_show" style="border: #0000FF solid 2px;width: 600px;height: 600px;">
            </div>
        </div>
        <script type="text/javascript">
            var jsonData = '';
            $(function() {

                $("#img_upload_file").change(function() {
                    var oFile = this.files[0];
                    console.log("oFile")
                    console.log(oFile)
                    var reader = new FileReader();
                    reader.readAsDataURL(oFile); //調用自帶方法進行轉換 
                    reader.onload = function(e) {
                        $("#img_upload_show").attr("src", this.result); //將轉換後的編碼存入src完成預覽 
                        var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
                        console.log(oFile.type);
                        if(!rFilter.test(oFile.type)) {
                            alert("文件格式必須爲圖片");
                            return;
                        }
                        /*if(oFile.size > iMaxFilesize) {
                            alert("圖片大小不能超過2M");
                            return;
                        }*/

                        var xyString1 = "462.7558,722.0276,12734808.3808,3570844.6208";
                        var xyString2 = "1272.6326,760.5932,12734820.7004,3570844.3868";
                        var xyString3 = "394.1948,953.4210,12734808.2984,3570839.6826";
                        var xyString4 = "1268.3476,996.2716,12734820.7004,3570839.4260";
                        jsonData = oFile.name + " " + oFile.type + " " + this.result + " " + xyString1 + " " + xyString2 + " " + xyString3 + " " + xyString4;
                        console.log(jsonData);
                        $.ajax({
                            url: 'http://127.0.0.1:6163/igs/rest/test/GetImage',
                            data: jsonData,
                            type: "POST",
                            dataType: "json",
                            contentType: 'application/x-www-form-urlencoded;charset=UTF-8', //防止亂碼
                            success: function(data) {
                                console.log(data);
                            }
                        });

                    };
                });
            })
        </script>
    </body>

</html>