zoukankan      html  css  js  c++  java
  • 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;
        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;
        140px;
    }
     
    #tulip {
        display: none;
    }
     
    #download {
        margin-left: 550px;
    }
     
    #load {
        float: left;
        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(" "));
    }
     
    /**
     * 大小选择器
     */
    function chooseSize(){
        sb = [];
        for (var i = 1; i <= 9; i++) sb.push("<div class='option lw'>" + "<div style='margin-top:#px;margin-left:#px;%px;height:%px'></div></div>".replace(/%/g, i).replace(/#/g, 10 - i / 2));
        $("#chooseSize").html(sb.join(' '));
    }
     
    /**
     * 画图
     */
    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 );
    ?>

  • 相关阅读:
    Eclipse卡顿,内存猛增解决方案
    Oracle 客户端安装配置
    asp.net OnInit、OnLoad、Page_Load、Page_Init父子页面执行顺序探究
    网页下载文件实现方式及技巧
    winform中利用反射实现泛型数据访问对象基类(3)
    winform之自定义控件
    winform中利用反射实现泛型数据访问对象基类(2)
    Winform自定义分页控件的实现
    Combox控件初始化项的技巧
    winform中利用反射实现泛型数据访问对象基类(1)
  • 原文地址:https://www.cnblogs.com/xkzy/p/3935405.html
Copyright © 2011-2022 走看看