Art4/index.php

## index.php
<?php

/*
 * Glide comparison tool
 */

$params = $_GET;

// Glide V2
if (array_key_exists('glide_version', $params) && $params['glide_version'] === 'v2') {
    require dirname(__FILE__, 1).'/vendor/autoload.php';

    // Setup Glide server
    $server = \League\Glide\ServerFactory::create([
        'driver' => 'gd',
        'watermarks' => __DIR__.'/source',
        'source' => __DIR__.'/source',
        'cache' => __DIR__.'/cache/glide2/' . sha1(
            // workaround to deactivate caching
            strval(microtime())
        ) . '/',
    ]);

    // Use information from the request
    unset($params['glide_version']);
    $server->outputImage('kayaks.jpg', $params);
    exit;
}

// Glide V3
if (array_key_exists('glide_version', $params) && $params['glide_version'] === 'v3') {
    require dirname(__FILE__, 2).'/vendor/autoload.php';

    // Setup Glide server
    $server = \League\Glide\ServerFactory::create([
        'driver' => 'gd',
        'watermarks' => __DIR__.'/source',
        'source' => __DIR__.'/source',
        'cache' => __DIR__.'/cache/glide3/' . sha1(
            // workaround to deactivate caching
            strval(microtime())
        ) . '/',
    ]);

    // Use information from the request
    unset($params['glide_version']);
    $server->outputImage('kayaks.jpg', $params);
    exit;
}

// Show comparison
$paramsV2 = ['glide_version' => 'v2'] + $params;
$paramsV3 = ['glide_version' => 'v3'] + $params;

?><!DOCTYPE html>
<head>
    <style>
        .column {
            float: left;
            width: 33%;
            border: solid 1px #111;
            background-color: #ddd;
            text-align: center;
            padding-bottom: 5px;
        }
    </style>
</head>
<body>
<h1>Query: <code><?php echo urldecode(http_build_query($params)); ?></code></h1>
<div class="row">
    <div class="column">
        <h3><a href="/?<?php echo http_build_query($paramsV2); ?>">Glide V2</a></h3>
        <img id="img1" src="index.php?<?php echo http_build_query($paramsV2); ?>" alt="Image generated by Glide v2" style="height=100%">
    </div>
    <div class="column">
        <h3><a href="/?<?php echo http_build_query($paramsV3); ?>">Glide V3</a></h3>
        <img id="img2" src="index.php?<?php echo http_build_query($paramsV3); ?>" alt="Image generated by Glide v3" style="height=100%">
    </div>
    <div class="column">
        <h3 id="result">Diff</h3>
        <canvas id="cnvDiff" style="height=100%"></canvas>
    </div>
</div>
<script type="module">

import pixelmatch from 'https://esm.run/pixelmatch@5.3.0';

function compareImages() {
    var imgBefore = document.getElementById('img1');
    var imgAfter = document.getElementById('img2');
    var width = imgBefore.width;
    var height = imgBefore.height;

    var canvas = document.getElementById('cnvDiff');
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext('2d');

    var imgDataBefore = getImageData(imgBefore, width, height);
    var imgDataAfter = getImageData(imgAfter, width, height);

    var diff = new Uint8ClampedArray(width * height * 4);

    var options = {
        threshold: 0.3,
    };

    var numDiffPixels = pixelmatch(imgDataBefore, imgDataAfter, diff, width, height, options);

    var newImageData = new ImageData(diff, width, height);

    ctx.putImageData(newImageData, 0, 0);
    document.getElementById('result').textContent = 'Number of different pixels: ' + numDiffPixels;
}

function getImageData(img, width, height) {
    var canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, width, height);

    return ctx.getImageData(0, 0, width, height).data;
}

setTimeout(compareImages, 2000);

</script>
</body><?php

exit;
	<?php

	/*
	* Glide comparison tool
	*/

	$params = $_GET;

	// Glide V2
	if (array_key_exists('glide_version', $params) && $params['glide_version'] === 'v2') {
	require dirname(__FILE__, 1).'/vendor/autoload.php';

	// Setup Glide server
	$server = \League\Glide\ServerFactory::create([
	'driver' => 'gd',
	'watermarks' => __DIR__.'/source',
	'source' => __DIR__.'/source',
	'cache' => __DIR__.'/cache/glide2/' . sha1(
	// workaround to deactivate caching
	strval(microtime())
	) . '/',
	]);

	// Use information from the request
	unset($params['glide_version']);
	$server->outputImage('kayaks.jpg', $params);
	exit;
	}

	// Glide V3
	if (array_key_exists('glide_version', $params) && $params['glide_version'] === 'v3') {
	require dirname(__FILE__, 2).'/vendor/autoload.php';

	// Setup Glide server
	$server = \League\Glide\ServerFactory::create([
	'driver' => 'gd',
	'watermarks' => __DIR__.'/source',
	'source' => __DIR__.'/source',
	'cache' => __DIR__.'/cache/glide3/' . sha1(
	// workaround to deactivate caching
	strval(microtime())
	) . '/',
	]);

	// Use information from the request
	unset($params['glide_version']);
	$server->outputImage('kayaks.jpg', $params);
	exit;
	}

	// Show comparison
	$paramsV2 = ['glide_version' => 'v2'] + $params;
	$paramsV3 = ['glide_version' => 'v3'] + $params;

	?><!DOCTYPE html>
	<head>
	<style>
	.column {
	float: left;
	width: 33%;
	border: solid 1px #111;
	background-color: #ddd;
	text-align: center;
	padding-bottom: 5px;
	}
	</style>
	</head>
	<body>
	<h1>Query: <code><?php echo urldecode(http_build_query($params)); ?></code></h1>
	<div class="row">
	<div class="column">
	<h3><a href="/?<?php echo http_build_query($paramsV2); ?>">Glide V2</a></h3>
	<img id="img1" src="index.php?<?php echo http_build_query($paramsV2); ?>" alt="Image generated by Glide v2" style="height=100%">
	</div>
	<div class="column">
	<h3><a href="/?<?php echo http_build_query($paramsV3); ?>">Glide V3</a></h3>
	<img id="img2" src="index.php?<?php echo http_build_query($paramsV3); ?>" alt="Image generated by Glide v3" style="height=100%">
	</div>
	<div class="column">
	<h3 id="result">Diff</h3>
	<canvas id="cnvDiff" style="height=100%"></canvas>
	</div>
	</div>
	<script type="module">

	import pixelmatch from 'https://esm.run/pixelmatch@5.3.0';

	function compareImages() {
	var imgBefore = document.getElementById('img1');
	var imgAfter = document.getElementById('img2');
	var width = imgBefore.width;
	var height = imgBefore.height;

	var canvas = document.getElementById('cnvDiff');
	canvas.width = width;
	canvas.height = height;
	var ctx = canvas.getContext('2d');

	var imgDataBefore = getImageData(imgBefore, width, height);
	var imgDataAfter = getImageData(imgAfter, width, height);

	var diff = new Uint8ClampedArray(width * height * 4);

	var options = {
	threshold: 0.3,
	};

	var numDiffPixels = pixelmatch(imgDataBefore, imgDataAfter, diff, width, height, options);

	var newImageData = new ImageData(diff, width, height);

	ctx.putImageData(newImageData, 0, 0);
	document.getElementById('result').textContent = 'Number of different pixels: ' + numDiffPixels;
	}

	function getImageData(img, width, height) {
	var canvas = document.createElement('canvas');
	canvas.width = width;
	canvas.height = height;
	var ctx = canvas.getContext('2d');
	ctx.drawImage(img, 0, 0, width, height);

	return ctx.getImageData(0, 0, width, height).data;
	}

	setTimeout(compareImages, 2000);

	</script>
	</body><?php

	exit;