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

最新推荐文章于 2024-04-25 20:22:26 发布

灵犀一指

最新推荐文章于 2024-04-25 20:22:26 发布

阅读量4.5k

点赞数

分类专栏： html学习文章标签： html html图片上传预览电机房啊图片

本文链接：https://blog.csdn.net/qq_31540195/article/details/52189047

版权

html学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在做项目的时候用到了图片上传，用的是网上找到的一个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="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行：

        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
点赞
踩
3

收藏

觉得还不错? 一键收藏
4
评论
html图片上传阅览并且点击放大

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

扫一扫