PHPで画像を分割し並べ替えて出力したものをJavaScriptで復元する方法

ある電子書籍サイトをブラウザの開発者ツールで見てみたところ、PHPでページ画像を分割し並べ替えたものを出力し、それをブラウザ側で元の状態に戻しているように見受けられた(恐らくダウンロードやスクレイピング対策)。これを再現してみたい。以下にサンプルとソースコードをメモ。

サンプル

元画像

https://taitan916.info/sample/split_restoration_img/001.png

PHPで画像を分割し並べ替えて出力

https://taitan916.info/sample/split_restoration_img/split.php

JavaScriptで元の状態に戻して出力

https://taitan916.info/sample/split_restoration_img/restoration.html

ソースコード

PHPで画像を分割し並べ替えて出力

<?php
//対象の画像
$img = '001.png';

//対象の画像サイズを取得
$img_size = getimagesize($img);
$img_width = $img_size[0];
$img_height = $img_size[1];

//新しい画像をファイルから作成
$src_img = imagecreatefrompng($img);

//TrueColorイメージを新規に作成する
$dst_img = imagecreatetruecolor($img_width, $img_height);

//分割数
$parts_count = 3;

//分割用のサイズを取得
$parts_width = floor($img_width / $parts_count);
$parts_height = floor($img_height / $parts_count);

//ループで画像を分割処理
for( $i = 0; $i < $parts_count; $i++){
    for( $ii = 0; $ii < $parts_count; $ii++){
        imagecopyresampled(
            $dst_img, 
            $src_img, 
            $parts_width * $i, 
            $parts_height * $ii, 
            $parts_width * $ii, 
            $parts_height * $i, 
            $parts_width, 
            $parts_height, 
            $parts_width, 
            $parts_height
        );
    }
}

//画像の出力
header('Content-Type: image/png');
imagepng($dst_img);

JavaScriptで元の状態に戻して出力

<canvas id="canvas"></canvas>

<script type="text/javascript">
const canvas = document.getElementById(`canvas`);
if( canvas.getContext ){
    const ctx = canvas.getContext(`2d`);

    const img = new Image();

    //画像の取得
    img.src = `./split.php`;

    img.onload = function(){

        //canvasのwidthとheightを指定
        canvas.setAttribute(`width`, img.width.toString());
        canvas.setAttribute(`height`, img.height.toString());

        //分割数
        const parts_count = 3;

        //分割用のサイズを取得
        const parts_width = Math.round(img.width / parts_count);
        const parts_height = Math.round(img.height / parts_count);
        console.log(parts_width);

        //ループで画像を復元処理
        for(let i = 0; i < parts_count; i++){
            for(let ii = 0; ii < parts_count; ii++){
                ctx.drawImage(
                    img, 
                    parts_width * i, 
                    parts_height * ii, 
                    parts_width, 
                    parts_height, 
                    parts_width * ii, 
                    parts_height * i, 
                    parts_width, 
                    parts_height
                );
            }
        }
    }
}
</script>