基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)


Posted in Javascript onDecember 25, 2015

本文为大家分享了四个jquery图片常见操作,供大家参考,具体内容如下

1、关于图片大小的重绘,你可以在服务端来实现,也可以通过JQuery在客户端实现。

$(window).bind("load", function() {
   // IMAGE RESIZE
   $('#product_cat_list img').each(function() {
     var maxWidth = 120;
     var maxHeight = 120;
     var ratio = 0;
     var width = $(this).width();
     var height = $(this).height();
 
     if(width > maxWidth){
      ratio = maxWidth / width;
      $(this).css("width", maxWidth);
      $(this).css("height", height * ratio);
      height = height * ratio;
     }
     var width = $(this).width();
     var height = $(this).height();
     if(height > maxHeight){
      ratio = maxHeight / height;
      $(this).css("height", maxHeight);
      $(this).css("width", width * ratio);
      width = width * ratio;
     }
   });
   //$("#contentpage img").show();
   // IMAGE RESIZE
});

2、jQuery获取<img>图片实际尺寸的方法

$(function(){
 var imgSrc = $("#image").attr("src");
 getImageWidth(imgSrc,function(w,h){
 console.log({width:w,height:h});
 });
});

function getImageWidth(url,callback){
 var img = new Image();
 img.src = url;
 
 // 如果图片被缓存,则直接返回缓存数据
 if(img.complete){
   callback(img.width, img.height);
 }else{
      // 完全加载完毕的事件
   img.onload = function(){
 callback(img.width, img.height);
   }
    }
 
}

3、jquery 自动调整图片大小

$(document).ready(function(){
        $('img').each(function() {  
        var maxWidth =500; // 图片最大宽度  
        var maxHeight =500;  // 图片最大高度  
        var ratio = 0; // 缩放比例 
         var width = $(this).width();  // 图片实际宽度  
         var height = $(this).height(); // 图片实际高度   // 检查图片是否超宽  
         if(width > maxWidth){    
         ratio = maxWidth / width;  // 计算缩放比例    
         $(this).css("width", maxWidth); // 设定实际显示宽度    
         height = height * ratio;  // 计算等比例缩放后的高度    
         $(this).css("height", height); // 设定等比例缩放后的高度  
         }   // 检查图片是否超高 
          if(height > maxHeight){    
          ratio = maxHeight / height; // 计算缩放比例   
          $(this).css("height", maxHeight);  // 设定实际显示高度    
          width = width * ratio;  // 计算等比例缩放后的高度    
          $(this).css("width", width);  // 设定等比例缩放后的高度  
          }});
      });

4、使用jQuery对图片进行大小缩放

$(window).bind("load", function() {
  // IMAGE RESIZE
  $('#product_cat_list img').each(function() {
    var maxWidth = 120;
    var maxHeight = 120;
    var ratio = 0;
    var width = $(this).width();
    var height = $(this).height();
 
    if(width > maxWidth){
      ratio = maxWidth / width;
      $(this).css("width", maxWidth);
      $(this).css("height", height * ratio);
      height = height * ratio;
    }
    var width = $(this).width();
    var height = $(this).height();
    if(height > maxHeight){
      ratio = maxHeight / height;
      $(this).css("height", maxHeight);
      $(this).css("width", width * ratio);
      width = width * ratio;
    }
  });
  //$("#contentpage img").show();
  // IMAGE RESIZE
});

以上就是本文的全部内容,帮助大家实现图片重绘、图片获取尺寸、图片调整大小以及图片缩放,希望大家喜欢。

Javascript 相关文章推荐
JAVASCRIPT 对象的创建与使用
Mar 09 Javascript
Prototype最新版(1.5 rc2)使用指南(1)
Jan 10 Javascript
JMenuTab简单使用说明
Mar 13 Javascript
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 Javascript
Javascript中 toFixed四舍六入方法
Aug 21 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
vue 实现上传组件
May 31 Vue.js
使用堆实现Top K算法(JS实现)
Dec 25 #Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 #Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 #Javascript
尝试动手制作javascript放大镜效果
Dec 25 #Javascript
js操作cookie保存浏览记录的方法
Dec 25 #Javascript
js实现跨域的多种方法
Dec 25 #Javascript
jquery.cookie.js用法实例详解
Dec 25 #Javascript
You might like
如何使用PHP计算上一个月的今天
2013/05/23 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
用js实现随机返回数组的一个元素
2007/08/13 Javascript
jquery cookie插件代码类
2009/05/26 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
薪资那么高的Web前端必看书单
2017/10/13 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
Python功能键的读取方法
2015/05/28 Python
Python手机号码归属地查询代码
2016/05/04 Python
Python Socket传输文件示例
2017/01/16 Python
python实现汽车管理系统
2018/11/30 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
python实现得到当前登录用户信息的方法
2019/06/21 Python
对python中UDP,socket的使用详解
2019/08/22 Python
ipad上运行python的方法步骤
2019/10/12 Python
python实现字典嵌套列表取值
2019/12/16 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
写自荐信三大法宝
2014/01/24 职场文书
会员活动策划方案
2014/08/19 职场文书
幼儿园见习总结
2015/06/23 职场文书
欠条样本
2015/07/03 职场文书
2016年寒假见闻
2015/10/10 职场文书
nginx 添加http_stub_status_module模块
2022/05/25 Servers
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android