function DrawImage(ImgD,FitWidth,FitHeight){ var image= new Image(); image.src=ImgD.src; if(image.width>0 && image"/> function DrawImage(ImgD,FitWidth,FitHeight){ var image= new Image(); image.src=ImgD.src; if(image.width>0 && image">

Maison >interface Web >js tutoriel >Comment redimensionner des images avec javascript, explication détaillée des exemples de code de recadrage

Comment redimensionner des images avec javascript, explication détaillée des exemples de code de recadrage

伊谢尔伦
伊谢尔伦original
2017-07-25 15:13:592646parcourir

Redimensionner l'image sans perdre sa forme (compatible FF IE)

// 用法 <img src="this_image_path.jpg" onload="DrawImage(this,450,450);" />
 function DrawImage(ImgD,FitWidth,FitHeight){
 var image=new Image();
 image.src=ImgD.src;
 if(image.width>0 && image.height>0){
  if(image.width/image.height>= FitWidth/FitHeight){
  if(image.width>FitWidth){
   ImgD.width=FitWidth;
   ImgD.height=(image.height*FitWidth)/image.width;
  }else{
   ImgD.width=image.width;
   ImgD.height=image.height;
  }
  } else{
  if(image.height>FitHeight){
   ImgD.height=FitHeight;
   ImgD.width=(image.width*FitHeight)/image.height;
  }else{
   ImgD.width=image.width;
   ImgD.height=image.height;
  }
  }
 }
 }

Découper par débordement : masqué :

function clipImage(o, w, h){
 var img = new Image();
 img.src = o.src;
 if(img.width >0 && img.height>0)
 {
 if(img.width/img.height >= w/h)
 {
  if(img.width > w)
  { 
  o.width = (img.width*h)/img.height;
  o.height = h;
  //o.setAttribute("style", "marginLeft:-" + ((o.width-w)/2).toString() + "px");
  $(o).css("margin-left", "-"+((o.width-w)/2).toString() + "px");
  }
  else
  {
  o.width = img.width;
  o.height = img.height;
  } 
 }
 else
 {
  if(img.height > h)
  {
  o.height = (img.height*w)/img.width;
  o.width = w;
  //o.setAttribute("style", "margin-top:-" + ((o.height-h)/2).toString() + "px");
  //$(o).css("style", "margin-top:-" + ((o.height-h)/2).toString() + "px");
  $(o).css("margin-top", "-"+((o.height-h)/2).toString() + "px");
 }
  else
  {
  o.width = img.width;
  o.height = img.height;
  } 
 }
 }
}

Exemple :

<style type="text/css">
 ul{list-style:none;}
 ul li{float:left;padding:1px;border:#ccc 1px solid;width:120px;height:120px;overflow:hidden;text-align:center;over-flow:hidden;}
</style>
<ul>
 <li><img src="1.jpg" onload="DrawImage(this,120,120);" /></li>
 <li><img src="2.jpg" onload="clipImage(this,120,120);" /></li>
</ul>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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