一般的に、画像のアップロードを処理するとき、通常のロジックはソース画像をサーバー側にアップロードすることであり、サーバーサイド言語がスケーリングの操作を実行します。
このモードは通常、ほとんどのニーズを満たすことができますが、必要な画像が指定されたサイズのソース画像のサムネイルである場合、このモードを使用すると、サーバーのリソースと帯域幅を無駄にする方法になります。したがって、ブラウザで小さな画像を生成してからアップロードすることを検討します。
//以下はソースコードです
コードコピーは次のとおりです。
関数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エンコードの画像エンコードを取得し、バックエンドに転送してファイルに書き込みます。