查看: 2466|回复: 0

[JavaScript/JQuery] js canvas实现放大镜查看图片功能

发表于 2018-1-6 10:00:38

本文实例为大家分享了canvas实现放大镜查看图片功能的具体代码,供大家参考,具体内容如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body style="background: black;">
  8. <canvas id="myCanvas" style="display: block;margin: 0px auto;border: 10px solid #aaa ">
  9. 你的浏览器不支持canvas
  10. </canvas>
  11. <canvas id="offCanvas" style="display: none"></canvas>
  12. <script>
  13. var myCanvas = document.getElementById("myCanvas");
  14. var context = myCanvas.getContext("2d");
  15. var offCanvas = document.getElementById("offCanvas");
  16. var offContext = offCanvas.getContext("2d");
  17. var isMouseDown = false;
  18. var scale;
  19. var image = new Image();
  20. window.onload = function () {
  21. myCanvas.width = 300;
  22. myCanvas.height = 200;
  23. image.src = "1.jpg";
  24. image.onload = function () {
  25. offCanvas.width = image.width;
  26. offCanvas.height = image.height;
  27. scale = offCanvas.width / myCanvas.width ;
  28. context.drawImage(image,0,0,myCanvas.width,myCanvas.height);
  29. offContext.drawImage(image,0,0);
  30. }
  31. };
  32. function windowToCanvas(x,y) {
  33. var bbox = myCanvas.getBoundingClientRect();
  34. return { x : x - bbox.left , y : y - bbox.top};
  35. }
  36. myCanvas.onmousedown = function (e) {
  37. e.preventDefault();
  38. var point = windowToCanvas(e.clientX , e.clientY);
  39. console.log(point);
  40. isMouseDown = true;
  41. drawCanvasWithMagnifier( true , point );
  42. };
  43. myCanvas.onmousemove = function (e) {
  44. e.preventDefault();
  45. if (isMouseDown ){
  46. var point = windowToCanvas(e.clientX , e.clientY);
  47. drawCanvasWithMagnifier( true , point );
  48. }
  49. };
  50. myCanvas.onmouseup = function (e) {
  51. e.preventDefault();
  52. isMouseDown = false;
  53. drawCanvasWithMagnifier( false );
  54. };
  55. myCanvas.onmouseout = function (e) {
  56. e.preventDefault();
  57. isMouseDown = false;
  58. drawCanvasWithMagnifier( false );
  59. };
  60. function drawCanvasWithMagnifier( isShowMagnifier , point) {
  61. context.clearRect(0,0,myCanvas.width,myCanvas.height);
  62. context.drawImage(image,0,0,myCanvas.width,myCanvas.height);
  63. if(isShowMagnifier == true ){
  64. drawMagnifier( point );
  65. }
  66. }
  67. function drawMagnifier( point ) {
  68. var imageLG_cx = point.x * scale ;
  69. var imageLG_cy = point.y * scale ;
  70. var mr = 20 ;
  71. var sx = imageLG_cx - mr ;
  72. var sy = imageLG_cy - mr ;
  73. var dx = point.x - mr ;
  74. var dy = point.y - mr ;
  75. context.save();
  76. context.lineWidth = 5.0;
  77. context.strokeStyle = "#069";
  78. context.beginPath();
  79. context.arc(point.x,point.y,mr,0,Math.PI*2);
  80. context.stroke();
  81. context.clip();
  82. context.drawImage(offCanvas,sx,sy,2*mr,2*mr,dx,dy,2*mr,2*mr);
  83. context.restore();
  84. }
  85. </script>
  86. </body>
  87. </html>
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持程序员之家。



回复

使用道具 举报