我们实现了使用html5 canvas来制作涂鸦画板的效果，在这个教程中，我们将讲解如何将画好的图片上传到服务器上。
最后的效果如下图，当点击“开始画图”按钮，将在canvas画布中绘制渐变的背景色和一些文本，当点击“上传到服务器”按钮时，js脚本将从canvas中提取图片的数据，然后将图片数据上传到指定的服务器上。
HTML结构
我们需要在html页面上创建3个元素：
一个canvas元素，用于绘制图片，实际绘图在js文件中完成。
一个用于触发绘图操作的按钮。
一个用于上传在canvas中绘制好的图片的按钮。
<form id="form1" runat="server"> <div align="center" class="i-canvas"> <canvas id="myCanvas" width="500" height="300"></canvas> <ul> <li><button onclick="javascript:DrawPic();return false;">开始画图</button></li> <li><button onclick="javascript:UploadPic();return false;">上传到服务器</button></li> </ul> </div></form> |
JAVASCRIPT
在js代码中要完成两项工作：在canvas画布中绘制图像和使用ajax来上传图片。我们写两个函数来分别完成这两项工作。一个hisDrawPic()函数，用于绘图。一个是UploadPic()函数，用于上传图片。
function DrawPic() { // Get the canvas element and its 2d context var Cnv = document.getElementById('myCanvas'); var Cntx = Cnv.getContext('2d'); // Create gradient
|