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 涂鸦画板的更多相关文章

  1. 一款基于HTML5 Canvas的画板涂鸦动画

    今天给各网友分享一款基于HTML5 Canvas的画板涂鸦动画.记得之前我们分享过一款HTML5 Canvas画板工具,可以切换不同的笔刷,功能十分强大.本文今天要再来分享一款基于HTML5 Canv ...

  2. HTML5 canvas自制画板

    找到一个画板的插件,很好用,点击下载  ,页面很简单,但是呢,貌似不适用于手机端,,,

  3. 8个经典炫酷的HTML5 Canvas动画欣赏

    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...

  4. 基于HTML5 Canvas的网页画板实现教程

    HTML5的功能非常强大,尤其是Canvas的应用更加广泛,Canvas画布上面不仅可以绘制任意的图形,而且可以实现多种多样的动画,甚至是一些交互式的应用,比如网页网版.这次我们要来看的就是一款基于H ...

  5. html5 canvas 画板

    <!doctype html> <head> <meta http-equiv="Content-Type" content="text/h ...

  6. Atitit html5 Canvas 如何自适应屏幕大小

    Atitit  html5 Canvas 如何自适应屏幕大小     可以用JS监控屏幕大小,然后调整Canvas的大小.在代码中加入JS 1 2 3 4 5 6 7 $(window).resize ...

  7. HTML5 canvas 在线画笔绘图工具（三）

    组装画板(TDrawBuilder) 在这一小节中我们要把工具条和画板组装起来,让他们可以协同进行工作. 画板通过一个命名为TDrawBuilder来进行组装.在详细讲解TDrawBuilder对象之 ...

  8. HTML5实现涂鸦板

    原文:HTML5实现涂鸦板 最近闲的,看了看html5,强大的绘图功能让我惊奇,于是,写了个小玩意---涂鸦板,能实现功能有:画画,改色,调整画笔大小 html5的绘图可以分为点,线,面,圆,图片等, ...

  9. HTML5 canvas画图

    HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript).不过,<canvas> 元素本身并没有绘制能力(它仅仅是 ...

随机推荐

  1. 【UTR #2】题目排列顺序

    题目描述 "又要出题了." 宇宙出题中心主任 -- 吉米多出题斯基,坐在办公桌前策划即将到来的 UOI. 这场比赛有 $n$ 道题,吉米多出题斯基需要决定这些题目的难度,然后再在汪 ...

  2. Oracle PL/SQL 存储过程、函数、包 的范例

    1,写函数和过程,输入三角形三个表的长度.在控制台打印三角形的面积 -- 创建包 create or replace package pac_area is -- 定义计算三角形面积的过程 proce ...

  3. Maven配置tomcat和jetty插件来运行项目

    针对eclipse中的Run on Server有些情况下并不是那么好操作,比如配置maven下的springmvc插件,如果使用此方法运行会很容易出现组件缺少导致错误出现一大堆的问题. 那么针对这种 ...

  4. 黑科技：CSS定制多行省略

    转载请注明出处:http://hai.li/2017/03/08/css-multiline-overflow-ellipsis.html 什么是多行省略? 当字数多到一定程度就显示省略号点点点.最初 ...

  5. Maven自动部署war到Tomcat8

    原文:http://www.cnblogs.com/yucongblog/p/5392932.html 我使用的环境是:Eclipse Java EE IDE for Web Developers(V ...

  6. 邁向IT專家成功之路的三十則鐵律 鐵律二十九 IT人富足之道-信仰

    天地自然的循環法則,讓每一個人都必須經歷生.老.病.死.喜.怒.哀.樂,然而至始至終無盡的煩惱總是遠多於快樂,因此筆者深信每一個人在一生當中,都必須要有適合自己的正確信仰,他可以在你無法以物質力量來解 ...

  7. OpenCV学习教程入门篇&lt;一、介绍&gt;

    OpenCV,是Inter公司开发的免费开源专门因为图像处理和机器视觉的C/C++库,英文全称是Open Source Computer Vision. 1. 可视化语言Matlab与OpenCV都能 ...

  8. 改变其他iframe的src

    window.parent.$("#ifr").location="????";);来改变

  9. 使用Golang利用ectd实现一个分布式锁

    http://blog.codeg.cn/post/blog/2016-02-24-distrubute-lock-over-etcd/ By zieckey · 2016年02月24日 · 1205 ...

  10. python 调用函数时使用星号 *, **

    python 调用函数时使用星号 *, ** 调用函数时使用星号 * 或 ** test(*args):* 的作用其实就是把序列 args 中的每个元素,当作位置参数传进去.如果 args 等于 (1 ...