js canvas实现放大镜查看图片功能
2017-06-08 15:43
941 查看
本文实例为大家分享了canvas实现放大镜查看图片功能的具体代码,供大家参考,具体内容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body style="background: black;"> <canvas id="myCanvas" style="display: block;margin: 0px auto;border: 10px solid #aaa "> 你的浏览器不支持canvas </canvas> <canvas id="offCanvas" style="display: none"></canvas> <script> var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); var offCanvas = document.getElementById("offCanvas"); var offContext = offCanvas.getContext("2d"); var isMouseDown = false; var scale; var image = new Image(); window.onload = function () { myCanvas.width = 300; myCanvas.height = 200; image.src = "1.jpg"; image.onload = function () { offCanvas.width = image.width; offCanvas.height = image.height; scale = offCanvas.width / myCanvas.width ; context.drawImage(image,0,0,myCanvas.width,myCanvas.height); offContext.drawImage(image,0,0); } }; function windowToCanvas(x,y) { var bbox = myCanvas.getBoundingClientRect(); return { x : x - bbox.left , y : y - bbox.top}; } myCanvas.onmousedown = function (e) { e.preventDefault(); var point = windowToCanvas(e.clientX , e.clientY); console.log(point); isMouseDown = true; drawCanvasWithMagnifier( true , point ); }; myCanvas.onmousemove = function (e) { e.preventDefault(); if (isMouseDown ){ var point = windowToCanvas(e.clientX , e.clientY); drawCanvasWithMagnifier( true , point ); } }; myCanvas.onmouseup = function (e) { e.preventDefault(); isMouseDown = false; drawCanvasWithMagnifier( false ); }; myCanvas.onmouseout = function (e) { e.preventDefault(); isMouseDown = false; drawCanvasWithMagnifier( false ); }; function drawCanvasWithMagnifier( isShowMagnifier , point) { context.clearRect(0,0,myCanvas.width,myCanvas.height); context.drawImage(image,0,0,myCanvas.width,myCanvas.height); if(isShowMagnifier == true ){ drawMagnifier( point ); } } function drawMagnifier( point ) { var imageLG_cx = point.x * scale ; var imageLG_cy = point.y * scale ; var mr = 20 ; var sx = imageLG_cx - mr ; var sy = imageLG_cy - mr ; var dx = point.x - mr ; var dy = point.y - mr ; context.save(); context.lineWidth = 5.0; context.strokeStyle = "#069"; context.beginPath(); context.arc(point.x,point.y,mr,0,Math.PI*2); context.stroke(); context.clip(); context.drawImage(offCanvas,sx,sy,2*mr,2*mr,dx,dy,2*mr,2*mr); context.restore(); } </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- js+html5绘制图片到canvas的方法
- JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
- js实现canvas保存图片为png格式并下载到本地的方法
- 使用JavaScript+canvas实现图片裁剪
- Js利用Canvas实现图片压缩功能
- js实现canvas图片与img图片的相互转换的示例
- JavaScript+html5 canvas实现图片破碎重组动画特效
- javascript结合canvas实现图片旋转效果
- js HTML5 canvas绘制图片的方法
- Canvas + JavaScript 制作图片粒子效果
- JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
相关文章推荐
- ALAssetsLibrary类实现查看相册列表,增加相册,保存图片到相册等功能
- javascript 实现图片放大镜功能
- Android Camera开发系列(下)——自定义Camera实现拍照查看图片等功能
- 实现查看网络图片功能
- 查看图片(前进后退)功能实现js代码
- Android Camera开发系列(下)——自定义Camera实现拍照查看图片等功能
- Android之---RecycleView实现简单的图片查看功能(类似相册查看器)
- javascript实现查看html网页放大图片功能
- 前端实现多图片上传查看功能(带UI实现)
- 实现“鼠标移入仿购物网站图片查看细节”功能
- 病人管理系统中查看管理图片功能的实现
- Android Camera开发系列(下)——自定义Camera实现拍照查看图片等功能
- 04-UIScrollView分页功能实现循环查看图片
- Android 实现WebView点击图片查看大图列表及图片保存功能
- Android相机开发(一)之预览拍照查看图片基本功能的实现
- IOS 预览功能(轻松实现对各种文本、图片等查看)
- 查看图片(前进后退)功能实现js代码
- 实现查看网络图片功能
- Android 实验——实现查看网络图片功能
- android长按实现放大镜功能,此源码为转载个人加了一些,留待以后查看