关闭
![](http://static.blog.csdn.net/images/category_icon.jpg)
版权声明:本文为博主原创文章,未经博主允许不得转载。
在做项目的时候用到了图片上传,用的是网上找到的一个bootstrap模板,里面的有比较好的图片上传预览功能,但是无法点击放大图片,感觉这样用户体验不怎么好,所以就想自己加一个点击放大图片的功能上去;用到了一个GitHub的开源项目Viewer.js;地址:https://github.com/fengyuanchen/viewer;
但是在开发的时候发现对于原本就已经加载的图片是可以放大的,但是对于自己上传的图片放大不了,猜想了一下可能是因为bootstrap模板是在js里面用代码添加了一个img来显示上传的图片,而Viewer.js无法找到这个img,所以点击之后放大不了。因为刚开始接触这方面,所以源码也没怎么看懂,不知道这个猜想对不对;
其实对于项目而言,上传的图片不能点击放大是没有什么影响的,一般我们不需要放大本地有的图片,但是对于这么一个功能我还是很想去做一下实现一下的,所以就在空闲之余网上各种找方法拼凑一下整合一下做出来;
首先准备工作室要下载jquery和Viewer;
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta name="author" content="EdieLei" />
- <title></title>
- <link rel="stylesheet" type="text/css" href="zoom/viewer.css"/>
- <link rel="stylesheet" type="text/css" href="zoom/main.css"/>
- <body>
- <h3>HTML5 图片上传预览</h3>
- <div class="docs-pictures clearfix">
- <img id="pic" src="" style=" 200px;height: 200px;"/>
- </div>
- <input id="img" type="file" accept="image/*" />
- <script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
- <script src="zoom/viewer.js" type="text/javascript" charset="utf-8"></script>
- <script src="zoom/main.js" type="text/javascript" charset="utf-8"></script>
- <script type="text/javascript">
- $(function() {
- $('#img').change(function() {
- var file = this.files[0]; //选择上传的文件
- var r = new FileReader();
- r.readAsDataURL(file); //Base64
- $(r).load(function() {
- $('#pic').attr('src',this.result);
- });
- });
- });
- </script>
- </head>
- </body>
- </html>
上传后:
放大后:
这里感觉放大效果不明显,这是因为原图就这么大,可以手动点击底部按钮进行图片的调整,而实际中我们在网页上经常显示的是图片的缩略图,当点击之后显示原图就已经是放大了;如果需要点击之后得到的图比原图要大的话那就要改Viewer.js里面的属性了,
大致改的位置在533行:
- image = {
- naturalWidth: naturalWidth,
- naturalHeight: naturalHeight,
- aspectRatio: aspectRatio,
- ratio: width / naturalWidth,
- width*1.5,
- height: height*1.5,
- left: (viewerWidth - width*1.5) / 2,
- top: (viewerHeight - height*1.5) / 2
- };
- 顶
- 0
- 踩
- 0
- 文章搜索
- 文章分类
- android组件属性(0)
- android验证功能(0)
- boostrap插件(1)
- android笔记(7)
- html学习(2)
- SSM框架学习笔记(1)
- android studio(0)
- android studio笔记(2)
- android SuperExample开发(0)
- 阅读排行
- bootstrap-table.js如何根据单元格数据不同显示不同的字体的颜色(6962)
- android当activity加载完成后自动弹出popWindow(896)
- html图片上传阅览并且点击放大(661)
- struts2 2.5.2web.xml和struts.xmll配置(237)
- android开发设置应用开机自启动(2)——并使应用实时保持在前台(138)
- android使用TextView实现文字的跑马灯效果(122)
- android开发设置应用开机自启动(108)
- RecyclerView中绘制不相同的分割线(105)
- HTML学习笔记(88)
- 自定义图片手势缩放ImageView笔记(86)
- 评论排行
暂无评论