HTML5文本框右侧加一个放大镜,html5图像局部放大镜(可调节)
下面继续介绍基于html5画布canvas的放大镜效果:
主要步骤:
1)图像的加载,上篇blog里有http://www.cnblogs.com/blue-lg/archive/2011/12/23/2299019.html,必须注意apache的配置,否则getImageData()会有安全问题而无法运行!!
2)核心:两个图像矩阵间的映射,
设o为圆心,则变换后的点A‘对应的是原图像的A点(此乃放大的效果!!!本实验取放大倍数为2)
3)为了简便起见,没有采用线性插值的方法,直接取整获得A点的坐标。for (var j=0;j=0&&k1<=4*image.height*image.width){ imagedata2.data[k+0]=imagedata1.data[k1+0]; imagedata2.data[k+1]=imagedata1.data[k1+1]; imagedata2.data[k+2]=imagedata1.data[k1+2]; imagedata2.data[k+3]=255; // console.log('x:'+x+'y:'+y); }
4)为使镜子凸显,设定边缘处点为一黑点(即rgb均为0)function isOn(x0,y0,x,y,r){//放大镜边缘 if((x0-x)*(x0-x)+(y0-y)*(y0-y)==r*r) return true;else return false;}
if (isOn(x0,y0,i,j,r)){ imagedata2.data[k+0]=0; imagedata2.data[k+1]=0; imagedata2.data[k+2]=0; imagedata2.data[k+3]=255; }
5)越界或者换行的点(若存在),忽略之(取原值即可)else{ imagedata2.data[k+0]=imagedata1.data[k+0]; imagedata2.data[k+1]=imagedata1.data[k+1]; imagedata2.data[k+2]=imagedata1.data[k+2]; imagedata2.data[k+3]=255; }
6)放大镜半径的外界设定
同样利用canvas以及onclick函数,如下所示:
 放大镜半径为
var canvas2=document.getElementById('bar');
var context2=canvas2.getContext('2d');
context2.beginPath();
context2.lineWidth = 1;//边框宽度
context2.strokeStyle = "#ff00ff";//边框颜色
context2.strokeRect(10,0,295,28);//边框坐标及大小
context2.closePath();
canvas2.οnclick=function(e){
var x1=e.clientX-e.target.offsetLeft;
context2.clearRect(0,0,305,30);//擦除上次的痕迹
context2.beginPath();
context2.lineWidth = 1;//边框宽度
context2.strokeStyle = "#ff00ff";//边框颜色
context2.strokeRect(10,0,295,28);//边框坐标及大小
context2.fillStyle = "#00ff00";//填充canvas的背景颜色
context2.fillRect(0, 0, x1,28);//参数分别表示 x轴,y轴,宽度,高度
document.getElementById('r').innerHTML=Math.floor(x1/6);
r=Math.floor(x1/6);
}
下面是完整代码:
canvas图像处理
canvas放大镜
是时候更换浏览器了点击下载firefox
var canvas1=document.getElementById('canvas1');
var context1=canvas1.getContext('2d');
image=new Image();
image.src="photo.jpg";
context1.drawImage(image,0,0);//绘制原始图像,(0,0)表示图像的左上角位与canvas画布的位置
var imagedata1=context1.getImageData(0,0,image.width,image.height);
var imagedata2=context1.createImageData(image.width,image.height);
r=40;//放大镜半径,原始默认值,可以通过最下面的进度条设置
canvas1.οnmοusemοve=function(e){
var x=e.clientX-e.target.offsetLeft;
var y=e.clientY-e.target.offsetTop;
x0=x;y0=y;
//console.log('x:'+x+'y:'+y);
for (var j=0;j
for(var i=0;i
var k=4*(image.width*j+i);
var k1=4*(image.width*Math.floor((j+y0)/2)+Math.floor((i+x0)/2));//对应的原始图像上的点
if (isOn(x0,y0,i,j,r)){//放大镜边缘上的点imagedata2.data[k+0]=0;
imagedata2.data[k+1]=0;
imagedata2.data[k+2]=0;
imagedata2.data[k+3]=255;
}
else if(isIn(x0,y0,i,j,r)){//放大区域的点
if(k1>=0&&k1<=4*image.height*image.width){//放大效果的的时候,这一步其实可以省略
imagedata2.data[k+0]=imagedata1.data[k1+0];
imagedata2.data[k+1]=imagedata1.data[k1+1];
imagedata2.data[k+2]=imagedata1.data[k1+2];
imagedata2.data[k+3]=255;
// console.log('x:'+x+'y:'+y);
}
}
else{//其他剩下不受影响的点
imagedata2.data[k+0]=imagedata1.data[k+0];
imagedata2.data[k+1]=imagedata1.data[k+1];
imagedata2.data[k+2]=imagedata1.data[k+2];
imagedata2.data[k+3]=255;
}
}}
context1.putImageData(imagedata2,0,0);//canvas显示
}
canvas1.οnmοuseοut=function(){context1.drawImage(image,0,0);}//鼠标移出,自动重绘
function isIn(x0,y0,x,y,r){//放大区域
if((x0-x)*(x0-x)+(y0-y)*(y0-y)
return true;
else
return false;
}
function isOn(x0,y0,x,y,r){//放大镜边缘
if((x0-x)*(x0-x)+(y0-y)*(y0-y)==r*r)
return true;
else
return false;
}
 放大镜半径为
var canvas2=document.getElementById('bar');
var context2=canvas2.getContext('2d');
context2.beginPath();
context2.lineWidth = 1;//边框宽度
context2.strokeStyle = "#ff00ff";//边框颜色
context2.strokeRect(10,0,295,28);//边框坐标及大小
context2.closePath();
canvas2.οnclick=function(e){
var x1=e.clientX-e.target.offsetLeft;
context2.clearRect(0,0,305,30);
context2.beginPath();
context2.lineWidth = 1;//边框宽度
context2.strokeStyle = "#ff00ff";//边框颜色
context2.strokeRect(10,0,295,28);//边框坐标及大小
context2.fillStyle = "#00ff00";//填充canvas的背景颜色
context2.fillRect(0, 0, x1,28);//参数分别表示 x轴,y轴,宽度,高度
document.getElementById('r').innerHTML=Math.floor(x1/6);
r=Math.floor(x1/6);//一个划算,使得最大半径为50px
}
Attention:
1)记得将canvas1的宽高设置和图片大小相同,如不同,还要在进行以此计算,比较麻烦;
效果如下:
如有不妥,还请指正!
转载请注明:
http://www.cnblogs.com/blue-lg/archive/2011/12/23/2299464.html
HTML5文本框右侧加一个放大镜,html5图像局部放大镜(可调节)相关推荐
- html文本框后面加一个按钮怎么对齐,怎样对齐文本框和图像(image)按钮实现三点一线...
一个文本框旁边一个按钮是很经常用到的网页内容,比如搜索框等等,而如果旁边的按钮使用图像的话,他们竖直方向就很不容易对齐,即使使用 vertical-align.padding和margin等都不行(特 ...
- 编写一程序,有2个文本框,在第一个文本框中输入一个整数,当焦点从第一个文本框离开时,第二个文本框将显示这个数的绝对值(使用FocusListener)。
编写一程序,有2个文本框,在第一个文本框中输入一个整数,当焦点从第一个文本框离开时,第二个文本框将显示这个数的绝对值(使用FocusListener). import javax.swing.*; i ...
- 【无标题】手写输入文字时,文本框输入最后一个汉字会丢失
@TOC文本框输入最后一个汉字会丢失 手写输入文字时,文本框输入最后一个汉字会丢失 #[报Bug]半屏手写输入文字时,最后一个文字总时需要点击一下才能赋值给v-model 比如说手机端输入的是3个字: ...
- html5文本框获取焦点,文本框获得焦点和失去焦点的判断代码
文本框失去焦点事件.获得焦点事件 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后, ...
- html5文本框里插图片文字,word应用教程:在文本框内插入图片
在使用word编辑电子文档时,可以通过插入功能插入图片,那么怎样才能在wps文字文档从插入可以任意移动的图片呢,那么下面就由学习啦小编给大家分享下word在文本框内插入图片的技巧,希望能帮助到您. w ...
- html5文本框怎么透明度,话说半透明文本框!(不透明度可以任意调节,可以实现全透明)...
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 我以前曾经问过大家半透明对话框怎么做,后来一直没有找到答案.直到有一天,云霞散人告诉了我一个api函数... 好吧,我承认,我说的这个不是半透明" ...
- html5 文本框限制,html中input禁止输入(禁止获得焦点)多种方法及input限制数字和长度...
input禁止输入(禁止获得焦点) 1: readonly规定输入字段为只读可复制,但是,用户可以使用Tab键切换到该字段,可选择,可以接收焦点,还可以选中或拷贝其文本. 2:disabled 被 ...
- HTML5文本框怎么透明,css怎么设计文本框透明度
css怎么设计文本框透明度 给input设置的css属性: background 和 color ,都用rgba 比如background: rgba(255,255,255,0.5); color: ...
- android文本框左右加减按钮长按一直加减
为什么80%的码农都做不了架构师?>>> 来说说今天的战绩吧,说是战绩,是因为今天写代码时效率挺高,可能是因为集中精力吧,所以,如果要写好程序的话,最好满足以下两点: 1.写 ...
最新文章
- 余弦距离(Cosine距离)与编辑距离分别是什么?各有什么优势和使用场景?
- 企业建设网站之前需要做好哪些基本了解?
- mysql 开发进阶篇系列 32 工具篇(mysqladmin工具)
- C#——实现IComparable接口、IComparableT 接口、IComparer接口、IComparerT 接口和ComparerT 类DEMO
- 机器学习实战(十)Apriori(关联分析)
- 第 7 章 排序算法
- laravel 5.2 异常处理页面
- 微信客户端电脑版_【电脑】微信客户端数据自动删除工具 再也不用担心电脑内存了...
- 感染所有html病毒代码,非常简单的病毒代码汇总
- FTP测试手机软件画画教程图片,「推荐」手机、平板绘画党福利!10个非常好用的绘画App赶紧试试...
- 客户流失预测——相关论文学习笔记
- 设计模式基础学习之单例模式
- 阿尔兹海默症AD最新研究进展(2021年7月)
- 潘爱民:计算机程序的演进——我的程序人生三十年
- java按照空格分割,Java用split实现分割含一个或多个空格的字符串
- 特斯拉充电电流设置多大_特斯拉充电要多久
- 工程效能部门如何讲好故事做好事
- Linux基本命令---Linux进程管理指令
- java hibernate 是什么意思_Java开源项目Hibernate意义是什么?
- 【JMP白皮书下载】 | 可靠性增长之探讨与案例分享