Pixel noir sur image

**lauretflo** · 18/01/2015, 13h53

Bonjour, petite question,

existe-t-il une fonction (ou une autre solution) pour mettre des pixels noir sur les image, exemple : http://zurb.com/playground/playgroun...n/captions.jpg

**ABCIWEB** · 18/01/2015, 23h04

Avec php tu peux regarder vers les fonctions de la bibliothèque gd. Toujours avec php il y a aussi la solution ImageMagick mais cela demande une configuration serveur qui n'est quasiment jamais activée sur les serveurs mutualisés.
A vrai dire je ne connais pas suffisamment ces lib pour savoir si tu pourras faire exactement ce que tu veux ni si c'est plus ou moins simple. Ce sont les deux seules possibilités que je connaisse avec php.

Eventuellement suivant les besoins tu pourrais peut-être t'intéresser au canvas html.

Le plus facile serait certainement d'utiliser un logiciel photo pour faire le traitement avant de charger les photos sur le serveur.

**JérémieL** · 20/01/2015, 15h11

Bonjour,

En effet, il serait préférable de pré-calculer cette image pour économiser des ressources.
Néanmoins, voici une façon de générer l'image de façon dynamique côté client (puisque tu n'as pas donné d'infos sur un éventuel serveur) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
	<head>
		<title>Black pixels</title>
	</head>
	<body>
		<img id="myImage" src="image.png" />
	</body>
 
	<script>
        function setPixel(imageData, x, y, r, g, b, a) {
                idx = (x + y * imageData.width) * 4;
                imageData.data[idx + 0] = r;
                imageData.data[idx + 1] = g;
                imageData.data[idx + 2] = b;
                imageData.data[idx + 3] = a;
        }
 
        document.addEventListener('DOMContentLoaded', function(event) {
                var image = document.getElementById('myImage');
 
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                canvas.width = image.naturalWidth;
                canvas.height = image.naturalHeight;
 
                // Draw image in the canvas
                ctx.drawImage(image , 0, 0);
 
                // Get pixel data
                var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
 
                // Change image data
                var x, y, lenX, lenY;
                for (x = 0, lenX = canvas.width; x < lenX; x += 3) {
                        for (y = 0, lenY = canvas.height; y < lenY; y += 3) {
                                setPixel(imageData, x, y, 0, 0, 0, 255);
                        }
                }
 
                // Set data in the canvas
                ctx.putImageData(imageData, 0, 0);
 
                // Draw canvas in the image
                image.src = canvas.toDataURL();
        });
        </script>
</html>

Pixel noir sur image

Conception Web

Discussions similaires

Partager

Partager