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码

巴特西

html 涂改图片功能实现

最新文章

热门文章