0

Me preguto si es posible conservar la calidad de la imagen original cuando esta es copiada en un canvas. Las siguinetes imagenes son un ejemplo de lo que digo.

En el "img" (foto de arriba) se ve con la resolución original mientras que en el canvas (foto de abajo) se ve que ha perdido mucha calidad.

introducir la descripción de la imagen aquí

Este es mi código HTML:

<input id="file" type="file" >      
<img id="result">
<canvas class="" id="can1"></canvas>

Mi código JavaScript

function dibujar_img_en_canvas(canvas, width, height, src)
{
    var img = new Image();
    img.src = src;
    img.width=width;
    img.height=height;

    canvas.width=img.width;
    canvas.height=img.height;   

    var pCtx = canvas.getContext("2d");     
    pCtx.drawImage(img, 0, 0,width, height);
}


function redimensionar_img(img, container)
{
    var height=container.height();
    var width=img.width()*height/img.height();
    img.css("height",height);
    img.css("width",width); 
    dibujar_img_en_canvas($("#can1")[0], width, height,  $("#result").attr("src"));
}


$("#file").change(function(e)
{
    var img = e.target.files[0];
    var url = window.URL || window.webkitURL || window.mozURL;
    img.src = url.createObjectURL(img);
    $("#result").attr("src",img.src);   
});


$("#result").on("load", function(e)
{
    redimensionar_img($(this), $(".img_container"));    
});

Aquí dejo un enlace de este mismo foro (en inglés) de un truco para solucionar este problema. Tengo que decir que a mi no me ha funconado probablemente porque estoy usando imagenes demasiado pequeñas y el truco requiere tener imagenes bastante grandes, pero por lo que he podido leer parace que a mucha gente si que les funciona!!

https://stackoverflow.com/questions/17861447/html5-canvas-drawimage-how-to-apply-antialiasing

1 respuesta 1

3

El img se ve bien porque lo redimensionas con css que utiliza un algoritmo para maximizar la calidad.

Tu problema esta en esta linea

pCtx.drawImage(img, 0, 0,width, height);

Generalmente los navegadores usan interpolación lineal para redimensionar en el canvas ya que es mas rápida que otros algoritmos. Tenes varias soluciones:

  1. Implementar el algoritmo de redimensionamiento: te va a llevar tiempo y va a ser lento
  2. Usar una librería: por ejemplo pica https://github.com/nodeca/pica
  3. Usar un viejo truco: consiste en redimensionar la imagen en varios pasos para lograr que la interpolación lineal alcance una calidad similar a la bi-cubica. La regla es que no tenes que reducir el tamaño a menos de la mitad. Es por esto que si tenes una imagen muy grande lo vas a tener que hacer en varios pasos.
1
  • Hola, gracias por contestar!! Miraré la libreria pica a ver que tal... Porque no me veo capáz de hacer mi propio algoritmo de redimensionamiento. He estado intentando hacer lo del truco ese que dices (antialiasing) guiandome por un post de este foro en inglés (pondré el enlace ahi arriba) pero no hay manera de conservar la calidad (tal vez sea porque estoy probando con imagenes demasiado pequeñas y solo hace uno de los pasos)... En fin, miraré esa libreria!! Muchas gracias!! Commented el 25 ene. 2019 a las 2:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.