Maison  >  Article  >  interface Web  >  Méthode JS pour obtenir une mise à l'échelle proportionnelle des images (avec le code de la version C#)_compétences javascript

Méthode JS pour obtenir une mise à l'échelle proportionnelle des images (avec le code de la version C#)_compétences javascript

WBOY
WBOYoriginal
2016-05-16 15:27:051108parcourir

L'exemple de cet article décrit la méthode de mise à l'échelle proportionnelle des images dans JS. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

version 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;
 }
}

C'est très simple à utiliser : b09778e546d10c300160044727fe8042 et c'est OK

Remarque : des tremblements se produiront lors d'une mise à l'échelle dans des proportions égales. La solution est très simple. Vous définissez d'abord la largeur et la hauteur de l'attribut img. De cette façon, il ne dépassera jamais cette taille lors du chargement. il est en cours d'exécution, il sera ajusté au ratio que vous avez spécifié et il ne sera jamais étendu à un niveau très élevé.

La version C# est également jointe

/// <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;
}

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn