HTML la Toile: mise à l'Échelle l'image pour l'ajuster sans étirement?

Im en utilisant le code ci-dessous pour dessiner et dimensionner une image à l'intérieur d'une toile. Le problème étant que l'image rendue est à l'intérieur d'un étirement.

Si possible, j'aimerais qu'il soit dimensionné en fonction de la largeur, mais de maintenir son ratio d'aspect.

Des idées?

//IMAGE LOADER
var canvas = document.getElementById('image-canvas');
var canvas2 = document.getElementById('image-canvas2');
ctx = canvas.getContext('2d');
ctx2 = canvas2.getContext('2d');

//Trigger the imageLoader function when a file has been selected
var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', imageLoader, false);

function imageLoader() {
    var reader = new FileReader();
    reader.onload = function(event) {
        img = new Image();
        img.onload = function(){
            ctx.drawImage(img,0,0,canvas.width, canvas.height);
            ctx2.drawImage(img,0,0,canvas.width, canvas.height);
        }
        img.src = reader.result;
    }
    reader.readAsDataURL(fileInput.files[0]);
}
  • Savez-vous que le ratio correct? Vous pouvez simplement appliquer le droit de ratio lors de l'élaboration. Si vous ne le connaissez pas, vous pouvez vous rendre sur le DOM et la requête de l'image en largeur/hauteur
InformationsquelleAutor Alejandro Gorgal | 2015-01-20
  1. 15

    De vous permettre de comprendre les dimensions de l'image en l'ajoutant à la DOM. Une fois que vous savez le rapport, vous pouvez redimensionner votre image afin de l'adapter à l'intérieur de votre toile.

    ratio = width / height;
width = height * ratio;
height = width / ratio;

    La suivante devrait fonctionner si une image est en mode paysage ou portrait.

    JS:

    var canvas = document.getElementById('image-canvas');
var canvas2 = document.getElementById('image-canvas2');
var ctx = canvas.getContext('2d');
document.getElementById('fileInput').addEventListener('change', imageLoader, false);

function imageLoader() {
    var reader = new FileReader();
    reader.onload = function(event) {
        var img = new Image();
        img.onload = function(){
            var ct = document.getElementById('measure'); 
            ct.appendChild(img);
            var wrh = img.width / img.height;
            var newWidth = canvas.width;
            var newHeight = newWidth / wrh;
            if (newHeight > canvas.height) {
                newHeight = canvas.height;
                newWidth = newHeight * wrh;
            }
            ct.removeChild(img);
            ctx.drawImage(img,0,0, newWidth , newHeight);
        }
        img.src = reader.result;
    }
    reader.readAsDataURL(fileInput.files[0]);
}

    CSS:

    /* Add image to the DOM here so user can't see it */
#measure { position: absolute; left: -10000px; top: -100000px;}
canvas { border: 1px solid red; }

    HTML:

    <canvas id="image-canvas" width="300" height="300"></canvas>
<input type="file" id="fileInput" />
<div id="measure"></div>

    Vous pouvez jouer avec elle ici

    • Réponse fantastique.Merci beaucoup!
    • Excellente solution! M'a sauvé beaucoup de travail, merci camarade!
    • Quand j'essaye de la réactivité du point de vue de feux d'artifice, fonctionne très bien, mais lorsque j'essaie de mon mobile, ça ne marche pas. Une idée?
    • Vous devez poser une nouvelle question liée à celui-ci, de poster le code que vous avez utilisé essayé, ce que l'erreur a été et de ce qui vous attend. Merci de ne pas poser de nouvelles questions en vertu d'une question, il ajoute trop de bruit
    • Ok, désolé. Je n'étais pas sûr si je pouvais poser des questions repetees, et comment
    • Ce n'est pas un double, si vous montrez votre utilisation spécifique du code, votre problème est probablement quelque chose d'autre, c'est pourquoi une autre question pourrait être utile pour d'autres personnes qui peuvent avoir les mêmes problèmes que vous

    InformationsquelleAutor Juan Mendes