PHP试题网_中国最大的免费网络PHP试题测试平台,PHP试卷调查,PHP试卷模板、PHP考试测验
公告: PHP试题网于2022.06.21变更为少儿编程学院

我们实现了使用html5 canvas来制作涂鸦画板的效果,在这个教程中,我们将讲解如何将画好的图片上传到服务器上。

最后的效果如下图,当点击“开始画图”按钮,将在canvas画布中绘制渐变的背景色和一些文本,当点击“上传到服务器”按钮时,js脚本将从canvas中提取图片的数据,然后将图片数据上传到指定的服务器上。

html5 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

作者:OK兄 浏览次数:157