HTML 5 Canvas] Bildqualität, wenn ich die Größe ändere

Question

Vielen Dank für einen Blick.

Was ich hier versuche ist ... Laden Bild von Computer (mit FileReader), legen Sie img-Tag src in die Datei. Dann zeichne Leinwand mit diesem Bild.

function previewFile(){ 
    var preview = document.querySelector('img'); //selects the query named img 
    var file = document.querySelector('input[type=file]').files[0]; //sames as here 
    var reader = new FileReader(); 

    reader.onload = function() { 
     preview.src = reader.result; 
     drawCanvas(); 
    } 

    if (file) { 
     reader.readAsDataURL(file); //reads the data as a URL 
    } else { 
     preview.src = "sample.jpg"; 
    } 
} 

previewFile(); //calls the function named previewFile 

window.onload = function() {drawCanvas(); }; 

function drawCanvas() { 
var img = document.querySelector("img"); 
var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext('2d'); 
ctx.filter = window.getComputedStyle(document.querySelector("img")).filter; 
ctx.drawImage(img, 0, 0); 
} 

Problem ist, wenn ich eine andere Bilddatei laden. Es wird in die Leinwand geladen, passt aber nicht in die Leinwandgröße. Es behält die ursprüngliche Bildgröße und "Teil" des Bildes wird in der Leinwand angezeigt.

Um es zu lösen, versuchte ich folgendes: ctx.drawImage (img, 0, 0, document.getElementById ('Leinwand') Breite,
document.getElementById ('Leinwand') Höhe..);

Es funktioniert, aber die Bildqualität wird wirklich schlecht ... da es nicht Originalbildgröße ist. Es ist auf die bestimmte Höhe eingestellt und muss in der Größe angepasst werden.

Alles, was ich tun möchte, ist ... behalten Sie die ursprüngliche Leinwandgröße (Breite: einige px; Höhe: Auto), also wenn ich das Bild lade, passt es an die Leinwand Breite und Höhe angepasst.

Würden Sie mir bitte helfen? Vielen Dank.

Added

Ich recherchieren mich und folgende gefunden: Ich kam mit einer Idee - zuerst die Bildgröße auf der aktuellen Breite der Leinwand basierend ändern.

var img = document.querySelector("img"); 
var canvas = document.getElementById("image"); 

var ratio = img.height/img.width; 
img.width = canvas.offsetWidth; 
img.height = img.width * ratio; 

Zeichnen Sie dann mit dem bearbeiteten Bild.

var ctx = canvas.getContext('2d'); 
ctx.filter = window.getComputedStyle(img).filter; 
ctx.drawImage(img, 0, 0, img.width, img.height); 

Dann habe ich das Problem gefunden. Ich überprüfte "img.height" Variable ist 199px. Aber die Höhe der Leinwand wird irgendwie 150px. Ich überprüfte und es gibt keine CSS auf der Leinwand überhaupt.

Diesmal stelle ich die Leinwandbreite vor drawImage().

Und wieder, das ursprüngliche Bild kommt zurück ... und "Teil" des Bildes wird in der Leinwand gezeigt. Die Größe der Leinwand ist, was ich wollte, aber ...

Answer 1

Vielen Dank für einen Blick auf das Problem. Besonders @Kaiido, der versucht hat zu helfen. Vielen Dank. Ich bin wirklich neu in diesem Stackoverflow ... also wusste ich nicht, wie man eine Demo erstellt.

Ich fand die Lösung. Nun ... es war wirklich grundlegende Kenntnisse über die Leinwand ,,, aber ich denke, viele Leute vergessen/Fehl folgende:

var ctx = canvas.getContext('2d'); 
ctx.canvas.width = 1000; 
ctx.canvas.height = 1000; 
ctx.drawImage(img, 0, 0, 800, 800); 

ctx.canvas.width ist Breite Leinwand. ctx.canvas.height ist die Höhe von Canvas. In drawImage werden diese 800er Breite und Höhe des Bildes gezeichnet, nicht die Leinwandgröße !! Wenn Sie also beispielsweise 1000, 1000 in drawImage festlegen, wird das Bild auf die Größe angepasst und in die Zeichenfläche gezeichnet. Wenn es größer als die Leinwandgröße ist, wird nur "Teil" Ihres Bildes angezeigt.

Also was ich getan habe, war ... die div Breite Größe zu bekommen, wo ich meine Leinwand setzen möchte. Berechnen Sie dann zuerst das Bildverhältnis (Verhältnis = Bildhöhe/Bildbreite). Legen Sie anschließend die Zeichenflächengröße auf "ctx.canvas.width = div width size, ctx.canvas" fest.Höhe = div Breite Größe * Verhältnis). Zeichnen Sie dann Canvas mit Breite und Höhe von canva (ctx.drawImage (img, 0, 0, ctx.canvas.width, ctx.canvas.height)).

Hoffe das hilft jemandem wie ich neu :) Danke.