Pixel noir sur image

Version imprimable

18/01/2015, 13h53
lauretflo

Pixel noir sur image

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
18/01/2015, 23h04
ABCIWEB

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.

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:

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>