基于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 相关文章推荐
ext读取两种结构的xml的代码
Nov 05 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
Mar 18 Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
Node.js开发第三方微信公众平台
Jun 05 Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 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 include,include_once,require,require_once
2008/09/05 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
ThinkPHP静态缓存简单配置和使用方法详解
2016/03/23 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
2012/05/24 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
javascript实现秒表计时器的制作方法
2017/02/16 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
Bootstrap Table从零开始
2017/06/30 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
python的文件操作方法汇总
2017/11/10 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
利用python、tensorflow、opencv、pyqt5实现人脸实时签到系统
2019/09/25 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
pytorch梯度剪裁方式
2020/02/04 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
Python-for循环的内部机制
2020/06/12 Python
职业生涯规划书的格式
2013/12/29 职场文书
大学新生军训感言
2014/02/25 职场文书
股份合作协议书
2014/09/10 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
发布会邀请函
2015/01/31 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸