基于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 void(0)的妙用
Oct 21 Javascript
jquery中dom操作和事件的实例学习-表单验证
Nov 30 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
常用javascript表单验证汇总
Jul 20 Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
vue-router为激活的路由设置样式操作
Jul 18 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 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-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
PHP检测数据类型的几种方法(总结)
2017/03/04 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
[原创]图片分页查看
2006/08/28 Javascript
Javascript 写的简单进度条控件
2008/01/22 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
2016/07/19 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
Python 调用DLL操作抄表机
2009/01/12 Python
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
python对excel文档去重及求和的实例
2018/04/18 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
PHP如何对用户密码进行加密
2014/07/31 面试题
服务之星事迹材料
2014/05/03 职场文书
人事主管岗位职责
2015/02/04 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
班委竞选稿范文
2015/11/21 职场文书
庭外和解协议书
2016/03/23 职场文书