•  
  •  
  •  
     
  •  
  •  
关闭
 
2016-08-12 10:02 661人阅读 评论(0) 收藏 举报
 分类：
html学习（1） 

版权声明：本文为博主原创文章，未经博主允许不得转载。

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

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

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

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

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

上传前：

上传后：

放大后：

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

大致改的位置在533行：

  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条
    文章搜索
    文章存档
 
 
 
 
公司简介|招贤纳士|广告服务|联系方式|版权声明|法律顾问|问题报告|合作伙伴|论坛反馈
网站客服杂志客服微博客服webmaster@csdn.net400-660-0108|北京创新乐知信息技术有限公司 版权所有|江苏知之为计算机有限公司|江苏乐知网络技术有限公司
京 ICP 证 09002463 号|Copyright © 1999-2017, CSDN.NET, All Rights Reserved 
 

html图片上传阅览并且点击放大的更多相关文章

  1. vue富文本编辑器vue-quill-editor使用总结(包含图片上传，拖拽，放大和缩小)

    vue-quill-editor是vue很好的富文本编辑器,富文本的功能基本上都支持,样式是黑白色,简洁大方. 第一步下载 vue-quill-editor: npm i vue-quill-edit ...

  2. H5实现多图片预览上传，可点击可拖拽控件介绍

    版权声明:欢迎转载,请注明出处:http://blog.csdn.net/weixin_36380516 在做图片上传时发现一个蛮好用的控件,支持多张图片同时上传,可以点击选择图片,也可以将图片拖拽到 ...

  3. HTML5笔记：跨域通讯、多线程、本地存储和多图片上传技术

    最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...

  4. .NET MVC实现多图片上传并附带参数（ajaxfileupload）

    做网站呢,都免不了要做图片上传. 还记得去年做微信的时候用WebAPI+ajaxfileupload.js做了一个能够附带参数上传的功能,博文地址:.NET WebAPI 实现图片上传(包括附带参数上 ...

  5. .NET WebAPI 实现图片上传（包括附带参数上传图片）

    博主的项目,客户端是APP,考虑到以后也可能会应用到微信端.网站等,图片上传方法就需要兼容多端,并且以目前的设计,不允许非登录用户上传图片,就得在上传时解决附带参数上传图片的问题. 先来看看后台方法( ...

  6. 百度UEditor在线编辑器的配置和图片上传

    前言 最近在项目中使用了百度UEditor富文本编辑器,配置UEditor过程中遇到了几个问题,在此记录一下解决方案和使用方法,避免以后使用UEditor出现类似的错误. 基本配置 一.下载UEdit ...

  7. ASP.Net MVC3 图片上传详解（form.js,bootstrap）

    图片上传的插件很多,但很多时候还是不能切合我们的需求,我这里给大家分享个我用一个form,file实现上传四张图片的小demo.完全是用jquery前后交互,没有用插件. 最终效果图如下: 玩过花田人 ...

  8. Nodejs之MEAN栈开发（四）---- form验证及图片上传

    这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能.开始之前需要源码同学可以先在git上fork:https://github.com/stoneniqiu/R ...

  9. 分离与继承的思想实现图片上传后的预览功能：ImageUploadView

    本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图 ...

随机推荐

  1. java课程之团队开发冲刺1.2

    一.总结昨天进度 1.三个任务都已经实现 2.使用时间:四个小时左右 二.遇到的困难 1.对Android原生的侧拉任务栏不了解,导致使用的时候出现了一部分问题 三.今天任务规划 1.对之前的程序重新 ...

  2. ES中的分词器

    基本概念: 全文搜索引擎会用某种算法对要建索引的文档进行分析, 从文档中提取出若干Token(词元), 这些算法称为Tokenizer(分词器), 这些Token会被进一步处理, 比如转成小写等, 这 ...

  3. JSONObject optString

    JSONObject optString  获取后台返回的{"state":1001,"data":"数据保存成功"} 用optString ...

  4. Game Engine Architecture 8

    [Game Engine Architecture 8] 1.Differences across Operating Systems • UNIX uses a forward slash (/) ...

  5. QUARTZ系列之零:概述

    前言: 很早就会使用quartz进行任务调度了,然一直只是会用,甚至只是会用如下的套路: { 1.获取个schedule 2.实例一个job 3.实例一个trigger 4. schedule.sch ...

  6. 大数据下基于Tensorflow框架的深度学习示例教程

    近几年,信息时代的快速发展产生了海量数据,诞生了无数前沿的大数据技术与应用.在当今大数据时代的产业界,商业决策日益基于数据的分析作出.当数据膨胀到一定规模时,基于机器学习对海量复杂数据的分析更能产生较 ...

  7. ES6基本使用

    var let 度可用于声明变量. 区别:1.let:只在let命令所在代码块内有效 2.let 不存在变量提升(内部影响不到外部) var b = []; ;j<;j++){ let d=j; ...

  8. VBA实现表单自动编号

    效果:每次提交或刷新标段,表单案指定格式实现自动编号.如当天日期加数字编号的格式 即 2019年2月3日产生的第一张表单产生的编号格式为20190203-001 以此类推第二张表单编号为2019020 ...

  9. nginx学习笔记(一)

    agentzh 的 Nginx 教程 学习笔记 nginx的变量 Nginx 变量一旦创建,其变量名的可见范围就是整个 Nginx 配置,甚至可以跨越不同虚拟主机的 server 配置块, 例子如下 ...

  10. 通过maven-assembly-plugin将Springboot项目打包成tar.gz压缩包，在Linux环境可执行脚本直接安装成系统服务

    1.在pom.xml中添加maven-assembly-plugin依赖,同时需将默认生成的spring-boot-maven-plugin依赖删除,否则最终打出的发行包启动会有问题 <plug ...