web-dev-qa-db-fra.com

Exemples d'images pour le code et les questions et réponses sur le balisage

Lors de la préparation d'un MCVE / SSCCE qui implique des images, il est utile d'avoir directement accès aux images.

Les types d'images qui couvriraient la plupart des questions sont: les petites images en plusieurs couleurs ou formes, les GIF animés avec/sans transparence, les JPEG qui sont des `` paires '' d'images et peuvent être utilisés dans les transitions d'images, les ensembles de carreaux, les feuilles Sprite ..

Existe-t-il des petites images (sous 30 Ko), sur site, sans licence et libres de droits auxquelles nous pouvons créer un lien direct pour ces types d'exemples?

javajavascriptcssimage
127
Andrew Thompson

Voici quelques exemples d'images à usage courant, principalement à partir de réponses existantes sur SO.

Icônes

Formes géométriques simples généré en utilisant Java comme initialement vu dans cette réponse . Il comprend un Java = interface basée qui définit les URL et les rend faciles d'accès.

Détails: 32x32 pixels PNG (4 couleurs x 5 formes) avec une transparence partielle (le long des bords).

Catégories:pngicônes

 
 

Feuilles de sprite

Pièces d'échecs comme vu à l'origine sur cette réponse qui comprend 2 autres ensembles de Sprite (même image dans des couleurs différentes).

Détails: 384x128 px (chaque Sprite 64x64 px) PNG avec transparence partielle.

Catégories:pngSprite-sheeticônes

Animé

GIF est le seul format d'image qui prend en charge l'animation. Voici quelques exemples.

Catégories:gifgif animé

BG solide

Bordure en pointillés animée comme on le voit dans cette réponse .

Détails: 100x30 px avec BG rempli (pas de transparence)

Zooming stars comme on le voit dans cette réponse , développé à l'origine comme une "capture d'écran" d'un économiseur d'écran.

Détails: 160x120 px avec BG rempli (pas de transparence)

Eau animée comme on le voit dans cette réponse à Animation des tuiles dans mon je .

Détails: 60x60 px avec BG rempli (pas de transparence)

BG transparent

Animation orbitale, initialement développé pour 1.1C . Les orbites des planètes "intérieures" (de Mercure à Jupiter, avec une orbite supplémentaire représentée dans l'épaisseur de la ceinture d'astéroïdes). Mieux sur un BG sombre.

Détails: GIFs animés 450x450 & 150x150 px avec transparence.

Des photos

Sunrise & moonset sur le CBD de Sydney, Australie
Coucher de soleil et Vénus au-dessus d'un télescope sur le mont Stromlo, près de Canberra, Australie.

Catégories:jpegdiaporama + Transitions d'image

Détails: 480x320 px JPEG x 4. (affiché ici à 1/2 taille.)


Panorama à l'aube à travers la banlieue sud-est de Sydney.

Catégories:jpgpanoramasanimation (défilement)

Détails: 1474x436 px JPEG.

Dawn Panorama

Carrelage

Cette carte Mercator de la Terre peut être affichée en mosaïque à gauche/à droite. Initialement vu sur cette réponse . La réponse comprend également une deuxième version de l'image qui montre une ligne semi-transparente pour l'équateur (qui n'est pas au centre, mais nettement en dessous).

Détails: 640x316 px (ajoutez 44 px en bas à l'équateur central) PNG avec BG transparent.

Catégories:pngtuileanimation (défilement)

Pointe

Pour obtenir les URL des images, vous pouvez `` cliquer sur le contexte '' sur l'image comme vu dans le navigateur et soit:

  • Affichez les propriétés. L'URL peut être copiée à partir de la boîte de dialogue qui apparaît.
  • Voir l'image. Copiez l'URL de la barre d'adresse du navigateur.

Alternativement:

  • Utilisez le navigateur "show source" et copiez-le à partir du HTML.
  • Pour ceux qui ont assez de rep. (100+, pour modifier une réponse Wiki de la communauté), allez à modifier la réponse et tirez l'URL du texte.

Code

Ci-dessous se trouve une classe Java qui divise la feuille Sprite de la pièce d'échecs, appropriée pour coller dans un MCVE:

import Java.awt.image.*;
import javax.imageio.*;
import Java.net.*;
import Java.io.*;
import Java.util.*;

public final class ChessSprites {
    private ChessSprites() {}
    public static final int SIZE = 64;
    public static final BufferedImage SHEET;
    static {
        try {
            // see https://stackoverflow.com/a/19209651/2891664
            SHEET = ImageIO.read(new URL("https://i.stack.imgur.com/memI0.png"));
        } catch (IOException x) {
            throw new UncheckedIOException(x);
        }
    }
    public static final BufferedImage GOLD_QUEEN    = SHEET.getSubimage(0 * SIZE, 0,    SIZE, SIZE);
    public static final BufferedImage SILVER_QUEEN  = SHEET.getSubimage(0 * SIZE, SIZE, SIZE, SIZE);
    public static final BufferedImage GOLD_KING     = SHEET.getSubimage(1 * SIZE, 0,    SIZE, SIZE);
    public static final BufferedImage SILVER_KING   = SHEET.getSubimage(1 * SIZE, SIZE, SIZE, SIZE);
    public static final BufferedImage GOLD_ROOK     = SHEET.getSubimage(2 * SIZE, 0,    SIZE, SIZE);
    public static final BufferedImage SILVER_ROOK   = SHEET.getSubimage(2 * SIZE, SIZE, SIZE, SIZE);
    public static final BufferedImage GOLD_KNIGHT   = SHEET.getSubimage(3 * SIZE, 0,    SIZE, SIZE);
    public static final BufferedImage SILVER_KNIGHT = SHEET.getSubimage(3 * SIZE, SIZE, SIZE, SIZE);
    public static final BufferedImage GOLD_BISHOP   = SHEET.getSubimage(4 * SIZE, 0,    SIZE, SIZE);
    public static final BufferedImage SILVER_BISHOP = SHEET.getSubimage(4 * SIZE, SIZE, SIZE, SIZE);
    public static final BufferedImage GOLD_PAWN     = SHEET.getSubimage(5 * SIZE, 0,    SIZE, SIZE);
    public static final BufferedImage SILVER_PAWN   = SHEET.getSubimage(5 * SIZE, SIZE, SIZE, SIZE);
    public static final List<BufferedImage> SPRITES =
        Collections.unmodifiableList(Arrays.asList(GOLD_QUEEN,  SILVER_QUEEN,
                                                   GOLD_KING,   SILVER_KING,
                                                   GOLD_ROOK,   SILVER_ROOK,
                                                   GOLD_KNIGHT, SILVER_KNIGHT,
                                                   GOLD_BISHOP, SILVER_BISHOP,
                                                   GOLD_PAWN,   SILVER_PAWN));
}
70
Andrew Thompson