基于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 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
js实现动态改变字体大小代码
Jan 02 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
Angular2整合其他插件的方法
Jan 20 Javascript
Django+Vue跨域环境配置详解
Jul 06 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
微信小程序+云开发实现欢迎登录注册
May 24 Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 04 Javascript
详解template标签用法(含vue中的用法总结)
Jan 12 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
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
Yii2单元测试用法示例
2016/11/12 PHP
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
带左右箭头图片轮播的JS代码
2013/12/18 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
原生JS改变透明度实现轮播效果
2017/03/24 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
JS中用EL表达式获取上下文参数值的方法
2018/03/28 Javascript
Angular 如何使用第三方库的方法
2018/04/18 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
解决python 自动安装缺少模块的问题
2018/10/22 Python
值得收藏的10道python 面试题
2019/04/15 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
python按比例随机切分数据的实现
2019/07/11 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
Python生成词云的实现代码
2020/01/14 Python
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
韩国11街:11STREET
2018/03/27 全球购物
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
卡拉威高尔夫官方网站:Callaway Golf
2020/09/16 全球购物
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
医学专业大学生职业生涯规划书
2014/10/25 职场文书
行政文员岗位职责
2015/02/04 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
python实现监听键盘
2021/04/26 Python
代码复现python目标检测yolo3详解预测
2022/05/06 Python