文件上傳 js實現圖片資源轉化成base64的各類場景

 

js實現圖片資源轉化成base64的各類場景

將要上傳的文件轉爲base64編碼

    var file=$("#file").get(0).files[0];
    var data=getBase64(file,function(base64Data){
          console.log(base64Data);     
    });


/**
 * 獲取指定文件的base64編碼
 * @param  object   File       Blob 或 File 對象這裏是file對象
 * @param  Function callback   返回數據的回調函數
 * @return string              返回base64編碼
 */
function getBase64(File,callback){
    var reader = new FileReader();                  //IE10+
    var AllowImgFileSize = 2100000;                 //上傳圖片最大值(單位字節)（ 2 M = 2097152 B ）超過2M上傳失敗
    var File = File||$("#file").get(0).files[0];    //獲取上傳的文件對象
    /*
        FileList {0: File, 1: File, length: 2} 多個文件
        File:{name: "fan.jpg", lastModified: 1559019043288, lastModifiedDate: Tue May 28 2019 12:50:43 GMT+0800 (中國標準時間), webkitRelativePath: "", size: 3346145, type: "image/jpeg"}
        FileList {0: File, 1: File, length: 2}  單個文件
     */
    if (File) {

        //讀取指定的 Blob 或 File 對象  觸發loadend 事件 並將圖片的base64編碼賦值給result
        reader.readAsDataURL(File);
        //reader.readAsText(File)
        //異步通訊 回調函數返回
        reader.onload = function (e) {
           //var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64碼部分（可選可不選，須要與後臺溝通）
           if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
                alert( '上傳失敗，請上傳不大於2M的圖片！');
                return;
            }else{
                var base64Data=reader.result;
                //返回base64編碼
                callback(base64Data);
            }
        }
    }  
  
}

遠程網絡圖片轉base64

var img="https://tpc.googlesyndication.com/simgad/2267810362956640009?sqp=4sqPyQQ7QjkqNxABHQAAtEIgASgBMAk4A0DwkwlYAWBfcAKAAQGIAQGdAQAAgD-oAQGwAYCt4gS4AV_FAS2ynT4&rs=AOga4qn7mAcd2fT5GMJ4CtJAM2cMRU4bpg";


main(img, function(base64){
    console.log(base64);
    //base64 無故將數據大小增長 1/3
})

function main(src, callback) {
    var image = new Image();
    image.src = src + '?v=' + Math.random(); // 處理緩存
    image.crossOrigin = "*";  // 支持跨域圖片
    //或者  img.crossOrigin = 'Anonymous';//使用跨域圖像
    //圖片加載完成後將圖片轉爲base64編碼
    image.onload = function(){
        var base64 = getBase64Image(image);
        callback && callback(base64);
    }
    //img DOM元素對象
}

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    //drawImage(image, x, y, width, height)
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var dataURL = canvas.toDataURL("image/png");  // 可選其餘值 image/jpeg
    return dataURL;
}

View Code

本地圖片轉爲base64(用上面這種方式也能夠的)

var url = "/static/admin/img/pbl/1.jpg";//這是站內的一張圖片資源，採用的相對路徑
convertImgToBase64(url, function(base64Img){
//轉化後的base64
console.log(base64Img);
}); 
//實現將本地項目的圖片轉化成base64
function convertImgToBase64(url, callback, outputFormat){
   var canvas = document.createElement('CANVAS'),
　　ctx = canvas.getContext('2d'),
　　img = new Image;
　　img.crossOrigin = 'Anonymous';
　　img.onload = function(){
    　　canvas.height = img.height;
    　　canvas.width = img.width;
    　　ctx.drawImage(img,0,0);
    　　var dataURL = canvas.toDataURL(outputFormat || 'image/png');
    　　callback.call(this, dataURL);
    　　canvas = null; 
    };
　　img.src = url;
} 

View Code

 

asdasd

asdasd

自行車自行車

    function demo(){
    
    }
    demo();

1 function demo(){
2     return;
3 }
4     demo();

View Code