Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

咱也来做个网页涂鸦板(HTML5)

  这个是运行的效果图

  代码很简单,我就不做太多说明,直接都写在注释里了 <!DOCTYPE html>
<style>
body {-webkit-user-select:none;}
#canvas {border:1px solid #CCC;}
#upload {display:block;}
</style>
<canvas id="canvas"></canvas>
<input type="button" id="upload" value="上传" />
<script>
var canvas,g,w,h,px,py,o,state;
//获取canvas
canvas=document.getElementById("canvas");
//定义canvas大小
w=canvas.width=400,h=canvas.height=300;
//获取canvas相对位置
px=canvas.offsetLeft,py=canvas.offsetTop;
//获取2d绘图对象
g=canvas.getContext("2d");
//定义线条宽度
g.lineWidth=6;
//设置线条接头处为圆滑的
g.lineCap=g.lineJoin="round";
//鼠标按下
document.onmousedown=function(e){
  if(e.button)return;//非鼠标左键直接跳出
  state=true;//左键状态标识为按下
  g.beginPath();//创建绘图路径
  //移动绘图位置到当前鼠标位置
  g.moveTo(e.clientX-px,e.clientY-py);
};
//鼠标放开
document.onmouseup=function(e){
  if(e.button)return;//非鼠标左键直接跳出
  state=false;//左键状态标识为松开
  g.closePath();//关闭绘图路径
};
//鼠标在canvas上移动
canvas.onmousemove=function(e){
  //如果鼠标左键不是处于按下状态就直接跳出
  if(!state)return
  //从上一个位置到当前位置绘制线条路径
  g.lineTo(e.clientX-px,e.clientY-py);
  g.stroke();//渲染路径
};
//上传按钮点击
document.getElementById("upload").onclick=function(){
  //Ajax提交数据
  var xhr=new XMLHttpRequest;
  xhr.open("POST","upload.php",true);
  xhr.onreadystatechange=function(){
    if(xhr.readyState!=4)return;
    //服务器返回的是这个图片在服务器上的URL
    //这里直接新页面打开它
    open(xhr.responseText);
  };
  //从canvas中获取DataURL并发送
  xhr.send(canvas.toDataURL());
};
</script>
  这个代码只是实现的最基础的涂鸦功能。如果还需要颜色颜色等一系列功能可以自己扩展,我就不全部做出来了。下面是服务器端的程序 //upload.php
//获取post过来的数据部分
$dat=file_get_contents('php://input');
//去除DataURL的头部分
$dat=substr($dat,strpos($dat,',')+1);
//把BASE64还原成二进制流
$dat=base64_decode($dat);
//计算MD5作为文件名
$url='upload/'.md5($dat).'.png';
//保存到文件
file_put_contents($url,$dat);
//返回文件的URL
echo $url;
  其实DataURL就是一个BASE64编码过的字符串,具体可以看看这篇文章“BASE64和CSS中使用BASE64图片”,只是这个字符串前面有加了几个字节的头,我们需要在服务器程序中找到这个头把它去掉,然后只要把内容部分还原成图片数据就可以了。这个程序只是个例子,没有在安全性方面做任何过滤。所以如果直接使用则会被利用来上传其他非图片文件。因此在正式场合,file_put_contents的步骤应该替换为imagecreatefromstring之类的,并对这个图片做一些判断之后再储存。
  下面是这个例子的下载地址:
  咱也来做个网页涂鸦板(HTML5).rar
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^