最近在做項目的時候,想調用一個接口。接口中一個參數要求需要圖片的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);