canvas实现图像放大镜
本文实例为大家分享了canvas实现图像放大镜的具体代码，供大家参考，具体内容如下
<!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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js canvas实现简单的图像扩散效果
本文实例为大家分享了canvas实现简单图像扩散的代码,供大家参考,具体内容如下 <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="800" height="800" style="border:1px solid #c3c3c3;"> Your browser does not support the canv
-
Android开发之图形图像与动画(一)Paint和Canvas类学习
Paint类 *Paint类代表画笔,用来描述图形的颜色和风格,如线宽,颜色,透明度和填充效果等信息. *使用Paint类时,需要先创建该类的对象,可以通过该类的构造函数实现.通常情况的实现代码是: *Paintpaint=newPaint(); *创建完Paint对象后,可以通过该对象提供的方法对画笔的默认设置进行改变 Canvas *Canvas类代表画布,通过该类提供的构造方法,可以绘制各种图形. *通常情况下,要在Android中绘图,需要先创建一个继承自View类的视图,并且在该类中重
-
canvas实现图像截取功能
本文实例为大家分享了canvas图像截取的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas-图像截取</title> <style> canvas{ border: 1px dashed red; float: left; position: r
-
canvas实现图像布局填充功能
本文实例为大家分享了canvas图像布局填充的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas-图像布局填充</title> <style> #canvas{ border: 1px solid palevioletred; } </sty
-
使用canvas进行图像编辑的实例
前面的话 本文将分为几个小功能的形式来详细介绍canvas图像编辑 缩放 下面是一张分析图,假设默认情况下,图片和canvas宽高相同.图片的缩放(scale)范围为0.5到3,缩放时改变的是图片的大小和图片的坐标位置 W(宽) = canvas.width * scale H(高) = canvas.height * scale x坐标 = (W - canvas.width)/2; y坐标 = (H - canvas.height)/2; 因此,代码如下 <canvas id="dra
-
PHP实现将HTML5中Canvas图像保存到服务器的方法
本文实例讲述了PHP实现将HTML5中Canvas图像保存到服务器的方法.分享给大家供大家参考.具体实现方法如下: 一.问题: 在几年前HTML5还没有流行的时候,我们的项目经理曾经向我提出这样一个需求:让项目评审专家们在评审结束时用笔在平板电脑上进行电子签名.这需要我们评审软件里提供这样一个功能:打开浏览器,登录,进入评审意见页,页面最下部有个方块区域,用户在这里用触摸笔进行签名,然后这个签名将会保持的服务器上. 这样的一个需求在当时是让我大费周折,但如今想起来,如果用html5的canvas
-
canvas实现图像放大镜
本文实例为大家分享了canvas实现图像放大镜的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas-放大镜</title> <style> body{ padding: 0px; margin: 0px; } #canvas{ border: 1p
-
使用JavaScript实现简单图像放大镜效果
目录 项目基本结构 第 1 步:图像放大镜的基本结构 第 2 步:将图像添加到放大镜 第 3 步:CSS设计放大镜 第 4 步:使用 JavaScript 激活图像放大镜 完整源码下载 图像放大镜在很多网站中都扮演着重要的角色,大多数开发人员使用 jquery 来创建图像放大镜.在本教程中,我将向大家展示如何使用 HTML.CSS 和 JavaScript 制作一个简单的图像放大镜. 在线演示地址 项目基本结构 目录结构如下: 第 1 步:图像放大镜的基本结构 使用以下 HTML 和 CSS 代
-
JavaScript图像放大镜效果实现方法详解
1. 基本四瓣花型图案 根据四瓣花卉线的参数方程: t= r*(1+sin(12*θ)/5)*(0.5+sin(4*θ)/2); x=t*cos(θ)); y=t*sin(θ)); 编写如下的HTML文件. <!DOCTYPE html> <head> <title>基本的四瓣花型图案</title> <script type="text/javascript"> function draw(id) { var canvas
-
jquery实现图片放大镜功能
实现原理: 这里用到了两张图片,一张小图,一张大图.将大图设置为放大镜的背景图片,当鼠标在小图上移动时,同时控制背景大图在放大镜中的位置.两张图片大小最好是等比例的,这样才能达到最佳效果.当没有大图时,则默认为小图本身,这时由于两张图片大小一样,因此放大镜效果不明显,就跟没放大是一样的. 此插件用到了html5,css3的一些属性,ie8及以下版本不兼容,放大镜是方形的. 运行效果截图如下: 具体代码如下: (function () { $.fn.Magnifier = function (op
-
canvas的神奇用法
canvas有一个神奇的方法getImageData这个玩意.它可以获取canvas内图像的没一个像素点的颜色值获取,而且可以改变. 如果你有各种滤镜的算法.那么用canvas就可以实现图片的滤镜转化,可以做成类似美图秀秀那样的功能. 使用方法: 1:先将图片导入画布. 2:var canvasData = context.getImageData(0, 0, canvas.width, canvas.height); //用这个将图片每个像素点的信息获取出来,得到一个数组.注意得到的信息不是
-
Delphi基本图像处理方法汇总
本文实例汇总了Delphi基本图像处理方法.分享给大家供大家参考.具体分析如下: //浮雕 procedure Emboss(SrcBmp,DestBmp:TBitmap;AzimuthChange:integer);overload; var i, j, Gray, Azimuthvalue, R, G, B: integer; SrcRGB, SrcRGB1, SrcRGB2, DestRGB: pRGBTriple; begin for i := 0 to SrcBmp.Height -
-
Android 图片缩放与旋转的实现详解
本文使用Matrix实现Android实现图片缩放与旋转.示例代码如下: 复制代码 代码如下: package com.android.matrix;import android.app.Activity;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Matrix;import android.graphics.drawable.BitmapDrawable
-
提升你网站水平的jQuery插件集合推荐
看看这些非常棒的jQuery插件吧,我相信你会发现一些很有用的东西. lsotope Isotope 是一款精致的 jQuery插件,用于创建单纯用 CSS 无法实现的智能的.动态的布局,非常强大. lettering Lettering 是一款用于实现激进的网页排版的 jQuery 插件,可以帮助你在网站中加入丰富多彩的文字效果. jQuery.spritely jQuery.spritely 是一款简单.轻量的 jQuery 插件,用来创建创建动态角色和背景动画,效果非常酷,赶紧点击看示例吧