实现将图片转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);