1
Ich kann nicht scheinen, dass Chrome-Browser die wahre Bildgröße über und auch über drawImage über canvas Kontext zeigen. Der Explorer zeigt beide korrekt an.Wie kann Chrome die tatsächliche Bildgröße anzeigen?
In Chrome, das Bild zeigt nicht durch die Abmessungen des Originalbildes , sondern ein verkleinertes Bild. Der Browser scheint bei der Wiedergabe von einem Webserver etwas damit zu tun zu haben. Seltsamerweise, wenn der Browser auf die HTML-Datei lokal geöffnet:
Zum Beispiel: file:///C:/xampp/htdocs/Website_TEST_active/test1.html, die Bildmaße sind korrekt.
Angehängt ist ein abgespeckter HTML- und Javascript-Code. Schätze alle Einsichten.
Dank Sean
<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="scream" onload="loadImage()" src="pics/cover.jpg" alt="Test">
<p>Canvas:</p>
<canvas id="myCanvas" width="854" height="480" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
window.onload = function() {
// Not used
}
/*
* Upon image load, draw image on canvas
*/
function loadImage(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 0,0, img.naturalWidth, img.naturalHeight);
console.log("Original Image W=" + img.naturalWidth +
" H=" + img.naturalHeight);
}
</script>
</body>
</html>