HTML 5 file APIとcanvasで画像フロントエンドJSの圧縮とアップロードを実現
1697 ワード
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)); } }
};
//ファイル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)});
//画像を圧縮するために必要な要素とオブジェクト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)});