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

发布时间：2023-09-06 01:16责任编辑：董明明关键词：暂无标签

关闭

目录视图
摘要视图
订阅

异步赠书：9月重磅新书升级，本本经典 程序员9月书讯 每周荐书：ES6、虚拟现实、物联网（评论送书）

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

标签： htmlhtml图片上传预览电机房啊图片

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；

[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学习笔记

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

qq_31540195的博客

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

知识推荐