js はサムネイルを生成してアップロードし、canvas_javascript スキルを使用して再描画します

一般に、画像のアップロードを処理するときの通常のロジックは、ソース画像をサーバーにアップロードし、サーバー側の言語を使用してスケーリング操作を実行することです。

このモードは通常、ほとんどのニーズを満たすことができますが、必要な画像が指定されたサイズを満たすソース画像のサムネイルのみである場合、このモードを使用するとサーバーのリソースと帯域幅が無駄になります。そのため、アップロードする前にブラウザ側で小さな画像を生成することを検討します。

//以下はソースコードです

コードをコピーします コードは次のとおりです:

functiondrawCanvasImage(obj,width, callback){

var $canvas = $(''),
canvas = $canvas[0 ],
context = Canvas.getContext('2d');

var img = new Image();

img.onload = function(){
if(width ){
if (width > img.width){
var target_w = img.width;
}else{
var target_w = width; 🎜>var target_h = parseInt (target_w/img.width*img.height);
}
}else{
var target_w = img.width;
>}
$ Canvas[0].width = target_w;
$canvas[0].height = target_h;

context.drawImage(img,0,0,target_w,target_h); 🎜>
_canvas = Canvas.toDataURL();
/*console.log(_canvas);*/
callback(obj,_canvas);
img.src = getFullPath( obj);

}

function getFullPath(obj)
{
if(obj)
{
//ie
if (window.navigator) .userAgent.indexOf(" MSIE")>=1)
{
obj.select();
return document.selection.createRange().text;
// firefox
else if (window.navigator.userAgent.indexOf("Firefox")>=1 || $.browser.opera || $.browser.mozilla)
{
if(obj.files && window.URL.createObjectURL )
{
return window.URL.createObjectURL(obj.files[0])
}
return
}else if($. browser.safari){
if(window.webkitURL.createObjectURL && obj.files){
return window.webkitURL.createObjectURL(obj.files[0]);
return obj.value ;
}
return obj.value;
}
}


関数 getFullPath は、選択された画像のアドレスを取得します。

_canvas は、base64 でエンコードされた画像エンコードを取得します。これはバックエンドに転送してファイルに書き込むことができます。