web-dev-qa-db-fra.com

Javascript Image Redimensionner

Est-ce que quelqu'un sait comment redimensionner les images proportionnellement en utilisant JavaScript?

J'ai essayé de modifier le DOM en ajoutant les attributs height et width à la volée, mais il semble que cela ne fonctionne pas sur IE6.

javascriptinternet-explorer-6image-manipulation
43
Komang

Pour modifier une image proportionnellement, modifiez simplement l'une des propriétés css width/height, laissez l'autre définie sur auto.

image.style.width = '50%'
image.style.height = 'auto'

Cela garantira que son rapport d'aspect reste le même.

Gardez à l'esprit que les navigateurs ont tendance à sucer lors du redimensionnement des images - vous constaterez probablement que votre image redimensionnée est horrible.

65
Dan

ok il a résolu, voici mon code final

if($(this).width() > $(this).height()) { 
 $(this).css('width',MaxPreviewDimension+'px');
 $(this).css('height','auto');
} else {
 $(this).css('height',MaxPreviewDimension+'px');
 $(this).css('width','auto');
}

Merci les gars 

18
Komang

Au lieu de modifier les attributs de hauteur et de largeur de l'image, essayez de modifier la hauteur et la largeur CSS.

myimg = document.getElementById('myimg');
myimg.style.height = "50px";
myimg.style.width = "50px";

Un des problèmes les plus courants est que les styles de hauteur et de largeur sont des chaînes qui incluent une unité, comme "px" dans l'exemple ci-dessus.

Edit - Je pense que le réglage direct de la hauteur et de la largeur au lieu d'utiliser style.height et style.width devrait fonctionner. Cela aurait aussi l'avantage d'avoir déjà les dimensions d'origine. Pouvez-vous poster un peu de votre code? Êtes-vous sûr que vous êtes en mode standard au lieu du mode quirks?

Cela devrait fonctionner:

myimg = document.getElementById('myimg');
myimg.height = myimg.height * 2;
myimg.width = myimg.width * 2;
6
Neall

J'ai répondu cette question ici: Comment redimensionner les images proportionnellement/en gardant les proportions? . Je le copie ici parce que je pense vraiment que c'est une méthode très fiable :)

 /**
  * Conserve aspect ratio of the original region. Useful when shrinking/enlarging
  * images to fit into a certain area.
  *
  * @param {Number} srcWidth width of source image
  * @param {Number} srcHeight height of source image
  * @param {Number} maxWidth maximum available width
  * @param {Number} maxHeight maximum available height
  * @return {Object} { width, height }
  */
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

    var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);

    return { width: srcWidth*ratio, height: srcHeight*ratio };
 }
5
Jason J. Nathan

Essayé le code suivant, a fonctionné correctement sur IE6 sur WinXP Pro SP3.

function Resize(imgId)
{
  var img = document.getElementById(imgId);
  var w = img.width, h = img.height;
  w /= 2; h /= 2;
  img.width = w; img.height = h;
}

Aussi OK dans FF3 et Opera 9.26.

4
PhiLho

Exemple: comment redimensionner avec un pourcentage

<head>
    <script type="text/javascript">
        var CreateNewImage = function (url, value) {
            var img = new Image;
            img.src = url;
            img.width = img.width * (1 + (value / 100));
            img.height = img.height * (1 + (value / 100));

            var container = document.getElementById ("container");
            container.appendChild (img);
        }
    </script>
</head>
<body>
    <button onclick="CreateNewImage ('http://www.medellin.gov.co/transito/images_jq/imagen5.jpg', 40);">Zoom +40%</button>
    <button onclick="CreateNewImage ('http://www.medellin.gov.co/transito/images_jq/imagen5.jpg', 60);">Zoom +50%</button>
    <div id="container"></div>
</body>
3
equiman

Cela fonctionne pour tous les cas.

function resizeImg(imgId) {
    var img = document.getElementById(imgId);
    var $img = $(img);
    var maxWidth = 110;
    var maxHeight = 100;
    var width = img.width;
    var height = img.height;
    var aspectW = width / maxWidth;
    var aspectH = height / maxHeight;

    if (aspectW > 1 || aspectH > 1) {
        if (aspectW > aspectH) {
            $img.width(maxWidth);
            $img.height(height / aspectW);
        }
        else {
            $img.height(maxHeight);
            $img.width(width / aspectH);
        }
    }
}
2
user246340

Vous n'avez pas à le faire avec Javascript. Vous pouvez simplement créer une classe CSS et l'appliquer à votre tag.

.preview_image{
        width: 300px;
    height: auto;
    border: 0px;
}
2
Dimitris Damilos

Essaye ça..

<html>
<body>
<head>
<script type="text/javascript">
function splitString()
{
var myDimen=document.getElementById("dimen").value;
var splitDimen = myDimen.split("*");
document.getElementById("myImage").width=splitDimen[0];
document.getElementById("myImage").height=splitDimen[1];
}
</script>
</head>

<h2>Norwegian Mountain Trip</h2>
<img border="0" id="myImage" src="..." alt="Pulpit rock" width="304" height="228" /><br>
<input type="text" id="dimen" name="dimension" />
<input type="submit" value="Submit" Onclick ="splitString()"/>

</body>
</html>

Dans la zone de texte, indiquez la dimension souhaitée, au format 50 * 60. Cliquez sur soumettre. Vous obtiendrez l'image redimensionnée. Indiquez le chemin de votre image à la place des points dans la balise image.

1
vadivu

Utilisez JQuery

var scale=0.5;

minWidth=50;
minHeight=100;

if($("#id img").width()*scale>minWidth && $("#id img").height()*scale >minHeight)
{
    $("#id img").width($("#id img").width()*scale);
    $("#id img").height($("#id img").height()*scale);
}
1
Tim

redimensionner une image en javascript: 

$(window).load(function() {
mitad();doble();
});
function mitad(){ 

    imag0.width=imag0.width/2;
    imag0.height=imag0.height/2;

    }
function doble(){ 
  imag0.width=imag0.width*2; 
  imag0.height=imag0.height*2;}

imag0 est le nom de l'image:

 <img src="xxx.jpg" name="imag0">
0
user2561474

Voici ma solution de remplissage de la couverture (similaire à background-size: cover, mais il prend en charge l'ancien navigateur IE)

<div class="imgContainer" style="height:100px; width:500px; overflow:hidden; background-color: black">
    <img src="http://dev.isaacsonwebdevelopment.com/sites/development/files/views-slideshow-settings-jquery-cycle-custom-options-message.png" id="imgCat">
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script>
    $(window).load(function() {
        var heightRate =$("#imgCat").height() / $("#imgCat").parent(".imgContainer").height();
        var widthRate = $("#imgCat").width() / $("#imgCat").parent(".imgContainer").width();

        if (window.console) {
            console.log($("#imgCat").height());
            console.log(heightRate);
            console.log(widthRate);
            console.log(heightRate > widthRate);
        }
        if (heightRate <= widthRate) {
            $("#imgCat").height($("#imgCat").parent(".imgContainer").height());
        } else {
            $("#imgCat").width($("#imgCat").parent(".imgContainer").width());
        }
    });
</script>
0
Weijing Jay Lin
function resize_image(image, w, h) {

    if (typeof(image) != 'object') image = document.getElementById(image);

    if (w == null || w == undefined)
        w = (h / image.clientHeight) * image.clientWidth;

    if (h == null || h == undefined)
        h = (w / image.clientWidth) * image.clientHeight;

    image.style['height'] = h + 'px';
    image.style['width'] = w + 'px';
    return;
}

transmettez-lui soit un élément DOM img, soit l’id d’un élément image, ainsi que les nouvelles largeur et hauteur.

ou vous pouvez passer soit juste la largeur, soit juste la hauteur (si seulement la hauteur, passez la largeur comme nulle ou indéfinie) et il redimensionnera en conservant le rapport de format

0
Uther Pendragon