subir - javascript mostrar imagen

Dibujo de imagen en lienzo: más grande que real

Question

Quiero dibujar una imagen de un archivo jpg en lienzo. Mi código:

var canvas = document.getElementById(''my_canvas'');
  var ctx = canvas.getContext(''2d'');
  var imageObj = new Image();

  imageObj.onload = function() {
    ctx.drawImage(imageObj, 0, 0);
  };
  imageObj.src = ''img/my_image.jpg'';

El problema es que la imagen en el lienzo es mucho más grande que en el archivo. ¿Por qué? ¿Cómo puedo dibujar la imagen en tamaño real?

ACTUALIZACIÓN: resultado: http://jsfiddle.net/AJK2t/

Answer 1

Este es tu problema:

<canvas style="width: 700px; height: 400px;" id="konf"></canvas>

Está configurando el tamaño visual de su lienzo, pero no el número de píxeles . En consecuencia, el navegador está escalando los píxeles del lienzo hacia arriba.

La solución más simple es:

<canvas width="700" height="400" id="konf"></canvas>

Los parámetros de width y height controlan la cantidad de píxeles en el lienzo. Sin estilo CSS, el tamaño visual predeterminado del lienzo también será de este tamaño, lo que dará como resultado un píxel de píxel por píxel de pantalla (suponiendo que no haya acercado el navegador web).

Copiar / pegar de mi respuesta a una pregunta relacionada :

Piense en lo que sucede si tiene un JPG de 32x32 (tiene exactamente 1024 píxeles en total) pero especifica a través de CSS que debe aparecer como width:800px; height:16px width:800px; height:16px . Lo mismo se aplica a HTML Canvas:

• Los atributos de width y height del elemento de lienzo en sí deciden cuántos píxeles puede dibujar. Si no especifica el alto y el ancho del elemento canvas, entonces según las especificaciones :
  "el atributo de ancho predeterminado es 300 y el atributo de alto predeterminado es 150."

• Las propiedades CSS de width y height controlan el tamaño que el elemento muestra en la pantalla. Si las dimensiones CSS no están establecidas, el tamaño intrínseco del elemento se usa para el diseño.

Si especifica en CSS un tamaño diferente de las dimensiones reales del lienzo, el navegador debe estirarlo y aplastarlo según sea necesario para su visualización. Puede ver un ejemplo de esto aquí: http://jsfiddle.net/9bheb/5/

Answer 2

Para mostrar una secuencia MJPEG en un lienzo (u otra cosa) sin definir el ancho y el alto del lienzo en HTML, solo uso CSS para obtener un lienzo receptivo y que se ajuste a la página, lo uso:

//get size from CSS
var sizeWidth = context.canvas.clientWidth;   
var sizeHeight = context.canvas.clientHeight;   
//here the solution, it replaces HTML width="" height=""
canvas.width = sizeWidth;
canvas.height = sizeHeight;
...........
context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height, 0, 0, sizeWidth, sizeHeight);

La imagen está completamente contenida en el lienzo sea cual sea el tamaño del lienzo (la tasa entre altura y ancho no se mantiene, pero no importa, una height:auto; en css puede arreglar eso).

Et voilà!

Answer 3

Ejemplo de trabajo : http://jsfiddle.net/jzF5R/

Para escalar una imagen, debe proporcionar el ancho y alto a escala que desea ctx.drawImage() :

// x, y, width, height
ctx.drawImage(imageObj, 0, 0, 100, 50);

Mantener el tamaño de la imagen original:

ctx.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);

Evite que el lienzo se desborde de la página:

ctx.canvas.width = document.body.clientWidth;

Puede escalar fácilmente el ancho y la altura de la imagen al 70% del original:

ctx.drawImage(imageObj, 0, 0, imageObj.width * 0.7, imageObj.height * 0.7);