码迷,mamicode.com
首页 > Web开发 > 详细

html图片上传阅览并且点击放大

时间:2017-10-09 20:48:49      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:收藏   com   tle   logs   显示   query   网站   计算   stop   

 

关闭
 
 

html图片上传阅览并且点击放大

标签: htmlhtml图片上传预览电机房啊图片
技术分享 分类:

在做项目的时候用到了图片上传,用的是网上找到的一个bootstrap模板,里面的有比较好的图片上传预览功能,但是无法点击放大图片,感觉这样用户体验不怎么好,所以就想自己加一个点击放大图片的功能上去;用到了一个GitHub的开源项目Viewer.js;地址:https://github.com/fengyuanchen/viewer;

但是在开发的时候发现对于原本就已经加载的图片是可以放大的,但是对于自己上传的图片放大不了,猜想了一下可能是因为bootstrap模板是在js里面用代码添加了一个img来显示上传的图片,而Viewer.js无法找到这个img,所以点击之后放大不了。因为刚开始接触这方面,所以源码也没怎么看懂,不知道这个猜想对不对;

其实对于项目而言,上传的图片不能点击放大是没有什么影响的,一般我们不需要放大本地有的图片,但是对于这么一个功能我还是很想去做一下实现一下的,所以就在空闲之余网上各种找方法拼凑一下整合一下做出来;

 

首先准备工作室要下载jquery和Viewer;

 

[html] view plain copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4.     <head>  
  5.         <meta charset="UTF-8">  
  6.         <meta name="author" content="EdieLei" />  
  7.         <title></title>  
  8.         <link rel="stylesheet" type="text/css" href="zoom/viewer.css"/>  
  9.         <link rel="stylesheet" type="text/css" href="zoom/main.css"/>  
  10.   
  11.     <body>  
  12.         <h3>HTML5 图片上传预览</h3>  
  13.         <div class="docs-pictures clearfix">  
  14.             <img id="pic" src="" style="width: 200px;height: 200px;"/>  
  15.         </div>  
  16.         <input id="img" type="file" accept="image/*" />  
  17.           
  18.         <script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>  
  19.         <script src="zoom/viewer.js" type="text/javascript" charset="utf-8"></script>  
  20.         <script src="zoom/main.js" type="text/javascript" charset="utf-8"></script>  
  21.         <script type="text/javascript">  
  22.             $(function() {  
  23.                 $(‘#img‘).change(function() {  
  24.                     var file = this.files[0]; //选择上传的文件  
  25.                     var r = new FileReader();  
  26.                     r.readAsDataURL(file); //Base64  
  27.                     $(r).load(function() {  
  28.                         $(‘#pic‘).attr(‘src‘,this.result);  
  29.                     });  
  30.                 });  
  31.             });  
  32.         </script>  
  33.     </head>  
  34.           
  35.           
  36.     </body>  
  37.   
  38. </html>  
上传前:

 

技术分享

上传后:

技术分享

放大后:

技术分享

 

这里感觉放大效果不明显,这是因为原图就这么大,可以手动点击底部按钮进行图片的调整,而实际中我们在网页上经常显示的是图片的缩略图,当点击之后显示原图就已经是放大了;如果需要点击之后得到的图比原图要大的话那就要改Viewer.js里面的属性了,


大致改的位置在533行:

   

[javascript] view plain copy
 
  1. image = {  
  2.   naturalWidth: naturalWidth,  
  3.   naturalHeight: naturalHeight,  
  4.   aspectRatio: aspectRatio,  
  5.   ratio: width / naturalWidth,  
  6.   width: width*1.5,  
  7.   height: height*1.5,  
  8.   left: (viewerWidth - width*1.5) / 2,  
  9.   top: (viewerHeight - height*1.5) / 2  
  10. };  


 

 
0
0
 

 

 
查看评论

  暂无评论

 
 
发表评论
  • 用 户 名:
  • qq_40222212
  • 评论内容:
  • 技术分享
      
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
 
 
 
 
    个人资料
 
 
    • 访问:9687次
    • 积分:230
    • 等级: 技术分享
    • 排名:千里之外
    • 原创:14篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章存档
 
 
 

html图片上传阅览并且点击放大

标签:收藏   com   tle   logs   显示   query   网站   计算   stop   

原文地址:http://www.cnblogs.com/yyp520thy/p/7642672.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!