1. 그림 파일 변환 base64

<input accept="image/gif,image/jpeg,image/jpg,image/png" type="file" id="up" />

$(function() {
                $("#up").change(function() {
                    var file = this.files[0];
                    if(undefined == file){
                        return ;
                    }
                    r = new FileReader(); 
                    r.readAsDataURL(file); 
                    r.onload = function(e) {
                        var base64 = e.target.result;
                        
                    }
                });
            });

2. canvas 이미지 처리

2.1 canvas 그림 그리기 및 압축 이미지

var suofang = function(base64, bili, callback) {
    console.log(" ,bili=" + bili);
    // ， 
    var _img = new Image();
    _img.src = base64;
    _img.onload = function() {
        var _canvas = document.createElement("canvas");
        var w = this.width / bili;
        var h = this.height / bili;
        _canvas.setAttribute("width", w);
        _canvas.setAttribute("height", h);
        _canvas.getContext("2d").drawImage(this, 0, 0, w, h);
    }
}

2.2 canvas base64

var base64 = canvas.toDataURL("image/png");

2.3 canvas 회전blob

_canvas.toBlob(function(blob) {
            console.log(blob.size);
        }, "image/jpeg");

2.4 base 회전blob

function dataURItoBlob(base64Data) {
    var byteString;
    if(base64Data.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(base64Data.split(',')[1]);
    else
        byteString = unescape(base64Data.split(',')[1]);
    var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
    var ia = new Uint8Array(byteString.length);
    for(var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ia], {
        type: mimeString
    });
}

3. 파일 업로드

1. base64 업로드

2. 블로그 업로드

var fd = new FormData();
    fd.append("file", blob); //fileData    
    $.ajax({
        type: "post",
        url: "/file/upload",
        async: true,
        data: fd,
        processData: false,
        contentType: false,
        success: function(r) {
 
        }
    });

<input accept="image/gif,image/jpeg,image/jpg,image/png" type="file" id="up" />

$(function() {
    $("#up").change(function() {
        imageDeal(this, dealChange);
    });
})
var dealChange = function(blob, base64) {
    var fd = new FormData();
    fd.append("file", blob); //fileData    
    $.ajax({
        type: "post",
        url: "/file/upload",
        async: true,
        data: fd,
        processData: false,
        contentType: false,
        success: function(r) {
 
        }
    });
}

var imageDeal = function(ele, returnBase64) {
    // file， base64
    var file = ele.files[0]; // 
    if(undefined == file) { // ， ， 
        return;
    }
    console.log("fileSize" + file.size);
    console.log(file.type);
 
    var r = new FileReader();
    r.readAsDataURL(file);
    r.onload = function(e) {
        var base64 = e.target.result;
        var bili = 1.5;
        console.log(" ：" + base64.length);
        suofang(base64, bili, returnBase64);
    }
}
var suofang = function(base64, bili, callback) {
    console.log(" ,bili=" + bili);
    // ， 
    var _img = new Image();
    _img.src = base64;
    _img.onload = function() {
        var _canvas = document.createElement("canvas");
        var w = this.width / bili;
        var h = this.height / bili;
        _canvas.setAttribute("width", w);
        _canvas.setAttribute("height", h);
        _canvas.getContext("2d").drawImage(this, 0, 0, w, h);
        var base64 = _canvas.toDataURL("image/jpeg");
        _canvas.toBlob(function(blob) {
            console.log(blob.size);
            
            if(blob.size > 1024*1024){
                suofang(base64, bili, callback);
            }else{
                callback(blob, base64);
            }
        }, "image/jpeg");
    }
}