實現將圖片轉base64字符串

最近在做項目的時候,想調用一個接口。接口中一個參數要求需要圖片的base64字符串,所以下面整理了一下圖片轉base64字符串的方法:

方法1:(根據圖片路徑)

var image = new Image();  
image.src = imgurl; //imgurl 就是你的圖片路徑   
image.onload = function(){  
  var base64 = getBase64Image(image);  
  console.log(base64);  
}    



function GetBase64Image(img) {
    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 ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
    var dataURL = canvas.toDataURL("image/" + ext);
    return dataURL;
}

方法2:(根據上傳圖片)

<input type="file" id="testFile" />
//上傳的圖片
$('#testFile').change(function (e) {
    if (!this.files[0].type.match(/image.*/)) {
        alert('請上傳圖片格式的文件!');
        return false;
    } 
    var filemaxsize = 1024 * 4; //4M
    var Size = this.files[0].size / 1024;
    if (Size > filemaxsize) {
         alert('上傳圖片不能超過4M,請重新上傳!');
         return false;
    } 
    //獲取圖片的base64編碼
    var reader = new FileReader();
    reader.readAsDataURL(this.files[0]); // 讀出base64
    var dataURL = reader.result;//base64              
});

補充:

1、調用接口時要求base64沒有頭部(data:image/png;base64,),需將頭部去掉(在js中去掉或在後臺邏輯去掉)

dataURL.substring(dataURL.indexOf(",") + 1);

2、調用接口時要求base64不能超過4M,需要判斷

var maxSize = 1024 * 1024 * 4; //4M 的字節
if(dataURL.length > maxSize) {
    alert("base64超出4M!");
}

3、如何獲取圖片的長和寬

var image = new Image();  
image.src = imgurl; //imgurl 就是你的圖片路徑 

alert('圖片寬度:' + image.width + ',圖片高度:' + image.height);

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章