La nouvelle disposition de YouTube a ajouté un fond de bruit aléatoire que j'aime beaucoup, ayant vu presque exactement le même effet sur d'autres sites, alors je prévois d'utiliser la même technique dans mes prototypes de messagerie Web, ou du moins à cela " Truc "dans ma boîte à outils pour une utilisation future.
L'image est comme celle-ci (prise de http: // g.raphaeljs.com/barchart.html ): p>
p>
Maintenant YouTube accomplit le même effet (gênant) même en incorporant l'image dans le code source: p>
(sur la page principale de YouTube, cliquez sur l'arrière-plan pour l'afficher, puis cliquez avec le bouton droit de la souris sur L'image et "Propriétés d'image d'affichage" [FFOX]): P>
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJUAAACVCAAAAAB0....lotsofdata
4 Réponses :
Vous pouvez utiliser CSS pour afficher cette image:
document.getElementByID("someimageselector").background = 'white url(data:image/png....';
Votre réponse a travaillé et j'ai aimé l'astuce. Juste une dernière chance: est-ce possible / bonne pratique d'algorithmiquement générer des données PNG à l'aide de JavaScript?
Il est possible, mais pour les utilisateurs qui ont désactivé JavaScript, vous devriez probablement avoir une image de sauvegarde. Dans ce cas particulier, JavaScript n'est pas nécessaire. Il est probablement préférable de générer une image une fois, puis de l'enregistrer (si possible).
Pour générer un côté client de l'image, je vous suggère de jeter un coup d'œil à l'élément de toile HTML5.
Vous pouvez dessiner sur une toile avec JavaScript (même si l'élément de toile est caché), et générez donc tout ce que vous voulez (y compris une simple carreau de bruit).
ressource pour apprendre la toile dessin: https://developer.mozilla.org/fr/Drawing_graphics_with_canvas
Après cela, vous pouvez exporter votre toile comme URL avec la méthode ToDatauf (une chaîne comme "Data: image / png; base64 ....") qui est interprétée par des navigateurs comme une URL traditionnelle pour une image, de sorte que vous peut la définir comme fond CSS pour votre élément de corps.
Avertissement 1: Canvas est pris en charge par tous les navigateurs modernes et vous pouvez l'imiter sur IE avec explorercanvas - mais je ne sais pas si ExplorerCanvas prend en charge .Todataurl ()
Avertissement 2: La toile dépend de la résolution, alors je vous suggère de générer un petit tuile (32 * 32 ou 64 * 64) et répétez-le
EDIT: Un exemple de fond carrelé: http://jsfiddle.net/ SFZPC / 12 /
EDIT 2: Un exemple terminé avec un arrière-plan bruyant: http: // jsfiddle .NET / SFZPC / 14 /
Mais comment faire du bruit visuel? C'est beaucoup plus difficile que de faire un cercle parfait :)
Bien que je ne connaisse pas encore comment effectuer les étapes données (un peu de code de travail serait bien), c'est ce que je pensais quand j'ai demandé, générer (et éventuellement la mise en cache) un petit tuile carré. La génération de bruit visuelle est un algorithme indépendant distinct et indépendant de la langue, alors quand j'entiens un bon, je vais le mettre en œuvre à l'aide de toile. De plus, je sympathise phylosophiquement avec le flux de travail sur toile. Mais cela est discutable, bien sûr.
FYI: base64 est des données binaires représentées comme une chaîne. Très probablement, l'image d'origine est toujours sortie de Photoshop et a ensuite été codée par la base64. Cette technique aide à avoir moins de requêtes HTTP par vue de page, car les données d'image réelles peuvent être enregistrées et mise en cache dans le document CSS ou HTML.
Il y a deux bibliothèques de plug-in jquery qui font exactement ce que vous recherchez: bronzegen et
Hmm, vous devez regarder de très près, mais l'image est en effet pas une couleur grise solide.
Oui, mettez-le sur un modèle de carrelage et vous vous retrouvez avec quelque chose qui semble "papier" texture naturelle. Je me demande si le même effet pourrait être obtenu avec une place beaucoup plus petite.
L'algorithmique générant l'image semble être une overkill. Vous en avez besoin pour être différent sur chaque page de page ou quelque chose?
Voici une webApp que vous pouvez utiliser pour convertir vos propres images en une représentation de base64. greywyvern.com/code/php/binary2base64 Vous pouvez le ré-implémenter dans JavaScript facilement assez, mais pourquoi déranger?
Ajoutez mon nom à la liste des personnes qui pensent que c'est une mauvaise idée. La génération d'une image PNG est une tâche intensive de la CPU et ne doit pas être effectuée sur chaque charge de page. Il devrait être fait une fois puis enregistré en tant que fichier PNG (mieux pour la vitesse de chargement de la page sur une connexion lente, en particulier avec de grandes images), ou incorporé avec base64 (meilleure pour la vitesse de chargement de la page sur une connexion rapide , surtout avec de petites images).