一般来说，当图片上传时，通常的逻辑是将源图片上传到服务器端，然后服务器端语言来缩放操作的大小。

这种模式可以满足大多数人的需要，但是当我们需要图片时只符合源图片缩略图大小的规定，那么使用这个模型，就会浪费资源和服务器带宽，所以我们考虑把学生放到小浏览器里然后上传。

下面是源代码。
复制代码代码如下所示：
功能drawcanvasimage（obj，宽度，回调）{

var = $（），
画布=画布{ 0 }，
背景canvas.getcontext（二维的）；

VaR img =新的图像（）；

img.onload =函数（）{
如果（宽度）{
如果（宽度＞IMG。宽度）{
无功target_w = img.width；
无功target_h = img.height；
其他{ }
无功target_w =宽度；
无功target_h = parseInt（target_w / IMG。宽* IMG。高度）；
}
其他{ }
无功target_w = img.width；
无功target_h = img.height；
}
为画布宽度= target_w { 0 }；
$帆布{ 0 }。高度= 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）
{
如果（obj）
{

如果（window.navigator.useragent.indexof（MSIE）> = 1）
{
obj.select（）；
返回document.selection.createrange（文本）；
}
Firefox
如果（window.navigator.useragent.indexof（火狐）> = 1美元。browser.opera美元。browser.mozilla | | | |）
{
如果（obj.files窗口。URL。createobjecturl）
{
返回window.url.createobjecturl（obj文件{ 0 }）；
}
返回obj.value；
否则如果（$ Safari浏览器）{
如果（window.webkiturl.createobjecturl obj文件）{
返回window.webkiturl.createobjecturl（obj文件{ 0 }）；
}
返回obj.value；
}
返回obj.value；
}
}

The function getFullPath is the address of the selected picture.

_canvas获取图像编码为base64，发送到后端写入文件。