Le redimensionnement d'une photo sur une toile sans perdre le ratio d'aspect

Salut à tous merci pour toute aide à l'avance. Je suis en train d'écrire une application phonegap et ne peut pas obtenir la photo pour la rétrécir, sans perdre l'aspect ou le recadrage de l'image par erreur. Dans la fonction ci-dessous "données images" est un 64 bits de la chaîne de la photo que l'appareil a pris. Je peux dessiner l'image sur la toile, sur ma page, mais si la photo a été prise dans le paysage, alors il est fracassé ensemble. Si je ne suis pas d'échelle à l'aide de l'échelle de la fonction ou de la fonction drawimage puis-je obtenir seulement le coin de la photo. Un exemple: j'ai pris une photo de la largeur de l'image dans le onPhotoDataSuccess fonction montre 1296px large, et 968px hauteur. Mais ma toile sur l'iPhone est 272px large (mode portrait). J'ai essayé beaucoup de différentes méthodes de mise à l'échelle sur le web et ce qui semble le plus proche par pas assez. Ce que je fais mal?

 function onPhotoDataSuccess(imageData) 
{
var myImage = new Image();
var thecanvas = document.getElementById("queImg");
var ctx = thecanvas.getContext("2d"); 
myImage.onload = function() 
  { 
    thecanvas.setAttribute('width', '100%');
    thecanvas.setAttribute('height', 'auto');
    ctx.scale((myImage.width * 0.15), (myImage.height * 0.15));  
    ctx.drawImage(myImage, 0, 0);   
    }     

    myImage.src = "data:image/jpeg;base64," + imageData;      
}

OriginalL'auteur user852566 | 2011-07-19

  1. 7

    Mise à l'échelle est construite à drawImage.

    Ne pas utiliser setAttribute lorsque vous traitez avec de la toile, appel canvas.width = 272 au lieu de cela, et seulement avec l'ensemble des valeurs de pixel.

    Voici du code de travail pour obtenir vous avez commencé:

     function onPhotoDataSuccess(imageData)
{
var myImage = new Image();
var thecanvas = document.getElementById("queImg");
var ctx = thecanvas.getContext("2d");

    myImage.onload = function() {
    ctx.drawImage(myImage, 0, 0, myImage.width * 0.15, myImage.height * 0.15);
    }     

    myImage.src = "http://placekitten.com/1296/968";
}


onPhotoDataSuccess(null);

    Live exemple:

    http://jsfiddle.net/QBTrg/6/

    OriginalL'auteur Simon Sarris

  2. 1

    Vous pouvez simplement tirer comme ça, sans le scale fonction:

    ctx.drawImage(myImage, 0, 0, myImage.width * 0.15, myImage.height * 0.15);

    Cependant, la résolution doit être explicitement définie, non pas en termes de pourcentages. E. g.:

    window.onload = function() {
    thecanvas.width = window.width;
    thecanvas.height = window.height;
}

    OriginalL'auteur pimvdb