基于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 让图片在 div或dl里 居中,底部对齐
Jan 21 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 Javascript
javascript常用经典算法详解
Jan 11 Javascript
Webpack执行命令参数详解
Jun 17 Javascript
React中使用collections时key的重要性详解
Aug 07 Javascript
vue axios post发送复杂对象问题
Jun 04 Javascript
JS实现简单随机3D骰子
Oct 24 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 Javascript
使用堆实现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强制下载PDF文件示例
2014/01/17 PHP
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
教你如何用php实现LOL数据远程获取
2014/06/10 PHP
php实现简单的权限管理的示例代码
2017/08/25 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
小程序实现上下切换位置
2020/11/16 Javascript
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
Python 40行代码实现人脸识别功能
2017/04/02 Python
Python简单定义与使用二叉树示例
2018/05/11 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
美国五金商店:Ace Hardware
2018/03/27 全球购物
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
运动会稿件50字
2014/02/17 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
授权委托书怎么写
2014/04/03 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
公司庆典主持词
2015/07/04 职场文书
离婚民事起诉状
2015/08/03 职场文书