Laden Bild in Leinwand - Bild skaliert

Question

Ich habe ein Problem mit dem Laden von Bild in Leinwand - das Bild ist irgendwie skaliert.

Hintergrund: Ich habe mehrere Leinwände auf meiner Webseite, ich möchte Bilder in sie laden. Beim Konstruieren bin ich mir über die Dimension nicht sicher, da die Größe von der Bildschirmgröße abhängt.

Also ich div und Leinwand, verwenden Sie CSS, um es in der Größe zu haben, die ich es haben möchte und ein Bild auf die Leinwand drucken. Es würde mehr Dinge mit dem Bild verbinden (d. H. Entscheiden basierend auf dem Verhältnis, wenn ich es vertikal oder horizontal zentrieren muss), aber diese sind nicht wirklich wichtig an diesem Punkt. Das Problem ist, dass das Bild "gezoomt" wird.

Beispiel: die JavaScript-Stück ist hier:

$("canvas").each(function() { 
    var context = $(this)[0].getContext('2d'); 
    var img = new Image; 

    img.src = 'http://i67.tinypic.com/n38zdv.jpg'; 

    $(img).load(function() { 
    context.drawImage(this, 0, 0); 
    }); 

//img will print 400 (correct, thats the width of the img) 
//canvas will print based on the screen size (correct) 
//img displayed in the canvas shows 300px out of 400px, it's zoomed (not correct) 
    $(this).parent().append(
    'img width: '+img.width+ 
    ', canvas width: '+$(this).width()); 
}); 

ich mit HTML und CSS zu https://jsfiddle.net/7zdrfe58/11/ das ganze Beispiel setzen.

Ich versuche auf Mac. Safari und Chrome funktionieren gleich (d. H. Mit dem Zoom).

Ich würde sehr gerne Hilfe dabei !! Vielen Dank

Answer 1

drawImage können Sie die Breite und Höhe des Bildes angeben. Sie können die Leinwand Breite wie so erhalten:

$("canvas").each(function() { 
    var canvas = this; 
    var context = canvas.getContext('2d'); 
    var img = new Image; 
    img.src = 'http://i67.tinypic.com/n38zdv.jpg'; 

    $(img).load(function() { 
    context.drawImage(this, 0, 0, canvas.width, canvas.height); 
    }); 
}); 

Schauen Sie sich Ihre Arbeitscode hier:

https://jsfiddle.net/ucxdLsq9/

Die Dokumentation der drawImage Signaturen finden Sie hier:

https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/drawImage

Answer 2

Geben Sie die richtige Breite und Höhe zu drawImage.

context.drawImage(this, 0, 0 ,300 ,160); 

Updated Fiddle