2

Tengo un canvas de 800x400, estoy pintando sobre ella una imágenes de dimensiones muy pequeña y pixeladas (5x5, 10x5, 7x5, 5x7, etc). Al mandarlas al canvas haciendo escalados de [2, 2], [4, 4] etc. No se hace de forma lineal y no conserva la claridad de los pixeles. ¿Cómo se puede lograr esto?

var imagen = document.getElementById("img");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

ctx.drawImage(imagen, 10, 10);
ctx.scale(8,8);
ctx.drawImage(imagen, 10, 10);
canvas{
	border: 5px solid black;
	background: #FFF;
	width: 800px;
	height: 400px;
}
<img id="img" src="https://minecraft-statistic.net/face/JRMUS.png" hidden >
<canvas id="canvas" width="800" height="400" ></canvas>

1
  • ¿Podrías poner un ejemplo reproducible de lo que tienes hasta ahora? el 17 feb. 2018 a las 21:45

1 respuesta 1

0

Para esto necesitas desactivar el imageSmoothingEnabled porque por defecto el canvas prueba alisar y suavizar las imágenes.

var imagen = document.getElementById("img");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

ctx.msImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;

ctx.drawImage(imagen, 10, 10);
ctx.scale(8,8);
ctx.drawImage(imagen, 10, 10);
canvas{
	border: 5px solid black;
	background: #FFF;
	width: 800px;
	height: 400px;
}
<canvas id="canvas" width="800" height="400" >
<img id="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAsUlEQVQYlX2MMQrCQBBFX2JYNGC8gJ1EGzshh9ATpPIKIrYewEbE0i5FsLOztkxlFRsL8QzZhUQXJRZLtnRgmD/Dm+dMQ7fmT7lNOB62djYN4ExDt5ZvA50Tc5zNl3Z3AdIs5xFHVvuII9IsN4bisqvRbQBu9ysA49HEkOKFp8sC4RlgOOhTSWVNuizwKqkgAOH32OxPAKxXfXRZUEmF80wWdUt4dIIuwu/Zz0oqvvrDD0I/QTF2N0bTAAAAAElFTkSuQmCC" />
</canvas>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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