JS实现等比例缩放图片

JS实现等比例缩放图片

有时候我们前端页面只有500×500像素的宽和高的布局，但是后台返回的数据图片是1000×1000，那么这种情况下如果我直接返回的话那么图片肯定有一部分没有显示出来，在这种情况下我是想能不能在我们前端开发实现图片等比例缩放。比如如下HTML代码：

<div id="demo1"> <img src="http://img01.taobaocdn.com/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg" alt="">
</div>

CSS代码如下：

#demo1{width:800px;height:300px;overflow:hidden;}

外层div的css样式定了宽度是800像素高度是300像素，但是这张图片的宽度和高度分别是1060像素和300像素，如果我们不做任何处理的话，那么图片肯定会有260像素被隐藏掉了，而我们现在想要图片被渲染出来后根据外层容器800像素×300像素的宽度和高度分别等比例缩放，这样的话不管图片的宽度和高度是多少，都可以自适应！

下面我们可以先看看JSFIddle效果是什么样的！第一张图片是没有任何处理的，第2张小的是根据宽度800像素进行等比例缩放后的。

想要看效果，请轻轻点击我！

已知图片的宽度和高度的等比例缩放的原理是：

HTML代码如下：

<img src="http://img01.taobaocdn.com/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg" width="1060" height="300" alt="">
<div id="demo1"> <img src="http://img01.taobaocdn.com/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg" alt="">
</div>

CSS代码如下：

#demo1{width:800px;height:300px;overflow:hidden;}

JS代码如下：

/*** 已知图片的宽度和高度的等比例缩放*/function knowImgSize(id) {var idWidth = $(id).width(),  // 容器的宽度和高度idHeight = $(id).height();$(id + ' img').each(function(index,img){var img_w = $(this).width(),img_h = $(this).height();// 如果图片自身宽度大于容器的宽度的话 那么高度等比例缩放if(img_w > idWidth) {var height = img_h * idWidth / img_w;$(this).css({"width":idWidth, "height":height});}});}// 初始化$(function(){knowImgSize("#demo1");});

2.JS实现未知图片大小的等比例缩放

当页面加载的图片尺寸未知的情况下，上述代码则不能进行有效的缩放.那么我们现在有没有办法也可以实现类似的？

JSFiddle demo链接如下：

想要查看效果，先轻轻的点击我下！

下面是HTML代码如下：

<h2>缩放后的</h2>
<div class="parentCls"><p><img src="http://img01.taobaocdn.com/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg" class="autoImg"/></p><p><img src="http://gtms01.alicdn.com/tps/i1/T11LpGFs8jXXb5rXb6-1060-300.jpg" class="autoImg"></p><p><img src="http://img04.taobaocdn.com/imgextra/i4/397746073/T2fjl5XA8aXXXXXXXX-397746073.jpg" class="autoImg"/></p><p><img src="http://img03.taobaocdn.com/tps/i3/T1CXpTFkpcXXb5rXb6-1060-300.jpg" class="autoImg"/></p><p><img src="http://gtms01.alicdn.com/tps/i1/T1hC0HFwxaXXb5rXb6-1060-300.jpg" class="autoImg"/></p><p><img src="http://img01.taobaocdn.com/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg" class="autoImg"/></p><p><img src="http://gtms01.alicdn.com/tps/i1/T1hC0HFwxaXXb5rXb6-1060-300.jpg" class="autoImg"/></p>
</div>

简单的Css代码如下：

<style>
/*demo style*/
body { font:12px 'Microsoft Yahei', Tahoma, Arial; _font-family:Tahoma, Arial; }
a { color:#0259C4; }
a:hover { color:#900; }
.demoInfo { padding:10px; background:#F7F7F7; border:1px solid #EEE; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; }
.tips { color:#CCC; }
.parentCls { width:680px; padding:10px; margin-top:50px; overflow:hidden; border:1px solid #CCC; }
.parentCls p { padding: 0 8px; }
.parentCls img { border:0 none; }
</style>

所有的JS代码如下：

/*** JS实现未知图片大小的等比例缩放*/function AutoImg(options) {this.config = {autoImg     : '.autoImg',     // 未知图片dom节点parentCls   : '.parentCls'    // 父节点};this.cache = {};this.init(options);}AutoImg.prototype = {init: function(options){this.config = $.extend(this.config, options || {});var self = this,_config = self.config;$(_config.autoImg).each(function(index,img){var src = img.src,parentNode = $(img).closest(_config.parentCls),parentWidth = $(parentNode).width();// 先隐藏原图img.style.display = 'none';img.removeAttribute('src');// 获取图片头尺寸数据后立即调整图片imgReady(src, function (width,height) {// 等比例缩小if (width > parentWidth) {height = parentWidth / width * height,width = parentWidth;img.style.width = width + 'px';img.style.height = height + 'px';};// 显示原图img.style.display = '';img.setAttribute('src', src);});});}};var imgReady = (function(){var list = [],intervalId = null;// 用来执行队列var queue = function(){for(var i = 0; i < list.length; i++){list[i].end ? list.splice(i--,1) : list[i]();}!list.length && stop();};// 停止所有定时器队列var stop = function(){clearInterval(intervalId);intervalId = null;}return function(url, ready, error) {var onready = {}, width, height, newWidth, newHeight,img = new Image();img.src = url;// 如果图片被缓存，则直接返回缓存数据if(img.complete) {ready(img.width, img.height);return;}width = img.width;height = img.height;// 加载错误后的事件 img.onerror = function () {error && error.call(img);onready.end = true;img = img.onload = img.onerror = null;};// 图片尺寸就绪var onready = function() {newWidth = img.width;newHeight = img.height;if (newWidth !== width || newHeight !== height ||// 如果图片已经在其他地方加载可使用面积检测newWidth * newHeight > 1024) {ready(img.width, img.height);onready.end = true;};};onready();// 完全加载完毕的事件img.onload = function () {// onload在定时器时间差范围内可能比onready快// 这里进行检查并保证onready优先执行!onready.end && onready();// IE gif动画会循环执行onload，置空onload即可img = img.onload = img.onerror = null;};// 加入队列中定期执行if (!onready.end) {list.push(onready);// 无论何时只允许出现一个定时器，减少浏览器性能损耗if (intervalId === null) {intervalId = setInterval(queue, 40);};};}
})();

JS实现等比例缩放图片相关推荐

html 图片比例 js,js自动等比例设置图片尺寸大小
css 图片等比例缩放首页产品展示的图片都变形了,客户要求图片等比例大小,和产品展示的效果一样: css控制图. 网站的内容页面,经常要放图片,如果图片太大会撑出,影响页面美观. > HTML ...
python 等比例缩放图片自写
Python等比例缩放图片使用了 OpenCV 进行图片的读取输入:利用 cv2.imread 函数读取的 Mat 矩阵输出:缩放后的 Mat 矩阵(示例代码为缩放到 512x512 大小,也可 ...
python调整屏幕缩放比例_python实现批量按比例缩放图片效果
本文实例为大家分享了python实现批量按比例缩放图片的具体代码,供大家参考,具体内容如下把脚本文件放在要缩放的文件夹下面. 双击运行脚本,输入要缩放的系数.脚本会在当前目录下创建一个scaledI ...
[原创] 图片操作的类(ImageLibrary)-按比例缩放图片
[原创] 图片操作的类(ImageLibrary)-按比例缩放图片 http://www.vjsdn.com/bbs/bbsTopicDetails.aspx?pid=241 转载于:https:// ...
java实现按比例缩放图片技巧
java实现按比例缩放图片技巧案例需求: 根据指定的文件名称,用户给定的缩放比例来完成缩放图片思路分析: 1.文件对象File 2.BufferedImage构造器: 图像数据的访问的缓冲器 3. ...
Java 等比例缩放图片
/*** 等比率缩放* @param imgsrc 原图片路径* @param imgdist 缩放图片路径* @param widthdist 指定缩放宽度*/ public static void ...
等比例缩放图片并填充图片为正方形（python附代码）
等比例缩放图片并填充图片为正方形看实现的效果代码看实现的效果之前的 836x662 之后的 300x300 且图片中的塔克斯居中代码 import os import cv2 import ...
python 等比例缩放图片
在对图片缩放时,可能会使得图片产生变形,以下代码按照比例缩放图片,保持长宽比. 例如原图为: 如果resize成(224,224)则图片变为 import cv2def process_image(i ...
Python Opencv等比例缩放图片
Python Opencv等比例缩放图片前言前提条件相关介绍实验环境等比例缩放图片代码实现输出结果前言本文是个人使用Python Opencv处理图片的笔记,由于水平有限,难免出现错 ...

JS实现等比例缩放图片

JS实现等比例缩放图片相关推荐

最新文章

热门文章