Bei einem gegebenen Element ist es möglich, das Bild nur mit CSS zu pixeln und/oder keine Leinwand zu verwenden. Ich habe Dinge wie die crisp edges Funktion gesehen (aber das ist nur für Bilder, die skaliert sind) und viele Canvas-Optionen, aber ich hoffe auf einen besseren Weg.Ist es möglich, ein Bild ohne Leinwand zu verpixeln?
Sie können einen pixeligen Effekt erzielen, indem Sie die CSS-Regel image-rendering: pixelated; verwenden und ein Bild skalieren - see this article.
Also, wenn ich das Bild in seiner natürlichen Größe behalten möchte, was würden Sie vorschlagen? Skalieren Sie es, wenden Sie das 'image-rendering' an und schneiden Sie es dann auf seine ursprüngliche Größe auf? Oder gibt es einen leichteren Weg? –
Das würde funktionieren, obwohl Sie einen Teil des Bildes abschneiden würden (obwohl es pixelig ist). Sie können auch versuchen, das Quellbild in einer kleineren Größe zu speichern, als Sie es tatsächlich auf Ihrer Website benötigen, "image-rendering: pixelate;" anwenden und es auf Ihre gewünschte Größe skalieren. – Donald
Ja, das ist das Problem, ich habe keine Kontrolle über die Bilder, die angezeigt werden, also kann ich es nicht in einer kleineren Größe speichern. –
Dies scheint keine Anfrage für eine Ressource zu sein. Es fragt nach CSS-Techniken. – isherwood
Die Frage ist absolut gültig. 'image-rendering: pixelated;' https://developer.mozilla.org/en/docs/Web/CSS/image-rendering – Pogrindis