フロントエンドで画像圧縮アップロードを実現
18192 ワード
プロジェクトに画像アップロード機能がある場合、サーバリソースの占有問題が発生し、アップロード画像が大きすぎて空間を占有しないように、画像を圧縮してから記憶する必要がある.
画像圧縮はフロントエンドまたはバックエンドで実現できます.ここでは主に私が使っているフロントエンドの画像圧縮について話します.
ここで紹介するjs圧縮ピクチャの主な考え方は、まずアップロードされたピクチャの大きさを求め、次に制限の最大sizeより大きいかどうかを判断し、大きい場合はピクチャを圧縮することである.圧縮の過程はcanvasを使って圧縮する画像を描くことです.
まずFileReaderオブジェクトを使用して画像を読み込み、画像を圧縮し、圧縮したオブジェクトをblobオブジェクトに変換します(blobタイプについては参照).http://blog.csdn.net/oscar999/article/details/36373183)、最後にblobタイプのファイルをformDataに入れてバックグラウンドに渡します.
次に、圧縮プラグインコードを示します.
次に、圧縮プラグインを呼び出すコードを示します.
fileコントロールを使用する場合、accptプロパティは、ファイルをアップロードするときにファイルタイプをフィルタできます.たとえば、画像のみをアップロードできます.
転載先:https://www.cnblogs.com/hbujt/p/5551549.html
画像圧縮はフロントエンドまたはバックエンドで実現できます.ここでは主に私が使っているフロントエンドの画像圧縮について話します.
ここで紹介するjs圧縮ピクチャの主な考え方は、まずアップロードされたピクチャの大きさを求め、次に制限の最大sizeより大きいかどうかを判断し、大きい場合はピクチャを圧縮することである.圧縮の過程はcanvasを使って圧縮する画像を描くことです.
まずFileReaderオブジェクトを使用して画像を読み込み、画像を圧縮し、圧縮したオブジェクトをblobオブジェクトに変換します(blobタイプについては参照).http://blog.csdn.net/oscar999/article/details/36373183)、最後にblobタイプのファイルをformDataに入れてバックグラウンドに渡します.
次に、圧縮プラグインコードを示します.
/**
* html5 ， 。
*/
var ImageResizer=function(opts){
var settings={
resizeMode:"auto"// ， auto,width,height auto ，width ，height 。
,dataSource:"" // 。 ， ，image ，base64 ，canvas ， file 。。。
,dataSourceType:"image" //image base64 canvas
,maxWidth:500 //
,maxHeight:500 // 。
,onTmpImgGenerate:function(img){} // 。。 ， 。
,success:function(resizeImgBase64,canvas){
}// base64 。
};
var appData={};
$.extend(settings,opts);
var innerTools={
getBase4FromImgFile:function(file,callBack){
var reader = new FileReader();
reader.onload = function(e) {
var base64Img= e.target.result;
if(callBack){
callBack(base64Img);
}
};
reader.readAsDataURL(file);
},
//-- 。。。。 ， 。
getImgFromDataSource:function(datasource,dataSourceType,callback){
var _me=this;
var img1=new Image();
if(dataSourceType=="img"||dataSourceType=="image"){
img1.src=$(datasource).attr("src");
if(callback){
callback(img1);
}
}
else if(dataSourceType=="base64"){
img1.src=datasource;
if(callback){
callback(img1);
}
}
else if(dataSourceType=="canvas"){
img1.src = datasource.toDataURL("image/jpeg");
if(callback){
callback(img1);
}
}
else if(dataSourceType=="file"){
_me.getBase4FromImgFile(function(base64str){
img1.src=base64str;
if(callback){
callback(img1);
}
});
}
},
// 。 ， ， setting 。
getResizeSizeFromImg:function(img){
var _img_info={
w:$(img)[0].naturalWidth,
h:$(img)[0].naturalHeight
};
var _resize_info={
w:0,
h:0
};
if(_img_info.w <= settings.maxWidth && _img_info.h <= settings.maxHeight){
return _img_info;
}
if(settings.resizeMode=="auto"){
var _percent_scale=parseFloat(_img_info.w/_img_info.h);
var _size1={
w:0,
h:0
};
var _size_by_mw={
w:settings.maxWidth,
h:parseInt(settings.maxWidth/_percent_scale)
};
var _size_by_mh={
w:parseInt(settings.maxHeight*_percent_scale),
h:settings.maxHeight
};
if(_size_by_mw.h <= settings.maxHeight){
return _size_by_mw;
}
if(_size_by_mh.w <= settings.maxWidth){
return _size_by_mh;
}
return {
w:settings.maxWidth,
h:settings.maxHeight
};
}
if(settings.resizeMode=="width"){
if(_img_info.w<=settings.maxWidth){
return _img_info;
}
var _size_by_mw={
w:settings.maxWidth
,h:parseInt(settings.maxWidth/_percent_scale)
};
return _size_by_mw;
}
if(settings.resizeMode=="height"){
if(_img_info.h<=settings.maxHeight){
return _img_info;
}
var _size_by_mh={
w:parseInt(settings.maxHeight*_percent_scale)
,h:settings.maxHeight
};
return _size_by_mh;
}
},
//-- canvas 。
drawToCanvas:function(img,theW,theH,realW,realH,callback){
var canvas = document.createElement("canvas");
canvas.width=theW;
canvas.height=theH;
var ctx = canvas.getContext('2d');
ctx.drawImage(img,
0,//sourceX,
0,//sourceY,
realW,//sourceWidth,
realH,//sourceHeight,
0,//destX,
0,//destY,
theW,//destWidth,
theH//destHeight
);
//-- base64 canvas success 。
var base64str=canvas.toDataURL("image/png");
if(callback){
callback(base64str,canvas);
}
}
};
//-- 。
(function(){
innerTools.getImgFromDataSource(settings.dataSource,settings.dataSourceType,function(_tmp_img){
var __tmpImg=_tmp_img;
settings.onTmpImgGenerate(_tmp_img);
//-- 。
var _limitSizeInfo=innerTools.getResizeSizeFromImg(__tmpImg);
var _img_info={
w:$(__tmpImg)[0].naturalWidth,
h:$(__tmpImg)[0].naturalHeight
};
innerTools.drawToCanvas(__tmpImg,_limitSizeInfo.w,_limitSizeInfo.h,_img_info.w,_img_info.h,function(base64str,canvas){
settings.success(base64str,canvas);
});
});
})();
var returnObject={
};
return returnObject;
};
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}次に、圧縮プラグインを呼び出すコードを示します.
var formData = new FormData(),
oFile = $('#'+fileId)[0].files[0],
imgSize = oFile.size;
if(imgSize < 256 * 1024){
formData.append(fileId, oFile);
uploadPic(formData, picNum);
} else { //
var reader = new FileReader(),
maxWidth = 400,
maxHeight= 400,
suffix = oFile.name.substring(oFile.name.lastIndexOf('.') + 1);
if(imgSize > 2 * 1024 * 1024){
maxWidth = 800;
maxHeight= 800;
}
reader.onload = function(e) {
var base64Img= e.target.result;
//-- resize。
var _ir=ImageResizer({
resizeMode:"auto",
dataSource:base64Img,
dataSourceType:"base64",
maxWidth:maxWidth, //
maxHeight:maxHeight, // 。
onTmpImgGenerate:function(img){
},
success:function(resizeImgBase64,canvas){
var blob = dataURLtoBlob(resizeImgBase64);
formData.append(fileId, blob, oFile['name']);
uploadPic(formData, picNum);
}
});
};
reader.readAsDataURL(oFile);
} fileコントロールを使用する場合、accptプロパティは、ファイルをアップロードするときにファイルタイプをフィルタできます.たとえば、画像のみをアップロードできます.
php echo html::file('selectPic', "class='upload' accept='image/*'");?>転載先:https://www.cnblogs.com/hbujt/p/5551549.html