JavaScriptにて画像をフルスクリーン表示する方法

JavaScriptにて画像をクリックするとフルスクリーン表示させたかった。ただの画像拡大ならLightbox系ライブラリを導入するが、フルスクリーン表示ということだったので他のライブラリを検討しようかと思いきや、Web APIで簡単に対応できるみたい。以下にサンプルとソースコードをメモ。

サンプル

https://taitan916.info/sample/fullscreen/

画像をクリックするとフルスクリーン表示、再度クリックすると通常表示に戻る筈。

対応方法

ソースコード

<style>
.fullscreen{
    display: flex;
}
img{
    width: 200px;
    height: 200px;
    margin: 10px;
    cursor: pointer;
}
</style>
<div class="fullscreen">
    <img src="/sample/assets/img/001.jpg" class="img">
    <img src="/sample/assets/img/002.jpg" class="img">
    <img src="/sample/assets/img/003.jpg" class="img">
</div>
<script>
document.querySelector('.fullscreen').addEventListener(`click`, function(e){
    if( e.target.matches('.img') ){
        if( document.fullscreenElement === null ){
            e.target.requestFullscreen();
        }else{
            document.exitFullscreen();
        }
    }
});
</script>

注意点

Fullscreen APIについてChrome / Edge / Firefoxは対応しており、safariは非対応な点に注意。

リファレンス

Fullscreen API

https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

Document: fullscreenElement property

https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenElement

Element: requestFullscreen() method

https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen

Document: exitFullscreen() method

https://developer.mozilla.org/en-US/docs/Web/API/Document/exitFullscreen