基于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 相关文章推荐
js预载入和JavaScript Image()对象使用介绍
Aug 28 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
JS重学系列之聊聊new操作符
Mar 04 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 Javascript
vue.js实现点击图标放大离开时缩小的代码
Jan 27 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
Ajax PHP分页演示
2007/01/02 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
浅析php原型模式
2014/11/25 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
[原创]php逐行读取txt文件写入数组的方法
2015/07/02 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
JavaScript实现select添加option
2015/07/03 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
深入理解React高阶组件
2017/09/28 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
js实现简单模态框实例
2018/11/16 Javascript
python pickle 和 shelve模块的用法
2013/09/16 Python
简单上手Python中装饰器的使用
2015/07/12 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
详解Python_shutil模块
2019/03/15 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
探矿工程师自荐信
2014/01/24 职场文书
学生会副主席竞聘书
2014/03/31 职场文书
2014年学习部工作总结
2014/11/12 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
Unicode中的CJK(中日韩统一表意文字)字符小结
2021/12/06 HTML / CSS