js将图片转为base64编码

采用画布的方法：

var canvas = document.createElement('CANVAS'),
    ctx = canvas.getContext('2d'),
    img = new Image;
img.crossOrigin = 'Anonymous';
img.src = 图片的远程地址;
img.onload = function(){
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.drawImage(img,0,0);
    var dataURL = canvas.toDataURL('image/png');
    console.log(dataURL);
    me.floodImage = blob.replace('data:image/png;base64,', '');
};

注意：得到的base64编码是以 data:image/png;base64, 开头的，注意还有那个逗号，控制台上能看到。这个编码在转化为图片资源的时候，比如你给一个image的src赋值，需要把开头的那个字符串去掉才行才行，可以使用replace方法替换该字符串为空字符串。

顺便补充一个获取远程文件的方法：
 

var blob = '';
var xhr = me.getHttpObj();
xhr.open("get", dataList[0], true);
//这个header参数设置不能缺少，至于其中含义我也没查。
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        //获取图片数据
        blob = xhr.responseText;
        console.log(blob);
        let file = new File([blob],fileName);//得到一个文件对象。
    }
};
xhr.send();

getHttpObj: function () {
    var httpobj = null;
    try {
        httpobj = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
        try {
            httpobj = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e1) {
            httpobj = new XMLHttpRequest();
        }
    }
    return httpobj;
},