HTML 5 file APIとcanvasで画像フロントエンドJSの圧縮とアップロードを実現


HTMLコード:JSコード:var eleFile=document.querySelector(‘#file’);
//画像を圧縮するために必要な要素とオブジェクトvar reader=new FileReader()、img=new Image()
//選択したファイルオブジェクトvar file=null;
//画像のズームに必要なcanvas var canvas=document.createElement(‘canvas’); var context = canvas.getContext(‘2d’);
//base 64アドレス画像のロード完了後img.onload=function(){//ピクチャ元サイズvar originWidth=this.width;var originHeight=this.height;//最大サイズ制限var maxWidth=400、maxHeight=400;//ターゲットサイズvar targetWidth=originWidth、targetHeight=originHeight;//ピクチャサイズ400 x 400を超える制限if(originWidth>maxWidth|originHeight>maxHeight){if(originWidth/originHeight>maxWidth/maxHeight){//より広く、幅によって寸法targetWidth=maxWidth;targetHeight=Math.round(maxWidth*(originHeight/originWidth);}else { targetHeight = maxHeight; targetWidth = Math.round(maxHeight * (originWidth/originHeight)); } }
// canvas       
canvas.width = targetWidth;
canvas.height = targetHeight;
//     
context.clearRect(0, 0, targetWidth, targetHeight);
//     
context.drawImage(img, 0, 0, targetWidth, targetHeight);
// canvas  blob   
canvas.toBlob(function (blob) {
    //   ajax  
    var xhr = new XMLHttpRequest();
    //       
    xhr.onreadystatechange = function() {
        if (xhr.status == 200) {
            // xhr.responseText       
        }
    };
    //     
    xhr.open("POST", 'upload.php', true);
    xhr.send(blob);    
}, file.type || 'image/png');

};
//ファイルbase 64化、画像の元のサイズreaderを知るonload = function(e) { img.src = e.target.result; }; eleFile.addEventListener(‘change’,function(event){file=event.target.files[0];//選択したファイルはピクチャif(file.type.indexOf("image")==0){reader.readAsData URL(file)});