图片上传、转换等问题总结

        在项目开发中，不免会遇到图片上传的问题，除了用一些框架自带的方法，我们是需要了解原生JS怎么完成图片的上传与转换的。

        一、图片转换成base64的各种场景

         

本地图片:
<input type="file" id="image"><br/>

    var reader = new FileReader();
         var AllowImgFileSize = 2100000; // 上传图片最大值（单位字节）（2m）
         var file = $("#image")[0].files[0];
         var imgUrlBase64;
         if (file) {
             // 将文件以Data URL形式读入页面
             imgUrlBase64 = reader.readAsDataURL(file);
             reader.onload = function (e) {
                 // var ImFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length; //截取base64码部分（可选可不选，需要与后台沟通）
                 if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
                     alert('上传失败，请上传不大于2M的图片');
                     return;
                 }else{
                     // 执行上传操作
                     alert(reader.result);
                 }
             }
         }


项目中的图片,本地相对路径的图片

function(){
    var url = "static/img/js1.jpg"; // 这是站内的一张图片资源，采用相对路径
    convertImgToBase64(url, function(base64Img) {
        //转化后的base64
        alert(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');
            canvas = null;
        }
        img.src = url;
}

网络图片资源转化为base64
function() {
    //这是网上的一张图片链接
    var url="http://pl.pstatp.com/large/435d000085555bd8de10";
    getBase64(url)
        .then(function(base64){
            console.log(base64); //处理成功打印在控制台
        }), function(err) {
        console.log(err); // 打印异常信息
    });
}

//传入图片路劲，返回base64
function getBase64(img){
    function getBase64Image(img,width,height) { //width、height调用时传入具体像素值，控制大小，不传则默认图像大小
        var canvas = document.createElement("canvas");
        canvas.width = width ? width: img.width;
        canvas.height = height ? height : img.height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        var dataURL = canvas.toDataURL();
        return dataURL;
    }
    var image = new Image();
    image.crossOrigin = '';
    image.src = img;
    var deferred = $.Deferred();
    if(img){
        image.onload = function(){
            deferred.resolve(getBase64Image(image)); //将base64传给done上传处理
        }
        return deferred.promise(); // 问题要让onload完成后再return sessionStorage['imgTest]
    }
}