La imagen en el lienzo se dibuja más grande que el tamaño original: javascript, jquery, html, html5, html5-canvas

En carga de mi imagen yo:

var img = new Image();
img.src = e.target.result;
var canvas = $("#test-canvas")[0];
$("#test-canvas").width(img.width);
$("#test-canvas").height(img.height);
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);

Pero la imagen se dibuja más grande que su tamaño original. He intentado algunas imágenes, el mismo problema.

¿Cuál es la solución?

Respuestas

jQuery cambiará el tamaño del elemento a través de CSS, que no cambiará realmente la altura y el ancho internos del lienzo. Esto cambiará el tamaño del elemento del lienzo real.

var canvas = document.GetElementById("test-canvas");
canvas.width  = img.width;
canvas.height = img.height;

jsFiddlehttp://jsfiddle.net/L0drfwgL/) simplemente muéstrelo dibujándolo a escala y redimensionando el elemento del lienzo en sí.

Parece que estás sacando la imagen de unElemento de imagen en carga. Puede usar el src del elemento de imagen en lugar de volver a crear un objeto de imagen y luego obtener el ancho / alto de la imagen del elemento para dibujar la imagen en el lienzo.

<script>
$(document).ready(function(){
$("#testImg").on("load",function(){
var image = document.getElementById("testImg");
var canvas = document.getElementById("test-canvas");
canvas.width = image.width;
canvas.height = image.height;
var ctx=canvas.getContext("2d");
ctx.drawImage(image,0,0);
})
});

</script>