レトロPC画像をdot by dotで

モダンなブラウザでは画像のサイズを指定しても元のピクセルのままで表示されないことがあります
特にレトロPCの画像ではドットタイルやスキャンラインだったりでモアレが出たりします

<img src="">または<img src="" width=640>の場合
現在のブラウザではで表示されています

多くの環境でdot by dotで表示させたい場合はJavaScriptを使って対処します
<script>
window.addEventListener("DOMContentLoaded", function () {
    const imgs = document.querySelectorAll('img');
    imgs.forEach( img => {
        if ( img.getAttribute('width') != null ) {
            img.style.width = `${img.width / window.devicePixelRatio}px`;
            img.style.height = 'auto';
        }
    });
});
</script>

これで<img src="">でwidthを設定しているものに対して意図したサイズで表示されるようになります
widthがなければブラウザ依存になります

JavaScript+<img src="" width=640>の場合
640×400で表示されていると思います
2Kや4Kといったディスプレイでは小さすぎるかもしれません

<img src="" width=>であってもブラウザに依存させたいときもあればcssを使いclass=""で使い分けをします
<style>
.img.botbydot {
    height: auto;
}
</style>

<script>
window.addEventListener("DOMContentLoaded", function () {
    const elements = document.getElementsByClassName('dotbydot');
    for(let i=0; i < elements.length; i++ ) {
        const width = elements[i].getAttribute('width');
        if ( width != null ) {
            elements[i].style.width = `${parseFloat(width) / window.devicePixelRatio}px`;
        }
    }
});
</script>

<img src="" width=300>の場合(ブラウザ依存)

<img src="" width=300 class="dotbydot">の場合
レトロPC画像に限らず期待するサイズで表示したいときにも使えます

[PR]

【中古】バッジ・ピンズ 桜ねね 「NEW GAME! カンバッジ vol.2」

NEW GAME! ぷっくりバッジコレクション 桜ねね グッズ

【新品】NEW GAME 娘TYPE-9月号- B2タペストリー 涼風青葉 桜ねね