JS实现按比例缩放图片的方法(附C#版代码)

本文实例讲述了JS实现按比例缩放图片的方法。分享给大家供大家参考，具体如下：

js版本：

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了；

注：等比例放缩的时候会出现抖动的情况，处理方法很简单，你在img的属性先设置它的widht和height，这样的话加载的时候绝对不会超过这个尺寸，等你js运行好之后就会调到你所规定的比例，绝对不会以下撑到很大。

同时也附上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;
}

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • C#图片按比例缩放的实现代码

    复制代码 代码如下: using System.Drawing;using System.Drawing.Drawing2D;using System.Drawing.Imaging; namespace Publics{    public class ImgHelper    {        public static void AdjustPhoto(int toWidth, int toHeight, string filePath, string fromFileName, stri

  • C#实现图片分割方法与代码

    1. 概述 有时候我们需要在web页面上显示一张图,比如说一张地图,而这张地图会比较大.这时候如果我们把一张大图分隔成一组小图,那么客户端的显示速度会明显地感觉块.希望阅读本文对你有所帮助. 2. 实现思路 .NET Framework GDI+ 为我们提供了一组丰富地类来编辑图形图像.有关.NET Framework GDI+的详细资料请查阅msdn相关文档.这里只简要叙述本程序要用的的几个类. System.Drawing.Image.LoadFile 方法可以从指定的文件创建 Image 

  • C#实现缩放和剪裁图片的方法示例

    本文实例讲述了C#实现缩放和剪裁图片的方法.分享给大家供大家参考,具体如下: using System; using System.Collections.Generic; using System.Text; using System.Drawing; using System.Drawing.Drawing2D; using System.Drawing.Imaging; namespace Project { class ImageOperation { /// <summary> //

  • C#图片按比例缩放实例

    本文实例为大家分享了C#图片按比例缩放的具体代码,供大家参考,具体内容如下 工具类代码: using System; using System.Collections.Generic; using System.Drawing; using System.Drawing.Drawing2D; using System.Drawing.Imaging; using System.Linq; using System.Text; using System.Threading.Tasks; names

  • C#如何实现图片的剪裁并保存

    最近需要将一张图片上传并按指定位置剪裁,后来在网上找了一个剪裁图片的插件,但是只有前台没有后端,然后我各种百度,并最终完成,特此写一篇博客略表纪念. 前台我就不说了,用的cropper插件,有兴趣的自己去百度找找吧.我们 有这个插件. 下面是代码: HttpPostedFile file = context.Request.Files["avatar_file"]; string datasize = context.Request.Params["avatar_data&q

  • c#图片缩放图片剪切功能实现(等比缩放)

    所谓c#图片处理高级应,多数是基于.net framework类库完成 复制代码 代码如下: using system;using system.collections.generic;using system.text;using system.io;using system.drawing;using system.drawing.drawing2d;using system.drawing.imaging; namespace wujian.common{    /// <summary>

  • c# Base64编码和图片的互相转换代码

    c# Base64编码和图片的互相转换代码

    事出有因 我们已经做了一个编辑器,这个编辑器可以以xml格式存储一些信息.在存储图片信息时我们碰到了一些问题.我们本来在xml信息中存储的是图片的路径,然而一旦客户把这个信息copy到其他电脑上而没有同时copy相关的图片时,就会出现一些问题.          后来,我们把图片数据转换为Base64编码,替代了原先存储图片路径的方式. 转换流程 将图片转化为Base64字符串的流程是:首先使用BinaryFormatter将图片文件序列化为二进制数据,然后使用Convert类的ToBase64

  • C#保存图片到数据库并读取显示图片的方法

    复制代码 代码如下: private void button2_Click_1(object sender, System.EventArgs e) { string pathName; if (this.openFileDialog1.ShowDialog()==System.Windows.Forms.DialogResult.OK) { pathName = this.openFileDialog1.FileName; System.Drawing.Image img = System.D

  • C#(.net)水印图片的生成完整实例

    本文以一个完整实例讲述了C#水印图片的生成方法.是非常实用的技巧.分享给大家供大家参考. 具体实例代码如下: /* * * 使用说明: * 建议先定义一个WaterImage实例 * 然后利用实例的属性,去匹配需要进行操作的参数 * 然后定义一个WaterImageManage实例 * 利用WaterImageManage实例进行DrawImage(),印图片水印 * DrawWords()印文字水印 * */ using System; using System.Drawing; using

  • C#图片压缩的实现方法

    一般在web应用中,对客户端提交上来的图片肯定需要进行压缩的.尤其是比较大的图片,如果不经过压缩会导致页面变的很大,打开速度比较慢,当然了如果是需要高质量的图片也得需要生产缩略图. 下面贴出我自己琢磨的图片压缩算法,首先这个是未经优化的简单实现: 复制代码 代码如下: public static System.Drawing.Image GetImageThumb(System.Drawing.Image sourceImg, int width, int height)        {   

随机推荐