一般的に、画像のアップロードを処理するとき、通常のロジックはソース画像をサーバー側にアップロードすることであり、サーバーサイド言語がスケーリングの操作を実行します。
このモードは通常、ほとんどのニーズを満たすことができますが、必要な画像が指定されたサイズのソース画像のサムネイルである場合、このモードを使用すると、サーバーのリソースと帯域幅を無駄にする方法になります。したがって、ブラウザで小さな画像を生成してからアップロードすることを検討します。
//以下はソースコードです
コードコピーは次のとおりです。
関数DrawCanvaSimage(OBJ、幅、コールバック){
var $ canvas = $( '<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;
var target_h = img.height;
}それ以外{
var target_w = width;
var target_h = parseint(target_w/img.width*img.height);
}
}それ以外{
var target_w = img.width;
var target_h = img.height;
}
$ 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) ;*/
コールバック(obj、_canvas);
}
img.src = getfullpath(obj);
}
関数getfullpath(obj)
{
if(obj)
{
// IE
if(window.navigator.useragent.indexof( "msie")> = 1)
{
obj.select();
document.selection.createrange()。テキストを返します。
}
// firefox
else if(window.navigator.useragent.indexof( "firefox")> = 1 || $ .BROWSER.OPERA || $ .BROWSER.MOZILLA)
{
if(obj.files && window.url.createobjecturl)
{
window.url.createobjecturlを返します(obj.files [0]);
}
obj.valueを返します。
} else if($。browser.safari){
if(window.webkiturl.createobjecturl && obj.files){
window.webkiturl.createobjecturl(obj.files [0]);
}
obj.valueを返します。
}
obj.valueを返します。
}
}
関数getfullpathは、選択した画像のアドレスを取得することです。
_Canvasは、base64エンコードの画像エンコードを取得し、バックエンドに転送してファイルに書き込みます。