基于jquery实现图片相关操作（重绘、获取尺寸、调整大小、缩放）

本文为大家分享了四个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

});

以上就是本文的全部内容，帮助大家实现图片重绘、图片获取尺寸、图片调整大小以及图片缩放，希望大家喜欢。