文件上传

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;
}

本地图片转为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;
} 

asdasd

asdasd

自行车自行车

    function demo(){
    
    }
    demo();

function demo(){
    return;
}
    demo();