html5 canvas 涂鸦画板
html5 canvas 的涂鸦画板，可以加载图片进行涂鸦，也可以下载
服务器使用的php
上传的图片不能超过1M，只能是jpg或者png 格式的
演示地址的服务器网速不怎么样，读取文件可能很慢，到达100%的时候点击读取文件，如果没显示就多点几次
1. [代码]主页面
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>涂鸦画板</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chooseColor"></div>
<div id="chooseSize"></div>
<div id="paint">
<canvas id="pad" width="800" height="600" />
</div>
<input type="button" id="download" value="下载" />
<!-- 上传图片 -->
<input type="file" name="mypic" id="chooseFile" />
<input type="button" value="读取文件" id="load" />
<!-- 进度条 -->
<div class="progress">
<span class="bar"></span><span class="percent">0%</span >
</div>
<!-- 隐藏区域 -->
<img id="tulip" src="" alt="加载显示区" />
</body>
<script type="text/javascript" src="index.js"></script>
</html>
2. [代码]页面的简单排版
body,input {
font-size: 9pt;
}
#paint,#chooseSize {
clear: both;
}
.option {
float: left;
width: 20px;
height: 20px;
border: 2px solid #cccccc;
margin-right: 4px;
margin-bottom: 4px;
}
.active {
border: 2px solid black;
}
.lw {
text-align: center;
vertical-align: middle;
}
img.output {
border: 1px solid green;
}
#pad {
border: 2px solid gray;
cursor: arrow;
}
#chooseFile {
float: left;
width: 140px;
}
#tulip {
display: none;
}
#download {
margin-left: 550px;
}
#load {
float: left;
width: 80px;
}
3. [代码]画图，上传，下载处理
$(document).ready(function() {
paint();
downloadPic();
loadImg();
uploadImg();
});
/**
* 绘画
*/
function paint() {
chooseColor();
chooseSize();
canvas();
}
/**
* 颜色选择器
*/
function chooseColor() {
var colors = "red;orange;yellow;green;blue;indigo;purple;black;white".split(';');
var sb = [];
$.each(colors,function(i,v){
sb.push("<div class='option' style='background-color:" + v + "'></div>");
});
$("#chooseColor").html(sb.join("\n"));
}
/**
* 大小选择器
*/
function chooseSize(){
sb = [];
for (var i = 1; i <= 9; i++) sb.push("<div class='option lw'>" + "<div style='margin-top:#px;margin-left:#px;width:%px;height:%px'></div></div>".replace(/%/g, i).replace(/#/g, 10 - i / 2));
$("#chooseSize").html(sb.join('\n'));
}
/**
* 画图
*/
function canvas(){
var $clrs = $("#chooseColor .option");
var $lws = $("#chooseSize .option");
$clrs.click(function(){
$clrs.removeClass("active");
$(this).addClass("active");
p_color = this.style.backgroundColor;
$lws.children("div").css("background-color",p_color);
}).first().click();
//点选线条粗细选项时切换焦点并取得宽度存入p_width
$lws.click(function(){
$lws.removeClass("active");
$(this).addClass("active");
p_width = $(this).children("div").css("width").replace("px","");
}).eq(3).click();
// 取得canvas context
var $canvas = $("#pad");
var ctx = $canvas[0].getContext("2d");
ctx.lineCap = "round";
ctx.fillStyle = "white"; //整个canvas涂上白色的背景，避免PNG的透明底色效果
ctx.fillRect(0,0,$canvas.width(),$canvas.height());
var drawMode = false;
// canvas点选，移动，放开按键时进行绘图动作
$canvas.mousedown(function(e){
ctx.beginPath();
ctx.strokeStyle = p_color;
ctx.lineWidth = p_width;
ctx.moveTo(e.pageX - $canvas.position().left, e.pageY - $canvas.position().top);
drawMode = true;
}).mousemove(function(e){
if(drawMode){
ctx.lineTo(e.pageX - $canvas.position().left, e.pageY - $canvas.position().top);
ctx.stroke();
}
}).mouseup(function(e){
drawMode = false;
});
}
/**
* 下载当前所绘制的图像
*/
function downloadPic(){
// 使用toDataURL()将图转换成png文件
var saveFile = function(data, filename) {
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);婚纱摄影
};http://www.huiyi8.com/hunsha/
$("#download").click(function() {
var myCanvas = document.getElementById("pad");
var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
// window.location.href=image;
var filename = 'paint_' + (new Date()).getTime() + '.png';
saveFile(image, filename);
});
}
//获取当前文件名
function ch_(url){
url=url.split("\\");//这里要将 \ 转义一下
var filename = url[url.length-1];
return filename;
}
//加载隐藏模块中的图片
function loadImg(){
$('#load').click(function(){
// 加载到canvas
var c= document.getElementById("pad");
var ctx = c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,0,0);
});
}
/**
* 上传图片
*/
function uploadImg(){
var bar = $('.bar');
var percent = $('.percent');
var showimg = $('#showimg');
var progress = $(".progress");
$("#chooseFile").wrap("<form id='myupload' action='upload.php' method='post' enctype='multipart/form-data'></form>");
$("#chooseFile").change(function(){
$("#myupload").ajaxSubmit({
dataType: 'json',
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal);
percent.html(percentVal);
},
success: function(data){
// alert('上传成功');
var file = $('#chooseFile').val();
var filename = ch_(file);
var src = 'paint/' + filename;
$('#tulip').attr('src',src);
},
error: function(xhr){
alert('上传失败');
}
});
});
}
4. [代码]服务器上传处理
<?php
$picname = $_FILES ['mypic'] ['name'];
$picsize = $_FILES ['mypic'] ['size'];
if ($picname != '') {
if ($picsize > 1024000) {
echo '图片的大小不能超过1M';
exit ();
}
$type = strstr ( $picname, '.' );
if ($type != '.jpg' && $type != '.png') {
echo '图片格式不对';
exit ();
}
$pics = $picname;
// 上传路径
$pic_path = 'paint/' . $pics;
move_uploaded_file ( $_FILES ['mypic'] ['tmp_name'], $pic_path );
}
$size = round ( $picsize / 1024, 2 );
$arr = array (
'name' => $picname,
'pic' => $pics,
'size' => $size
);
echo json_encode ( $arr );
?>
html5 canvas 涂鸦画板的更多相关文章
- 一款基于HTML5 Canvas的画板涂鸦动画
今天给各网友分享一款基于HTML5 Canvas的画板涂鸦动画.记得之前我们分享过一款HTML5 Canvas画板工具,可以切换不同的笔刷,功能十分强大.本文今天要再来分享一款基于HTML5 Canv ...
- HTML5 canvas自制画板
找到一个画板的插件,很好用,点击下载 ,页面很简单,但是呢,貌似不适用于手机端,,,
- 8个经典炫酷的HTML5 Canvas动画欣赏
HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...
- 基于HTML5 Canvas的网页画板实现教程
HTML5的功能非常强大,尤其是Canvas的应用更加广泛,Canvas画布上面不仅可以绘制任意的图形,而且可以实现多种多样的动画,甚至是一些交互式的应用,比如网页网版.这次我们要来看的就是一款基于H ...
- html5 canvas 画板
<!doctype html> <head> <meta http-equiv="Content-Type" content="text/h ...
- Atitit html5 Canvas 如何自适应屏幕大小
Atitit html5 Canvas 如何自适应屏幕大小 可以用JS监控屏幕大小,然后调整Canvas的大小.在代码中加入JS 1 2 3 4 5 6 7 $(window).resize ...
- HTML5 canvas 在线画笔绘图工具（三）
组装画板(TDrawBuilder) 在这一小节中我们要把工具条和画板组装起来,让他们可以协同进行工作. 画板通过一个命名为TDrawBuilder来进行组装.在详细讲解TDrawBuilder对象之 ...
- HTML5实现涂鸦板
原文:HTML5实现涂鸦板 最近闲的,看了看html5,强大的绘图功能让我惊奇,于是,写了个小玩意---涂鸦板,能实现功能有:画画,改色,调整画笔大小 html5的绘图可以分为点,线,面,圆,图片等, ...
- HTML5 canvas画图
HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript).不过,<canvas> 元素本身并没有绘制能力(它仅仅是 ...
随机推荐
- 快速掌握分布式搜索引擎ElasticSearch（一）
前言 由于最近在项目中接触使用到了ElasticSearch,从本篇博客开始将给大家分享这款风靡全球的产品.将涉及到ElasticSearch的安装.基础概念.基本用法.高级查询.中文分词器.与Spr ...
- SpringBoot中如何上传Upload
[学习笔记] 5.上传:马克-to-win@马克java社区:根据第3部分的helloworld例子,用那个项目做底子.pom.xml都不用改变.参考项目bootUpload1.static/inde ...
- Java创建和解析Json数据方法（二）——org.json包的使用
(二)org.json包的使用 1.简介 工具包org.json.jar,是一个轻量级的,JAVA下的json构造和解析工具包,它还包含JSON与XML, HTTP headers, Cookie ...
- Eclipse工程中Java Build Path中的JDK版本和Java Compiler Compiler compliance level的区别（转）
在这里记录一下在eclipse中比较容易搞混淆和设置错误的地方.如下图所示的功能: 最精准的解释如下: Build Path是运行时环境 Compiler是编译时环境 假设,你的代码用到泛型,Bu ...
- 分布式缓存之Memcache
〇.为什么要用分布式缓存 1.软件从单机到分布式 走向分布式第一步就是解决:多台机器共享登录信息的问题. 例如:现在有三台机器组成了一个Web的应用集群,其中一台机器用户登录,然后其他另外两台机器共享 ...
- iOS -- 开源项目和库
TimLiu-iOS 目录 UI 下拉刷新 模糊效果 AutoLayout 富文本 图表 表相关与Tabbar 隐藏与显示 HUD与Toast 对话框 其他UI 动画 侧滑与右滑返回手势 gif动画 ...
- 用C++设计一个不能被继承的类（转）
在Java 中定义了关键字final,被final修饰的类不能被继承. 首先想到的是在C++中,子类的构造函数会自动调用父类的构造函数.同样,子类的析构函数也会自动调用父类的析构函数.要想一个类不能被 ...
- Solaris 下解决上网问题以及远程登录问题
解决乱码问题 参考文章 http://www.jb51.net/os/Solaris/1656.html solaris 显示乱码的解决方法 现象: 利用命令 : LANG=zh; export LA ...
- ubuntu环境准备
一. 桌面方面看起来比较不爽,12的版本用起更不习惯,决定改成命令行登陆 a. vi /ect/default/grub 文件 b. 修改成第二个红框的情况 c. 执行update-grub命令 d ...
- python（5）- 简单练习：python三级菜单优化
python三级菜单优化,菜鸟版链接:http://www.cnblogs.com/xuyaping/p/6648170.html menu = { '北京':{ '海淀':{ '五道口':{ 'so ...