Imagen-Rendering, pero haciendo imágenes MÁS pixeladas?

Necesito ilustrarle a un usuario de mi sitio web que cuando su imagen se imprima en un canvas perderá calidad a medida que crezca. En la forma de hacerlo, se reduce deliberadamente la resolución de la imagen que proporcionan en la pantalla, con un descargo de responsabilidad de por qué será así.

Escuché acerca de la representación de imágenes, pero todo el ejemplo que vi, comprensiblemente, fue sobre cómo mejorar la imagen en todos los navegadores al boost el tamaño de las imágenes. ¿Hay alguna forma de mantener la imagen del mismo tamaño pero disminuir la resolución? Felizmente usará css, JavaScript y PHP.

Puede usar la API de transformación de imágenes de Cloudinary

Es una API que devuelve imágenes transformadas de la manera que usted las quiere. Teniendo en cuenta que no necesitas nada especial ni un gran ancho de banda, esto podría ser adecuado para ti.

He aquí cómo usarlo:

  • Crea una cuenta nueva
  • Subir una imagen
  • Acceda a su imagen de la siguiente manera: http://res.cloudinary.com/demo/image/upload/e_pixelate:4/sample.jpg
  • demo es su “cubo”, la image es un directorio de un recurso de imagen, e_pixelate:4 es el nombre del efecto y su parámetro, y finalmente sample.jpg es el nombre de archivo de una imagen.

Usando la API canvas2d, puedes hacerlo en navegadores IE10 + gracias al parámetro imageSmoothingEnabled :

 var c = document.getElementById('c'); var ctx = c.getContext('2d'); var img = document.getElementById('original'); img.src = 'http://lorempixel.com/200/200'; img.onload = function() { var scale = .1; //scale down your context matrix ctx.scale(scale, scale) // remove the smoothing ctx.mozImageSmoothingEnabled = false; ctx.webkitImageSmoothingEnabled = false; ctx.msImageSmoothingEnabled = false; ctx.imageSmoothingEnabled = false; // draw a first time your image ctx.drawImage(img, 0, 0, img.width, img.height); // reset your context's transformation matrix ctx.setTransform(1, 0, 0, 1, 0, 0); // draw your canvas on itself using the cropping features of drawImage ctx.drawImage(c, 0, 0, img.width * scale, img.height * scale, 0, 0, img.width, img.height) };