html 涂改图片功能实现

网页源码直接贴了：

     

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文档标题</title>
        <style type="text/css">
            .aaa {
                cursor: url("http://192.168.12.144:8080/drawimg/icon/erase111111111111.ico"),auto;
            }
        </style>
        <script src="js/jquery-1.8.3.min.js" ></script>
        <script src="js/html2canvas.min.js" ></script>
        <script src="js/printScreen.js" ></script>
        
        <script text="javascript">
            var s;
            $(function(){
                s = new PrintScreen(document.getElementById('myCanvas'));
            });
            
            function imageData(str)
            {
                var img = new Image();
                img.src=str;
                $('#ddd').append(img);
            }
        </script>
    </head>
    <body>
        <div align="center" id="ddd" >
            <canvas id="myCanvas" class="aaa" width="1000" height="650" style="border:2px solid #6699cc;background-image: url('http://192.168.12.144:8080/drawimg/movie.png');background-repeat:no-repeat;"></canvas>
            <div class="control-ops">
            <button type="button" class="btn btn-primary" onclick="javascript:clearArea();return false;">清空画板</button>
            <button type="button" class="btn btn-primary" onclick="javascript:s.setEdit();">笔</button>
            <button type="button" class="btn btn-primary" onclick="javascript:s.setErase();">橡皮</button>
            <button type="button" class="btn btn-primary" onclick="javascript:s.getImage(imageData);">复制</button>
            Line width : 
            <select id="selWidth">
                <option value="1">1</option>
                <option value="3">3</option>
                <option value="5">5</option>
                <option value="7">7</option>
                <option value="9" selected="selected">9</option>
                <option value="11">11</option>
            </select>
            Color : 
            <select id="selColor">
                <option value="black">black</option>
                <option value="blue" selected="selected">blue</option>
                <option value="red">red</option>
                <option value="green">green</option>
                <option value="yellow">yellow</option>
                <option value="gray">gray</option>
            </select>
            </div>
        </div> 
    </body>
</html>
printScreen.js 源码：
function PrintScreen(canvas)
{
    this.mousePressed = false;
    var lastX, lastY;
    var ctx;
    var isEdit = false;
    var isErase = false;
    
    this.InitThis = function(){
        ctx = canvas.getContext("2d");
        canvas.onmousedown = function (e) {
            this.mousePressed = true;
            console.log('down>>'+this.mousePressed);
            if (isEdit)
                Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
            
            if (isErase)
                Clear(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top);
        }
        
        canvas.onmousemove= function (e) {
            console.log('over>>'+this.mousePressed+',edit='+isEdit);
            if (this.mousePressed) {
                
                if (isEdit)
                    Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
                
                if (isErase)
                    Clear(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top);
            }
        }
        
        canvas.onmouseup = function (e) {
            this.mousePressed = false;
        }
        
        canvas.onmouseleave = function (e) {
            this.mousePressed = false;
        }
    }
    
    function Draw(x, y, isDown) {
        if (isDown) {
            ctx.beginPath();
            ctx.strokeStyle = $('#selColor').val();
            ctx.lineWidth = $('#selWidth').val();
            ctx.lineJoin = "round";
            ctx.moveTo(lastX, lastY);
            ctx.lineTo(x, y);
            ctx.closePath();
            ctx.stroke();
        }
        lastX = x; lastY = y;
    }
    
    function Clear(x, y)
    {
        ctx.clearRect(x-8, y-8, 16, 16);
    }
    
    function clearArea() {
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    }
    
    this.setEdit = function()
    {
        console.log('edit>>');
        isErase=false;isEdit=true;
    }
    
    this.setErase = function()
    {
        isEdit = false;
        isErase = true;
    }
    
    // 从 canvas 提取图片 image 
    function convertCanvasToImage(canv) { 
        //新Image对象，可以理解为DOM 
        var image = new Image(); 
        // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持 
        // 指定格式 PNG 
        image.src = canv.toDataURL("image/png"); 
        return image; 
    }
    
    this.getImage = function(callBack)
    {
         html2canvas(canvas, {
                onrendered: function(canv) {
                    callBack(canv.toDataURL("image/png"));
                }
            });
    }
    this.InitThis();
}
html2canvas(canvas, {
                onrendered: function(canv) {
                    callBack(canv.toDataURL("image/png"));
                }
            }); 
这段代码是 基于 html2canvas 库的截图功能  canv 是截图之后返回的canvas对象，
canv.toDataURL("image/png") 方法返回 涂改过后 图片的base64码
posted @ 2016-10-28 14:18  MvloveYouForever  阅读(711)  评论(3)  编辑  收藏  举报