编程 Javascript

js canvas实现放大镜查看图片功能

Posted in Javascript onJune 08, 2017

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

- Author -

我在世界的尽头想你

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

一个不错的用JavaScript实现的UBB编码函数

Mar 09 Javascript

基于jquery的图片懒加载js

Jun 30 Javascript

jquery动画3.创建一个带遮罩效果的图片走廊

Aug 24 Javascript

js局部刷新页面时间具体实现

Jul 04 Javascript

javascript实现了照片拖拽点击置顶的照片墙代码

Apr 03 Javascript

用window.onerror捕获并上报Js错误的方法

Jan 27 Javascript

Bootstrap打造一个左侧折叠菜单的系统模板(一)

May 17 Javascript

jQuery实现节点的追加、替换、删除、复制功能示例

Jul 11 jQuery

微信小程序实现图片上传、删除和预览功能的方法

Dec 18 Javascript

Less 安装及基本用法

May 05 Javascript

解决layui的form里的元素进行动态生成,验证失效的问题

Sep 14 Javascript

JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例

Jan 26 Javascript

vue实现一个移动端屏蔽滑动的遮罩层实例

Jun 08 #Javascript

微信小程序开发之map地图实现教程

Jun 08 #Javascript

详解AngularJS用Interceptors来统一处理HTTP请求和响应

Jun 08 #Javascript

微信小程序开发之实现自定义Toast弹框

Jun 08 #Javascript

微信小程序开发之toast等弹框提示使用教程

Jun 08 #Javascript

javascript实现二叉树遍历的代码

Jun 08 #Javascript

微信小程序tabbar不显示解决办法

Jun 08 #Javascript