pixel-perfect.js v1.2.0
pixel-perfect.js
Display images pixel-perfect
Note:
It looks like image-resolution: snap
CSS
is supposed to do exactly what this library does. As if July 25th 2022 no browser has implemented it.
How to use
In your image tags that you want to be pixel perfect give them
the class pixel-perfect
and set a CSS size that is some
integer multiple of your image.
Example:
<img src="100x150.png" class="pixel-perfect" style="width: 400px; height 600px">
Here we want the image displayed 4x it's original size. The reason to do it this way is so if the user has JavaScript disabled they'll still a size that matches your design.
Define your pixel-perfect
class as follows
.pixel-perfect {
image-rendering: pixelated;
image-rendering: crisp-edges;
}
Include this script on your page
<script type="module" src="pixel-perfect.js"></script>;
Done!
Canvas
For <canvas>
set both a width and height and a CSS
width and height. Example:
<canvas width="200" height="100" class="pixel-perfect" style="width: 400px; height: 200px;"></canvas>
Note: as it says on the main page, this solution only works for designs that allow the canvas to change its display size relative to other elements. For example the canvas above is 200x100 pixels. To stay pixel perfect it can not go smaller, and going larger it must change to integer multiples like 400x200, 600x300, 800x400, etc...
If you have a canvas that fits a container or the entire page or that's required to have a fixed size then you need a different solution.
Special use cases
You can also import pixel-perfect.js as an es6 module.
import {makePixelPerfect} from './pixel-perfect.js';
You can then call makePixelPerfect
on any <img>
or <canvas>
element.
For example:
import {makePixelPerfect} from './pixel-perfect.js';
function makeAllPixelPerfect() {
document.querySelectorAll(".pixel-perfect").forEach(makePixelPerfect);
}
window.addEventListener('resize', makeAllPixelPerfect);
makeAllPixelPerfect();
License
MIT