canvas-图像放大镜

来源：互联网发布：成都php找工作很难编辑：程序博客网时间：2024/05/16 15:23
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>canvas-放大镜</title>    <style>        body{            padding: 0px;            margin: 0px;        }        #canvas{            border: 1px solid red;            margin: 100px;        }    </style></head><body>    <canvas id="canvas" width="800px" height="500px">    </canvas>    <script>        //获取到canvas元素        var canvas = document.getElementById('canvas');        //获取canvas中的画图环境        var context = canvas.getContext('2d');        var img = new Image();        img.src = "./image/liuyifei.jpg";        window.onload = function(){            //获取放大镜            getfangdajing(context,canvas,img,150,2);        }        /*        *   context:绘制环境对象,        *   element:canvas元素对象        *   img：图片对象        *   diameter:放大镜的大小，        *   ratio：图形的放大比例，        *  （比例 = 原图 ：镜中图像）0<ratio<1缩小图像，ratio>1放大图像        * */        function getfangdajing(context,element,img,diameter,ratio){            //绘制图片            context.drawImage(img,0,0,element.width,element.height);            //鼠标在element中移动触发事件            element.onmousemove = function (e){                context.clearRect(0,0,element.width,element.height);                //绘制图片                context.drawImage(img,0,0,element.width,element.height);                //解决浏览器兼容问题                var e = e ? e : window.event;                //获取鼠标在element元素中的坐标值                var cxy =  windowToCanvas(element,e.clientX,e.clientY);                context.save();//保存当前绘制环境                //获取放大镜                getClip(context,cxy.x,cxy.y,diameter/2);                //将内容放入到放大镜中显示                //根据鼠标点的坐标值计算出在原图的坐标值                var ytx0=img.width/element.width*cxy.x;//计算出鼠标在原图的X坐标值                var yty0=img.height/element.height*cxy.y//计算出鼠标在原图的Y坐标值                //（原图形/显示图形比例）* （放大镜直径/比例= 镜中的图形所占大小）= 原图要截取的图像大小                var ytclipValueW = img.width/element.width*diameter/ratio;//在原图截取图片的宽度                var ytclipValueH =  img.height/element.height*diameter/ratio;//在原图截取图片的宽度                //.drawImage(图像对象,原图像截取的起始X坐标,原图像截取的起始Y坐标,原图像截取的宽度,原图像截取的高度，                // 绘制图像的起始X坐标,绘制图像的起始Y坐标,绘制图像所需要的宽度,绘制图像所需要的高度);                context.drawImage(img,ytx0-ytclipValueW/2,yty0-ytclipValueH/2,ytclipValueW,ytclipValueH,cxy.x-diameter/2,cxy.y-diameter/2,diameter,diameter);                context.restore();//恢复当前保存的绘制环境            }        }        /*        * 获取放大镜框：进行图层切割        * context：绘制环境对象        * x:鼠标在画布中的X坐标        * y:鼠标在画布中的Y坐标        * r:放大镜的直径        * */        function getClip(context,x,y,r){            context.beginPath();            context.arc(x,y,r,0,Math.PI*2,false);            context.stroke();            context.clip();//沿形状切除向外的图层        }        /*        * 坐标转换：将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 1