Wadda:基于 HTML5 Canvas 的图片放大镜

简介: 简介     Wadda 是下一代图片放大技术,使用 HTML5 Canvas 实现图片放大镜功能。借助 HTML5 Canvas 标签,能够自定义放大级别而不需要为每个级别定义图片,还能够设置羽化(Fading)效果。

简介  

  Wadda 是下一代图片放大技术,使用 HTML5 Canvas 实现图片放大镜功能。借助 HTML5 Canvas 标签,能够自定义放大级别而不需要为每个级别定义图片,还能够设置羽化(Fading)效果。

 

 

使用方法

使用非常简单,只需在img标签的title属性中设置放大图片的路径,例如:

<img src=”foo.jpg” id=”thumb” title=”foo_hd.jpg” />  

引入Wadda.js文件,并添加如下代码:

var wad = new Wadda(’thumb’, {
        lensSize: 150,
        xOff: 0,
        yOff: 0,
        fadeLens: true,
        zoom: 2
    });

演示和下载

下面是在线演示页面和下载链接:

演示:Demo 1  Demo 2
下载:Download Files

 

您可能还喜欢

 

 

本文链接:Wadda:基于HTML5 Canvas的图片放大镜

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。

相关文章
|
2月前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
47 0
|
7天前
在线将多张图片拼接起来图工具HTML源码
在线将多张图片拼接成一张图片,多图合一并导出下载。无需本地安装软件。 下载时,使用日期时间作为文件名,规避图片文件名相同造成的覆盖问题;也能省去一部覆盖确认操作 多语言支持
13 0
在线将多张图片拼接起来图工具HTML源码
|
16天前
|
Dart 前端开发 Java
|
22天前
|
Python
Python 下载 html 中的 图片
Python 下载 html 中的 图片
18 2
|
2月前
|
数据采集 缓存 自然语言处理
PHP将HTML标签转化为图片
通过这个方法,PHP后端能够实现将HTML内容转化为图片的功能。这种方式虽然牵涉到一些额外的安装和配置,但能够相对灵活且稳定地解冀转换需求,适用于需要在后端动态生成图片的场景。
41 1
|
2月前
|
JavaScript 前端开发 CDN
vue 生成分享海报、下载图片(含生成二维码qrcodejs2的使用,网页截屏html2canvas的使用)
vue 生成分享海报、下载图片(含生成二维码qrcodejs2的使用,网页截屏html2canvas的使用)
25 0
vue 生成分享海报、下载图片(含生成二维码qrcodejs2的使用,网页截屏html2canvas的使用)
|
3月前
|
移动开发 前端开发 JavaScript
纯HTML5 Canvas实现的饼图
纯HTML5 Canvas实现的饼图
35 6
|
3月前
|
移动开发 前端开发 HTML5
HTML5 Canvas阴影用法演示
HTML5 Canvas阴影用法演示
57 4
|
3月前
|
移动开发 前端开发 HTML5
HTML5 Canvas中实现绘制一个像素宽的细线
HTML5 Canvas中实现绘制一个像素宽的细线
40 3
|
3月前
|
移动开发 前端开发 JavaScript
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
37 3
下一篇
DDNS