4.5.1_利用getImageData()与putImageData()方法来实现橡皮筋式选取框

最新推荐文章于 2021-07-22 12:16:57 发布

信封中的阳光

最新推荐文章于 2021-07-22 12:16:57 发布

阅读量1.1k

点赞数

分类专栏： HTML5_CANVAS练习案例

本文链接：https://blog.csdn.net/jun_sun_shine/article/details/71722494

版权

HTML5_CANVAS练习案例专栏收录该内容

81 篇文章 1 订阅

订阅专栏

4.5.1_利用getImageData()与putImageData()方法来实现橡皮筋式选取框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>利用getImageData()与putImageData()方法来实现橡皮筋式选取框</title>
        <style>
            body{
                background: #eee;
            }
            #canvas{
                background: #fff;
                cursor: pointer;
                margin-left: 20px;
                margin-top: 50px;
                box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
                -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
                -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
            }
            #controls{
                position: absolute;
                top: 20px;
                left: 50px;
            }
        </style>
    </head>
    <body>
        <div id="controls"><input type="button" id="resetBtn" value="重置" /></div>
        <canvas id="canvas" width="800" height="520"></canvas>
    </body>
    <script>
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var resetBtn = document.getElementById('resetBtn');

        var image = new Image();
        var imageData;
        var mousedown ={};
        var rubberbandRectangle = {};
        var dragging = false;

        //初始化
        context.strokeStyle = 'navy';
        context.lineWidth = 10;

        image.src = 'img/waterfall.jpg';
        image.onload = function(){
            context.drawImage(image,0,0,canvas.width,canvas.height);
        }

        //事件控制器
        resetBtn.onclick = function (){
            context.drawImage(image,0,0,canvas.width,canvas.height);
        }
        canvas.onmousedown = function(e){
            var loc = windowToCanvas(e.clientX,e.clientY);
            e.preventDefault();
            rubberbandStar(loc.x,loc.y);
        }
        canvas.onmousemove = function (e){
            var loc;
            if(dragging){
                loc = windowToCanvas(e.clientX,e.clientY);
                rubberbandStretch(loc.x,loc.y);
            }
        }
        canvas.onmouseup = function(){
            rubberbandEnd();
        }
        //开始
        function rubberbandStar(x,y){
            mousedown.x = x;
            mousedown.y = y;

            dragging = true;
        }
        function rubberbandStretch(x,y){
            //会覆盖上一次的边框
            if(rubberbandRectangle.width>2*context.lineWidth&&rubberbandRectangle.height>2*context.lineWidth){
                if(imageData!== undefined){
                    restoreRubberbandPixels();
                }
            }
            setRubberbandRecting(x,y);
            if(rubberbandRectangle.width>2*context.lineWidth&&rubberbandRectangle.height>2*context.lineWidth){
                updateRubberband();
            }
        }
        function restoreRubberbandPixels(){
            context.putImageData(imageData,rubberbandRectangle.left,rubberbandRectangle.top)
        }
        function updateRubberband(){
            captureRubberbandPixels();
            drawRubberband();
        }
        //获取选中区域像素
        function captureRubberbandPixels(){
            imageData = context.getImageData(rubberbandRectangle.left,rubberbandRectangle.top,rubberbandRectangle.width,rubberbandRectangle.height);
        }
        //绘制矩形
        function drawRubberband(){
            //绘制的边框比鼠标拉出来的小一个线宽
            context.strokeRect(rubberbandRectangle.left +context.lineWidth,rubberbandRectangle.top+context.lineWidth,
                               rubberbandRectangle.width - 2*context.lineWidth,rubberbandRectangle.height-2*context.lineWidth);
        }
        //设置矩形
        function setRubberbandRecting(x,y){
            rubberbandRectangle.left = Math.min(x,mousedown.x);
            rubberbandRectangle.top = Math.min(y,mousedown.y);
            rubberbandRectangle.width = Math.abs(x - mousedown.x);
            rubberbandRectangle.height = Math.abs(y - mousedown.y);
        }
        function rubberbandEnd(){
            context.drawImage(canvas,rubberbandRectangle.left+context.lineWidth*2,
                                rubberbandRectangle.top+context.lineWidth*2,
                                rubberbandRectangle.width - 4*context.lineWidth,
                                rubberbandRectangle.height - 4*context.lineWidth,0,0,canvas.width,canvas.height);
            dragging = false;
            imageData = undefined;
        }
        //转换坐标
        function windowToCanvas(x,y){
            var bbox = canvas.getBoundingClientRect();
            return {
                x:x-bbox.left*(canvas.width/bbox.width),
                y:y-bbox.top*(canvas.height/bbox.height)
            };
        }
    </script>
</html>

信封中的阳光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4.5.1_利用getImageData()与putImageData()方法来实现橡皮筋式选取框

4.5.1_利用getImageData()与putImageData()方法来实现橡皮筋式选取框<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>利用getImageData()与putImageData()方法来实现橡皮筋式选取框</title> <style>
复制链接

扫一扫