标签分类 技术文章:
当前位置:首页 > Javascript技术文章 > js canvas实现放大镜查看图片功能

js canvas如何实现图片放大镜功能

  • 发布时间:
  • 作者:码农之家原创
  • 点击:192

这篇文章主要知识点是关于js、canvas、放大镜、js实现canvas图片与img图片的相互转换的示例 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

精通JavaScript
精通JavaScript高清第2版
  • 类型:JavaScript大小:33.5 MB格式:PDF出版:人民邮电出版社作者:陈贤安
立即下载

更多Javascript相关的学习资源可以参阅 Javascript电子书程序设计电子书 等栏目。

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body >
<canvas id="myCanvas" >
  你的浏览器不支持canvas
</canvas>
<canvas id="offCanvas" ></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实现canvas图片与img图片的相互转换的示例

最近在一个项目中,遇到了一个问题,需要把生成的canvas形式的二维码转换为图片,可以长按识别,保存等。查找了一些资料归纳总结了一些知识。

默认在jq库里进行,引入jquery.qrcode.min.js库,将canvas图片转化为img图片,代码如下,

<body>
  <div id="cans"></div>
  <div id="img"></div>
</body>
<script>
//生成canvas形式的二维码
$("#cans").qrcode({
  width:150,
  height:150,
  text:'http://www.cnblogs.com/dxzg/p/6424855.html'//需要生成的内容
  });
  
//从 canvas 提取图片 image 
function convertCanvasToImage(canvas) { 
  //新Image对象,可以理解为DOM 
  var image = new Image(); 
  // canvas.toDataURL 返回的是一串Base64编码的URL
  // 指定格式 PNG 
  image.src = canvas.toDataURL("image/png"); 
  return image; 
} 

//获取网页中的canvas对象 
var mycans=$('canvas')[0];  
//调用convertCanvasToImage函数将canvas转化为img形式  
var img=convertCanvasToImage(mycans); 
//将img插入容器 
$('#img').append(img); 
</script>

同理也可以将图片转换为canvas,转换函数如下:

// 把image 转换为 canvas对象 
function convertImageToCanvas(image) { 
  // 创建canvas DOM元素,并设置其宽高和图片一样  
  var canvas = document.createElement("canvas"); 
  canvas.width = image.width; 
  canvas.height = image.height; 
  // 坐标(0,0) 表示从此处开始绘制,相当于偏移。 
  canvas.getContext("2d").drawImage(image, 0, 0);  
  return canvas; 
} 

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

以上就是本次给大家分享的关于Javascript的全部知识点内容总结,大家还可以在下方相关文章里找到JavaScript输出所选择起始与、 火狐浏览器页面缩放兼容、 JavaScript标准对象知识点总、 等javascript文章进一步学习,感谢大家的阅读和支持。

上一篇:javascript DOM节点获取方法代码

下一篇:JavaScript输出所选择起始与结束日期的实例代码

展开 +

收起 -

学习笔记
网友NO.587545

js 将canvas生成图片保存,或直接保存一张图片的实现方法

将canvas数组保存 function downLoadImage(canvas,name) { var a = document.createElement("a"); a.href = canvas.toDataURL(); a.download = name; a.click();} canvas: 传入canvas的dom对象 name: 保存的图片的名字 直接将图片保存的方法 function downLoadImage(img,name) { var a = document.createElement("a"); a.href = img.src; a.download = name; a.click();} img: 图片的dom对象 name: 保存为图片时的名字 以上这篇js 将canvas生成图片保存,或直接保存一张图片的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。 ……

网友NO.507894

js使用html2canvas实现屏幕截取的示例代码

整理文档,搜刮出一个js使用html2canvas实现屏幕截取的示例代码,稍微整理精简一下做下分享。 !DOCTYPE html html head meta charset="utf-8" meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" titleTest/title style type="text/css" *{ margin:0 auto; padding:0; } .btn{ width:100px; height:30px; line-height:30px; background:green; color:#fff; border-radius:10px; -webkit-border-radius:10px; text-align:center; display:block; text-decoration:none; } .container{ background:#e5e5e5; } /style script src="https://code.jquery.com/jquery-3.2.1.min.js"/script script src="https://cdn.bootcss.com/html2canvas/0.4.1/html2canvas.js"/script script $(function(){ $("#btn").click(function(){ html2canvas($("#container"), { onrendered: function(canvas) { //把截取到的图片替换到a标签的路径下载 $("#download").attr('href',canvas.toDataURL()); //下载下来的图片名字 $("#download").attr('download','share.png') ; document.body.appendChild(canvas); } //可以带上宽高截取你所需要的部分内容 // , // width: 300, // height: 300 }); }); }); /script /head body div div class="btn" id="btn"截取屏幕/div p 先点击截取屏幕后再点击截图下载/p div a href="javascript:;" rel="external nofollow" class="btn" id="download"截图下载/a /div /div div class="container" id="container" p 以下是测试内容/p img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAZ2ElEQVR4Xu2d4Xoquw5DT9//……

网友NO.639428

js canvas实现简单的图像扩散效果

本文实例为大家分享了canvas实现简单图像扩散的代码,供大家参考,具体内容如下 !DOCTYPE HTML html body canvas id="myCanvas" width="800" height="800" Your browser does not support the canvas element. /canvas script type="text/javascript" var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var x1=200,x2=400,x3=600,y1=400,y2=400,y3=400,lr1=10,lr2=10,lr3=10; var lc1="#EE7942";lc2="#EE2C2C";lc3="#CD6839"; var lr1,lr2,lr3; drawarc(15,"#CAE1FF",1); drawarc(25,"#98FB98",2); drawarc(25,"#757575",3); drawarc(30,"#000000",1); drawarc(35,"#32CD32",2); drawarc(50,"#6959CD",3); drawarc(45,"red",1); drawarc(50,"#fff",2); drawarc(65,"#000",3); function drawarc(radiu,ecolor,type){ var grd; var x,y,r; var scolor; switch(type){ case 1: x=x1; y=y1; r=lr1; lr1=radiu; scolor=lc1; break; case 2: x=x2; y=y2; r=lr2; lr2=radiu; scolor=lc2; break; case 3: x=x3; y=y3; r=lr3; lr3=radiu; scolor=lc3; break; default: } grd=cxt.createRadialGradient(x,y,r,x,y,radiu); grd.addColorStop(0,scolor); grd.addColorStop(1,ecolor); cxt.fillStyle=grd; cxt.beginPath(); cxt.arc(x,y,radiu,0,360,false); cxt.closePath(); cxt.fill(); } /script /body /html 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。 ……

<
1
>

Copyright 2018-2019 xz577.com 码农之家

版权责任说明