关闭
版权声明：本文为博主原创文章，未经博主允许不得转载。
在做项目的时候用到了图片上传，用的是网上找到的一个bootstrap模板，里面的有比较好的图片上传预览功能，但是无法点击放大图片，感觉这样用户体验不怎么好，所以就想自己加一个点击放大图片的功能上去；用到了一个GitHub的开源项目Viewer.js；地址：https://github.com/fengyuanchen/viewer；
但是在开发的时候发现对于原本就已经加载的图片是可以放大的，但是对于自己上传的图片放大不了，猜想了一下可能是因为bootstrap模板是在js里面用代码添加了一个img来显示上传的图片，而Viewer.js无法找到这个img，所以点击之后放大不了。因为刚开始接触这方面，所以源码也没怎么看懂，不知道这个猜想对不对；
其实对于项目而言，上传的图片不能点击放大是没有什么影响的，一般我们不需要放大本地有的图片，但是对于这么一个功能我还是很想去做一下实现一下的，所以就在空闲之余网上各种找方法拼凑一下整合一下做出来；
首先准备工作室要下载jquery和Viewer；
[html] view plain copy <!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="width: 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行：
[javascript] view plain copy image = { naturalWidth: naturalWidth, naturalHeight: naturalHeight, aspectRatio: aspectRatio, ratio: width / naturalWidth, width: width*1.5, height: height*1.5, left: (viewerWidth - width*1.5) / 2, top: (viewerHeight - height*1.5) / 2 };
顶 0 踩 0 上一篇android开发设置应用开机自启动（2）——并使应用实时保持在前台下一篇HTML学习笔记
转载于:https://www.cnblogs.com/yyp520thy/p/7642672.html
