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
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
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 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>
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager