整理各种js按比例缩放图片方法
来源:仰天一笑的blog 发布时间:2007-09-27 20:01:00
asp之家注:在网页设计或编程中如何以最方便的方法来处理图片的宽高,以达到最佳的显示效果,这个问题相信很多网页制作人员都遇到过,最麻烦最费时间的做法是用制图软件Photoshop等来一张张处理,这种方法如果处理一两张还好点,多了真是麻烦;最快的做法是直接给图片固定一个宽高,这样做的缺点就是影响页面的美观,而大多数的做法是使用JS来控制图片的显示尺寸在一定的范围内,不会比例失调,保证了图片不会变形,相信这种方法是最合适的。本文就给你介绍了使用js来处理图片尺寸的几个方法:
看到海东兄的按比例缩放图片 ,我就把我写的js版本的也拿出来show一下,哈哈!
js版本(by仰天一笑):
function resizeImage(obj, MaxW, MaxH)
{
var imageObject = obj;
var state = imageObject.readyState;
if(state!='complete')
{
setTimeout("resizeImage("+imageObject+","+MaxW+","+MaxH+")",50);
return;
}
var oldImage = new Image();
oldImage.src = imageObject.src;
var dW = oldImage.width;
var dH = oldImage.height;
if(dW>MaxW || dH>MaxH)
{
a = dW/MaxW; b = dH/MaxH;
if( b>a ) a = b;
dW = dW/a; dH = dH/a;
}
if(dW > 0 && dH > 0)
{
imageObject.width = dW;
imageObject.height = dH;
}
}
使用很简单:
<img src="../pic.jpg" onload=’resizeImage(this,60,90)>
就OK了;同时也附上C#版本的 :
<summary>
/// 按比例缩放图片
/// </summary>
/// <param name="imgUrl">图片的路径</param>
/// <param name="imgHeight">图片的高度</param>
/// <param name="imgWidth">图片的宽度</param>
/// <returns></returns>
public static string GetImageSize(string imgUrl,int imgHeight,int imgWidth)
{
string fileName = System.Web.HttpContext.Current.Server.MapPath(imgUrl);
string strResult = string.Empty;
if(System.IO.File.Exists(fileName) && imgHeight != 0 && imgWidth != 0)
{
decimal desWidth;decimal desHeight; //目标宽高
System.Drawing.Image objImage = System.Drawing.Image.FromFile(fileName);
decimal radioAct = (decimal)objImage.Width/(decimal)objImage.Height; //原始图片的宽高比
decimal radioLoc = (decimal)imgWidth/(decimal)imgHeight; //图片位的宽高比
if(radioAct > radioLoc) //原始图片比图片位宽
{
decimal dcmZoom = (decimal)imgWidth/(decimal)objImage.Width;
desHeight = objImage.Height*dcmZoom;
desWidth = imgWidth;
}
else
{
decimal dcmZoom = (decimal)imgHeight/(decimal)objImage.Height;
desWidth = objImage.Width*dcmZoom;
desHeight = imgHeight;
}
objImage.Dispose(); //释放资源
strResult = "width=\"" + Convert.ToString((int)desWidth) + "\" height=\""
+ Convert.ToString((int)desHeight) + "\" ";
}
return strResult;
}


猜你喜欢
- 今天学习Python的时候,需要安装一个第三方库,Python Imaging Library,是Python下面一个非常强大的处理图像的工
- 回调函数用起来比较爽。特别是在js中,满世界全是回调,那么在python中,怎么来优雅地实现自己的回调函数呢下面贴一个我写的例子class
- 前言异步函数也是有执行顺序的。本质上来说,JavaScript是单线程语言,不管是在浏览器中还是nodejs环境下。浏览器在执行js代码和渲
- 先看一个示例代码如下<template> <div align="center" styl
- 0x00 marshalmarshal使用的是与Python语言相关但与机器无关的二进制来读写Python对象的。这种二进制的格式也跟Pyt
- 1、创建表1.1、创建表基本语法CREATE TABLE tablename (column_name_1 column_type_1 co
- 人工智能有多火,相信铺天盖地的新闻已经证实了这一点,不可否认,我们已经迎来了人工智能的又一次高潮。与前几次人工智能的飞跃相比,这一次人工智能
- 要想从命令行启动mysqld服务器,你应当启动控制台窗口(或“DOS window”)并输入命令:C
- 操作系统会为每一个创建的进程分配一个独立的地址空间,不同进程的地址空间是完全隔离的,因此如果不加其他的措施,他们完全感觉不到彼此的存在。那么
- 本文介绍基于Python中ArcPy模块,对大量栅格遥感影像文件进行批量掩膜与批量重采样的操作。首先,我们来明确一下本文的具体需求。现有一个
- 人工智能是一种未来性的技术,目前正在致力于研究自己的一套工具。一系列的进展在过去的几年中发生了:无事故驾驶超过300000英里并在三个州合法
- 网页制作中用到的特效字,你一定是用图象处理软件制作的吧!告诉你,不用图象处理软件,我也能做出漂亮的特效字来,你看,阴影字我就是这样做出来的。
- springboot数据库查询时出现的时区差异最近项目中使用到多数据源将MySQL库中的数据迁移到mongo库中,发现取出后的数据与原数据时
- 查询重写插件从MySQL 5.7.6开始,MySQL Server支持查询重写插件,可以在服务器执行之前检查并可能修改服务器接收的语句。以下
- 使用触发器触发器发生什么事情之后或之前,会自动执行某条语句,这就是触发器创建触发器创建触发器要给出的4条关键信息:1.唯一的触发器名2.触发
- 本位实例为大家分享了Python生成随机密码的实现过程,供大家参考,具体内容如下写了个程序,主要是用来检测MySQL数据库的空密码和弱密码的
- 举例吧,这样更容易看的懂。例1:from django.core.exceptions import ObjectDoesNotExistt
- scikit-learn 是基于 Python 语言的机器学习工具简单高效的数据挖掘和数据分析工具可供大家在各种环境中重复使用建立在 Num
- 不夸张地说,XML正在接管这个世界,正在成为今天一切Web服务和大多数SOA的基础。XML本身并非一种技术,而是程序设计语言,可支持开发者为
- import Exception# except 在捕获错误异常的时候 是要根据具体的错误类型来捕获的# 用一个块 可以捕获多个不同类型的异