canvas绘画板的实现(兼容手机)
新项目有一个需求:客户需要在订单确认的时候签名。
第一反应就是用html的canvas实现,同事一起商量了下,canvas有三个制约:
- canvas必须要用鼠标,签名会很难看;
- 手机端web app怎么实现签名?
- 签名好的canvas怎么作为图片提交到服务器?
纠结了一天,研究了下canvas,终于有了点眉目。先看看实际效果
手机端的不好截图,下面有源码可以下载。下面是源码截图(懒到一定程度了,截图吧^_^),代码都有注释,我相信读者花点时间肯定能看明白。
下面是app.js源码(太长了,不能截图了。。~~~~(>_<)~~~~)
//动态设置canvas的大小
function resizeCanvas() {
$('#drawer').attr("width", $('.panel-body').width());
if(!$('.panel-body').height()){
$('#drawer').attr("height", $('.panel-body').height());
}else{
$('#drawer').attr("height", 300);
}
};
var canvas,board;
canvas = document.getElementById('drawer');
board = canvas.getContext('2d');
var mousePress = false;
var last = null;
//开始绘制
function beginDraw(){
mousePress = true;
}
//绘制
function drawing(event){
event.preventDefault();
if(!mousePress)return;
var xy = pos(event);
if(last!=null){
board.beginPath();
board.moveTo(last.x,last.y);
board.lineTo(xy.x,xy.y);
board.stroke();
}
last = xy;
}
//结束绘制
function endDraw(event){
mousePress = false;
event.preventDefault();
last = null;
}
//获取位置
function pos(event){
var x,y;
if(isTouch(event)){
x = event.touches[0].pageX-event.target.offsetLeft;
y = event.touches[0].pageY-event.target.offsetTop;
}else{
x = event.offsetX;
y = event.offsetY;
}
return {x:x,y:y};
}
//检测是touch还是mouse事件
function isTouch(event){
var type = event.type;
if(type.indexOf('touch')>=0){
return true;
}else{
return false;
}
}
//清除轨迹
function clearArea() {
board.setTransform(1, 0, 0, 1, 0, 0);
board.clearRect(0, 0, board.canvas.width, board.canvas.height);
}
//转换成图片显示
function convertCanvasToImage() {
var image = canvas.toDataURL("image/png");
$('#image').html("<img src='"+image+"' alt='from canvas'/>");
}
//生成图片并上传到服务器
function UploadPic() {
var Pic = canvas.toDataURL("image/png");
Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")
$.ajax({
type: 'POST',
url: 'url',
data: '{ "imageData" : "' + Pic + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
console.log("图片上传成功");
},
error: function(msg) {
alert("需要服务器资源");
}
});
}
board.lineWidth = 2;
board.strokeStyle="#000";
board.lineJoin = "round";
canvas.onmousedown = beginDraw;
canvas.onmousemove = drawing;
canvas.onmouseup = endDraw;
canvas.addEventListener('touchstart',beginDraw,false);
canvas.addEventListener('touchmove',drawing,false);
canvas.addEventListener('touchend',endDraw,false);
ok,结束,下班~~
源码地址:canvas.rar