canvas-图像截取

来源：互联网发布：红包软件代理加盟编辑：程序博客网时间：2024/05/22 14:01
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>canvas-图像截取</title>    <style>        canvas{            border: 1px dashed red;            float: left;            position: relative;        }    </style>    </head><body>    <div id="cantox" style="position: relative">        <canvas id="oldcanvas" width="500px" height="300px">        </canvas>        <div id="cliptox" style="position: absolute;display:none"></div>    </div>    <button id ="btnclip" style="float: left">截取该区域</button>    <canvas id="nowcanvas" width="500px" height="300px" >    </canvas>    <script>        //获取div元素        var cantox = document.getElementById("cantox");        var cliptox = document.getElementById("cliptox");        var btnclip = document.getElementById("btnclip");        //获取到canvas元素        var oldcanvas = document.getElementById("oldcanvas");        var nowcanvas = document.getElementById("nowcanvas");        //获取canvas中的画图环境        var oldcontext = oldcanvas.getContext('2d');        var nowcontext = nowcanvas.getContext('2d');        var img = new Image();        img.src = "./image/liuyifei.jpg";        //加载图像到canvas画布中        window.onload = function (){            oldcontext.drawImage(img,0,0,oldcanvas.width,oldcanvas.height);        }        var startPoint;//截取图像开始坐标        var endPoint;//截图图像的结束坐标        var w; //截取图像的宽度        var h; //截取图像的高度        var flag = false; //用于判断移动事件事物控制        //鼠标按下事件        cantox.onmousedown = function (e){            flag = true;            cliptox.style.display = 'block';            startPoint = windowToCanvas(oldcanvas, e.clientX, e.clientY);            cliptox.style.left = startPoint.x+'px';            cliptox.style.top = startPoint.y+'px';        }        //鼠标移动事件        cantox.onmousemove = function (e){            if(flag){                cliptox.style.background = 'rgba(0,0,0,0.5)';                endPoint = windowToCanvas(oldcanvas, e.clientX, e.clientY);                w = endPoint.x - startPoint.x;                h = endPoint.y - startPoint.y;                cliptox.style.width = w +'px';                cliptox.style.height = h+'px';            }        }        //鼠标释放事件        cantox.onmouseup = function (e){            flag = false;        }        //按钮截取事件        btnclip.onclick = function (){            imgCut(nowcontext,img,oldcanvas.width,oldcanvas.height,startPoint.x,startPoint.y,w,h);        }        /*        * 图像截取函数        * context:绘制环境对象        * image：图像对象        * imgElementW：图像显示的宽度        * imgElementH：图像显示的高度        * sx:截取图像的开始X坐标        * sy:截取图像的开始Y坐标        * w:截取图像的宽度        * h:截取图像的高度        * */        function imgCut(context,image,imgElementW,imgElementH,sx,sy,w,h){            //清理画布，便于重新绘制            context.clearRect(0,0,imgElementW,imgElementH);            //计算 ：比例 = 原图像/显示图像            var ratioW = image.width/imgElementW;            var ratioH = image.height/imgElementH;            //根据截取图像的所占位置及大小计算出在原图所占的位置及大小            //.drawImage(图像对象,原图像截取的起始X坐标,原图像截取的起始Y坐标,原图像截取的宽度,原图像截取的高度，            // 绘制图像的起始X坐标,绘制图像的起始Y坐标,绘制图像所需要的宽度,绘制图像所需要的高度);            context.drawImage(image,ratioW*sx,ratioH*sy,ratioW*w,ratioH*h,0,0,w,h);        }        /*         * 坐标转换：将window中的坐标转换到元素盒子中的坐标，并返回(x,y)坐标         * element：canvas元素对象         * x:鼠标在当前窗口X坐标值         * y:鼠标在当前窗口Y坐标值         * */        function windowToCanvas(element,x,y){            //获取当前鼠标在window中的坐标值            // alert(event.clientX+"-------"+event.clientY);            //获取元素的坐标属性            var box = element.getBoundingClientRect();            var bx = x - box.left;            var by = y - box.top;            return {x:bx,y:by};        }    </script></body></html>
0 0