11521 sujets

JavaScript, DOM et API Web HTML5

Est-t-il possible de baisser la resolution d'une image?

J'ai un code qui permet d'upload une image et j'aimerais l'afficher dans un canvas mais très pixelisée, presque floue (quelque chose comme 40x40). 


function get_pixels(ctx, xa, ya, xb, yb) {
    return ctx.getImageData(xa, ya, xb, yb).data
};

function split_array(tbl, len) {
    let i = 0,
        n = tbl.length,
        tmp = [];

    for (i = 0; i < n; i += len) {
        myChunk = tbl.slice(i, i + len);
        tmp.push(myChunk);
    }

    return tmp;
}

function handleFileSelect(evt) {
    var files = evt.target.files
    for (var i = 0, f; f = files[i]; i++) {
        var reader = new FileReader()
        reader.onload = (function(_) {
            return function(e) {
                return getInfo(e.target.result)
            }
        })(f)
        reader.readAsDataURL(f)
    }
}
IMG_SIZE = 0.15

function getInfo(pic) {

    var canvas = document.getElementById('canvas'),
        ctxt = canvas.getContext('2d');

    var img = new Image;
    img.src = pic;

    let w = img.width * IMG_SIZE,
        h = img.height * IMG_SIZE;

    canvas.width = w;
    canvas.height = h

    img.onload = function() {
        // j'aimerais que l'image ici soit de mauvaise résolution
        ctxt.drawImage(img, 0, 0, w, h);

        let pixels = split_array(
            get_pixels(ctxt, 0, 0, w, h), img.width
        ).map(tbl => split_array(tbl, 3));

    }
}

const file = document.getElementById('files');

file.onchange = function(event) {
    console.log(handleFileSelect(event))
};


Merci beaucoup (:
Salut,

Tu pourrais envisager de passer ton image en très base résolution, par exemple 8X8, puis repasser en 40X40.
Modérateur
Bonjour,

Si on suppose que ton image de départ fait par exemple initialement 200x200 px, tu peux la dessiner dans ton canvas en donnant au début du code les dimensions 40x40 px à ce canvas puis en utilisant : 

let w1=200, h1=200, w2=40, h2=40;
ctxt.drawImage(img, 0, 0, w1, h1,0,0,w2,h2);

L'image dans le canvas aura alors une définition de 40x40, et la balise <canvas> pourra être éventuellement affichée plus grande, par exemple en 200x200 avec du css du genre : 
canvas {width: 200px; height: 200px;}

Il y a évidemment beaucoup d'autres manières de faire tout ça.

Exemple simplifié complet :
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1" />
    <title>Test</title>
	<style>
		#canvas {width:200px; height: 200px;}
	</style>
</head>

<body>
	<canvas id="canvas"></canvas>
	<script>
	var IMG_SIZE = 0.2;
	function getInfo(pic)
	{
		let img = new Image;
		img.onload = function()
		{
			let canvas = document.getElementById('canvas'),
        		ctxt = canvas.getContext('2d'),
        		w1 = this.width,
				h1 = this.height,
				w2 = w1 * IMG_SIZE,
				h2 = h1 * IMG_SIZE;
			canvas.width = w2;
			canvas.height = h2;
        	ctxt.drawImage(this, 0, 0, w1, h1, 0, 0, w2, h2);
		}
		img.src = pic;
	}
	getInfo("z491.jpg");
	</script>
</body>
</html>


Amicalement,
Modifié par parsimonhi (25 Aug 2022 - 16:50)
Sujet clos
Aller à