DEV Community: Sam

Subtract / Composite one image from another in PHP (ImageMagick vs GDImage)

Sam — Wed, 14 Dec 2022 04:53:54 +0000

A new day, a new riddle to solve! Today’s task involves two images: one background image (in any size) and one smaller puzzle piece (provided as a PNG with an alpha channel). The goal? To place the puzzle piece randomly on the background. Simple, right? But wait — here’s where the fun begins. You need to generate two new images:

The background image where the puzzle piece has been "cut out" or darkened.
The puzzle piece, now containing the corresponding part of the background image it covered.

Sounds easy enough, right? Let’s dive in!

Now, for those familiar with ImageMagick, this won't be a major challenge. But since PHP was the tool of choice for this particular project (yes, PHP, the nostalgic knight of the web), I decided to add a fallback using GDImage. Yes, GD. The "I can barely keep up with PNG transparency" library.

Let's have some fun with this.

1. The Easy ImageMagick (Imagick) Way

Let’s kick things off with ImageMagick. If you know Imagick, you know it’s a dream. Just a few lines of code, and you’re done. That’s how it feels, anyway. This function accepts four arguments: the background and puzzle piece image files, as well as the desired output width and height.

function imagickPuzzle(
  string $imageFile, 
  string $puzzleFile, 
  int $outputWidth, 
  int $outputHeight
): array {
    list($imageWidth, $imageHeight) = getimagesize($imageFile);
    list($puzzleWidth, $puzzleHeight) = getimagesize($puzzleFile);

    // Get random position
    $positionX = rand(20, $outputWidth - $puzzleWidth - 20);
    $positionY = rand(20, $outputHeight - $puzzleHeight - 20);

    // Create main image
    $image = new \Imagick($imageFile);
    $image->setImageFormat('png');

    // Downsize main image to output size
    $imageRatio = $imageWidth / $imageHeight;
    $fixedImageHeight = intval(floor($outputWidth / $imageRatio));
    $image->resizeImage(
        $outputWidth, 
        $fixedImageHeight, 
        \Imagick::FILTER_POINT, 
        0
    );
    $image->cropImage($outputWidth, $outputHeight, 0, 0);

    // Create and composite puzzle image
    $puzzle = new \Imagick($puzzleFile);
    $puzzle->compositeImage(
        $image, 
        \Imagick::COMPOSITE_ATOP, 
        -$positionX, 
        -$positionY
    );

    // Extract and composite puzzle from main image
    $extractPuzzle = new \Imagick($puzzleFile);
    $extractPuzzle->transparentPaintImage('black', 0.8, 100, false);
    $drawer = new \ImagickDraw();
    $drawer->composite(
        \Imagick::COMPOSITE_DARKEN, 
        $positionX, 
        $positionY, 
        $puzzleWidth, 
        $puzzleHeight, 
        $extractPuzzle
    );
    $image->drawImage($drawer);

    // Return Blobs
    return [
        'image' => $image->getImageBlob(),
        'puzzle' => $puzzle->getImageBlob()
    ];
}

How this Works

1. Dimensions - First, we get the dimensions of the background and puzzle images. Nothing fancy here — just like measuring how big your coffee mug is before programming.

list($imageWidth, $imageHeight) = getimagesize($imageFile);
list($puzzleWidth, $puzzleHeight) = getimagesize($puzzleFile);

2. Random Position - We then randomly calculate the X and Y positions for the puzzle piece. We make sure it doesn't go too close to the edges — don’t want it looking like it’s trying to escape!

$positionX = rand(20, $outputWidth - $puzzleWidth - 20);
$positionY = rand(20, $outputHeight - $puzzleHeight - 20);

3. Create the Background - We load the background image, set the format to PNG (because we’re good like that), resize it, and crop it to fit the output dimensions. It’s all about getting that perfect crop without cutting off anything important (like your favorite coffee mug in the background).

$image = new \Imagick($imageFile);
$image->setImageFormat('png');

$imageRatio = $imageWidth / $imageHeight;
$fixedImageHeight = intval(floor($outputWidth / $imageRatio));

$image->resizeImage(
    $outputWidth, 
    $fixedImageHeight, 
    \Imagick::FILTER_POINT, 
    0
);
$image->cropImage($outputWidth, $outputHeight, 0, 0);

4. Place the Puzzle Piece - We composite the puzzle piece onto the image at the calculated position. Think of this as putting the last piece in the jigsaw puzzle. Victory is close!

$puzzle = new \Imagick($puzzleFile);
$puzzle->compositeImage(
    $image, 
    \Imagick::COMPOSITE_ATOP, 
    -$positionX, 
    -$positionY
);

5. Cut Out the Puzzle Piece - We make the background image look like the puzzle piece has been "cut out". This is where the magic happens. It's like opening your favorite IDE and finally seeing your code actually work. Feels good.

$extractPuzzle = new \Imagick($puzzleFile);
$extractPuzzle->transparentPaintImage('black', 0.8, 100, false);
$drawer = new \ImagickDraw();
$drawer->composite(
    \Imagick::COMPOSITE_DARKEN, 
    $positionX, 
    $positionY, 
    $puzzleWidth, 
    $puzzleHeight, 
    $extractPuzzle
);
$image->drawImage($drawer);

6. Return Blobs - We wrap everything up nicely by returning the image blobs. Work done.

return [
    'image' => $image->getImageBlob(),
    'puzzle' => $puzzle->getImageBlob()
];

Examples

2. The Not-So-Easy GDImage (gd) Way

Now, let’s get a bit adventurous! We already know GDImage isn’t the first choice for handling PNG transparency (it’s more like the old-school library you use when your teacher forces you to do so), but let’s give it a shot.

Here's the code. Just buckle up — this one gets messy, and we’re about to dive deep into the pixel-level madness. Warning: 8 hours of coding may ensue.

function gdPuzzle(
    string $imageFile, 
    string $puzzleFile, 
    int $outputWidth, 
    int $outputHeight
): array {
    list($imageWidth, $imageHeight) = getimagesize($imageFile);
    list($puzzleWidth, $puzzleHeight) = getimagesize($puzzleFile);

    // Get random position
    $positionX = rand(20, $outputWidth - $puzzleWidth - 20);
    $positionY = rand(20, $outputHeight - $puzzleHeight - 20);

    // Create main image
    $image = imagecreatetruecolor($outputWidth, $outputHeight);
    imagefilledrectangle(
        $image, 
        0, 
        0, 
        $outputWidth, 
        $outputHeight, 
        imagecolorallocate($image, 255, 255, 255)
    );

    // Downsize main image to output size
    $imageRatio = $imageWidth / $imageHeight;
    $fixedImageHeight = intval(floor($outputWidth / $imageRatio));

    $temp = imagecreatefrompng($imageFile);
    $cropped = imagecreatetruecolor($outputWidth, $outputHeight);
    imagecopyresampled(
        $cropped, 
        $temp, 
        0, 0, 0, 0, 
        $outputWidth, 
        $fixedImageHeight, 
        $imageWidth, 
        $imageHeight
    );
    imagecrop(
        $cropped, 
        [
            'x' => 0, 
            'y' => 0, 
            'width' => $outputWidth, 
            'height' => $outputHeight
        ]
    );
    imagecopymerge(
        $image, 
        $cropped, 
        0, 0, 0, 0, 
        $outputWidth, 
        $outputHeight, 
        100
    );

    // Exclude Piece
    $tempPiece = imagecreatefrompng($puzzleFile);
    imagealphablending($tempPiece, false);
    imagesavealpha($tempPiece, true);
    imagecopyresampled(
        $image, 
        $tempPiece, 
        $positionX, 
        $positionY, 
        0, 0, 
        $puzzleWidth, 
        $puzzleHeight, 
        $puzzleWidth, 
        $puzzleHeight
    );

    // Piece Image
    $puzzle = imagecreatetruecolor($puzzleWidth, $puzzleHeight);
    imagealphablending($puzzle, false);
    imagesavealpha($puzzle, true);
    imagecopyresampled(
        $puzzle, 
        $cropped, 
        0, 0, 
        $positionX, 
        $positionY, 
        $puzzleWidth, 
        $puzzleHeight, 
        $puzzleWidth, 
        $puzzleHeight
    );

    // Copy alpha channels from puzzle piece to cropped source image
    for ($i = 0; $i < $puzzleWidth; $i++) {
        for ($j = 0; $j < $puzzleHeight; $j++) {
            $alpha = imagecolorsforindex(
                $tempPiece, 
                imagecolorat($tempPiece, $i, $j)
            )['alpha'];
            $original = array_values(
                imagecolorsforindex(
                    $puzzle, 
                    imagecolorat($puzzle, $i, $j)
                )
            );
            $edited = imagecolorallocatealpha(
                $puzzle, 
                $original[0], 
                $original[1], 
                $original[2], 
                $alpha ?? 0
            );
            imagesetpixel($puzzle, $i, $j, $edited);
        }
    }

    // Get BLOBs
    ob_start();
    imagepng($image, null);
    $imageBlob = ob_get_clean();

    ob_start();
    imagepng($puzzle, null);
    $puzzleBlob = ob_get_clean();

    // Destroy Images & Return
    imagedestroy($image);
    imagedestroy($temp);
    imagedestroy($cropped);
    imagedestroy($puzzle);
    imagedestroy($tempPiece);
    return [
        'image' => $imageBlob,
        'puzzle' => $puzzleBlob
    ];
}

How this works (probably)

Yes, this may look like a mess, and trust me, I’m 100% sure there's a cleaner way to do it — probably involving magic, and possibly a wizard named Refactorio. But, you know what? It works! And sometimes, that’s all we can hope for. Let's break it down, shall we? (Note: the first and second parts are identical to the ImageMagick solution, so we’ll just pick up from 3.)

3. Main Image Creation (with a Side of Rectangle Love) - First, we create the main image at the desired output dimensions and draw a full-sized rectangle (because who doesn’t love rectangles? I mean, they are the building blocks of the universe, right?).

$image = imagecreatetruecolor($outputWidth, $outputHeight);
imagefilledrectangle(
    $image,
    0,
    0,
    $outputWidth,
    $outputHeight,
    imagecolorallocate($image, 255, 255, 255)
);

4. Resizing the Background Image (Because We’re Not Monsters) - Next, we downsize the main background image, just like in the ImageMagick solution... except this time we do it the good old GD way. Is there a better way to do this? Probably, but who has time for that? Let’s embrace the madness and make it work!

$imageRatio = $imageWidth / $imageHeight;
$fixedImageHeight = intval(floor($outputWidth / $imageRatio));

$temp = imagecreatefrompng($imageFile);
$cropped = imagecreatetruecolor($outputWidth, $outputHeight);
imagecopyresampled(
    $cropped,
    $temp,
    0, 0, 0, 0,
    $outputWidth,
    $fixedImageHeight,
    $imageWidth,
    $imageHeight
);
imagecrop(
    $cropped,
    [
        'x' => 0,
        'y' => 0,
        'width' => $outputWidth,
        'height' => $outputHeight
    ]
);
imagecopymerge(
    $image,
    $cropped,
    0, 0, 0, 0,
    $outputWidth,
    $outputHeight,
    100
);

5. "Cutting Out" the Puzzle Piece (No, Not with Scissors) - Let’s take the puzzle piece out of the image like a magician pulling a rabbit out of a hat — if that hat were made of pixelated backgrounds and slightly questionable logic. If you have questions about transparency... don't worry. I do too. It's a GD thing. Someday I’ll crack it.

$tempPiece = imagecreatefrompng($puzzleFile);
imagealphablending($tempPiece, false);
imagesavealpha($tempPiece, true);
imagecopyresampled(
    $image,
    $tempPiece,
    $positionX,
    $positionY,
    0, 0,
    $puzzleWidth,
    $puzzleHeight,
    $puzzleWidth,
    $puzzleHeight
);

6. The Alpha Channel Strikes Back (A Pixel by Pixel Journey) - Here’s where things get messy. GD doesn’t exactly love keeping alpha channels alive. So, I went full DIY mode. You know, "If the library can’t do it, just do it manually" — classic solution to all your problems. No worries about performance here! Memory? What memory?

$puzzle = imagecreatetruecolor($puzzleWidth, $puzzleHeight);
imagealphablending($puzzle, false);
imagesavealpha($puzzle, true);
imagecopyresampled(
    $puzzle,
    $cropped,
    0, 0,
    $positionX,
    $positionY,
    $puzzleWidth,
    $puzzleHeight,
    $puzzleWidth,
    $puzzleHeight
);

// Copy alpha channels from puzzle piece to cropped source image
for ($i = 0; $i < $puzzleWidth; $i++) {
    for ($j = 0; $j < $puzzleHeight; $j++) {
        $alpha = imagecolorsforindex(
            $tempPiece,
            imagecolorat($tempPiece, $i, $j)
        )['alpha'];
        $original = array_values(
            imagecolorsforindex(
                $puzzle,
                imagecolorat($puzzle, $i, $j)
            )
        );
        $edited = imagecolorallocatealpha(
            $puzzle,
            $original[0],
            $original[1],
            $original[2],
            $alpha ?? 0
        );
        imagesetpixel($puzzle, $i, $j, $edited);
    }
}

At this point, I’ve manually processed every pixel like a true hero of the digital realm. I can almost hear the "pixel by pixel" music playing in the background. It’s like the ending of The Shawshank Redemption, but with more coffee and less hope.

7. Blobbing and Clean-Up (The Real Hero of the Story) - Finally, we start cleaning up. No, we’re not cleaning the office... just the images. But cleaning up memory in GD-PHP is like cleaning your room: you have to throw away all the random junk you don’t need anymore. In this case, it’s your images.

ob_start();
imagepng($image, null);
$imageBlob = ob_get_clean();

ob_start();
imagepng($puzzle, null);
$puzzleBlob = ob_get_clean();

imagedestroy($image);
imagedestroy($temp);
imagedestroy($cropped);
imagedestroy($puzzle);
imagedestroy($tempPiece);
return [
    'image' => $imageBlob,
    'puzzle' => $puzzleBlob
];

All done. The blobs are returned, memory is freed (sort of), and you can pat yourself on the back for completing yet another “simple” task that turned into an odyssey. You've now written some GD code that sort of works, like a slightly messy masterpiece!

Examples

Job done. Notice the difference? GDImage has a more neatless cutout , while you see a small border around the puzzle piece on ImageMagick. But hey, this isn’t a design critique!

While ImageMagick is the undisputed heavyweight champion here, GD has its own quirky charm. If you know a better way to handle this, please let me know — I’m always up for a good challenge!

Simple Proof-of-Work in JavaScript (without dependencies)

Sam — Tue, 13 Dec 2022 10:43:18 +0000

PoW (proof-of-work) is a pretty terrifying way to prove someone that you are really serious, by wasting raw CPU cycles doing pointless cryptographic computations.

You’ve probably heard of Proof-of-Work, especially in the cryptocurrency world. But if not, let’s break it down with a simple, albeit not entirely comprehensive, explanation:

Proof-of-Work (PoW) is when your computer solves cryptographic puzzles to prove that it can. Why go through all that trouble, you ask? Imagine a burglar who needs to pick 15 locks on your neighbor's door, but only 2 on yours. Which house do you think he’ll target? This oversimplified example illustrates the point: PoW requires significant (and often unnecessary) effort, which in turn weeds out the uncommitted, ensuring integrity. This is what secures the blockchain and gives CAPTCHAs that lovely "prove you’re human" vibe.

Though we can't directly compare this to the power-hungry, C|GPU-crunching mining rigs, it's enough to get the gist of how PoW works.

1. Hashing in JavaScript

To build our own PoW function, we need a fast and unpredictable hashing algorithm that works in modern JavaScript environments. You might have thought of the popular crypto-js package, but today we’re going NATIVE with SubtleCrypto!

The crypto.subtle.digest function provides us with access to cryptographic hashing algorithms like SHA-1 through SHA-512 directly in the browser. No dependencies required. Let’s dive into a basic example:

function sha512(string) {
    return new Promise((resolve, reject) => {
        let buffer = (new TextEncoder).encode(string);

        crypto.subtle.digest('SHA-512', buffer.buffer).then(result => {
            resolve(Array.from(new Uint8Array(result)).map(
                c => c.toString(16).padStart(2, '0')
            ).join(''));
        }, reject);
    });
}

sha512('somedata').then(result => {
    console.log(result); // Output: a053...6f416
}, err => {
    console.error(err);
});

In this function, we turn a string into a UTF-8 byte array, pass it to the crypto.subtle.digest function, and specify the algorithm (SHA-512). We then convert the resulting hash digest into a hexadecimal string. Magic ( you can find a similar example on MDN ).

Now, we’re ready to hash, but... how do we do Proof-of-Work?

2. Basic Proof-of-Work function

The most basic PoW puzzle I can think of is one that calculates a specific number of zeros (or any other hex character) at the beginning (or end) of the hash digest. Sound complex? Nah! We just need some (random) data, a nonce, and the sha512 function we made earlier.

Here’s the process function, which accepts two arguments: some random data and a difficulty value (default: 5). At this difficulty, it should take about 10,000 to 50,000 ms on a regular computer:

async function process(data, difficulty = 5) {
    let hash;
    let nonce = 0;

    do {
        hash = await sha512(data + nonce++);
    } while(hash.substr(0, difficulty) !== Array(difficulty + 1).join('0'));

    return hash;
}

Now, let's execute it with a test run:

async function main() {
    console.time('pow-test');
    let hash = await process('somedata');
    console.log(`Result: ${hash}`);
    console.timeEnd('pow-test');
}

main();

Here is a working jsfiddle example.

So, it works... but here’s the catch: when running this, the whole browser freezes while PoW runs. This is a terrible user experience, especially on older devices. So, how do we keep things smooth while still crunching those numbers?

3. Using the WebWorker API

Thankfully, JavaScript offers a handy solution to move long-running tasks to the background via the WebWorker API. Normally, you’d have to separate your task logic into an external file, but thanks to StackOverflow, we can avoid that and do things inline.

Let’s modify the process() function to run inside a WebWorker:

function process(data, difficulty = 5) {
    return new Promise((resolve, reject) => {
        let webWorkerURL = URL.createObjectURL(new Blob([
            '(', processTask(), ')()'
        ], { type: 'application/javascript' }));

        // Create WebWorker
        let worker = new Worker(webWorkerURL);

        worker.onmessage = (event) => {
            worker.terminate();
            resolve(event.data);
        };

        worker.onerror = (event) => {
            worker.terminate();
            reject();
        };

        // Execute WebWorker Task
        worker.postMessage({
            data,
            difficulty
        });

        // Destroy URL Object
        URL.revokeObjectURL(webWorkerURL);
    });
}

In this updated function, we’re moving the actual PoW logic into a WebWorker, using URL.createObjectURL to create a URL for an inline Blob (the WebWorker script). We then post the data and difficulty to the worker and listen for messages with the result.

Now, the creepy part: here’s the actual WebWorker code:

function processTask() {
    return function () {
        function sha512(text) {
            return new Promise((resolve, reject) => {
                let buffer = (new TextEncoder).encode(text);

                crypto.subtle.digest('SHA-512', buffer.buffer).then(result => {
                    resolve(Array.from(new Uint8Array(result)).map(
                        c => c.toString(16).padStart(2, '0')
                    ).join(''));
                }, reject);
            });
        }

        addEventListener('message', async (event) => {
            let data = event.data.data;
            let difficulty = event.data.difficulty;

            let hash;
            let nonce = 0;
            do {
                hash = await sha512(data + nonce++);
            } while(hash.substr(0, difficulty) !== Array(difficulty + 1).join('0'));

            postMessage({ 
                hash,
                data,
                difficulty
            });
        });
    }.toString();
}

As you can see, the sha512() function is now inside the WebWorker, and it does its thing without blocking the UI thread.

Here is a working jsfiddle example

4. Conclusion

By leveraging SubtleCrypto for hashing, WebWorkers for background processing, and a bit of JavaScript wizardry, we’ve created a minimalist Proof-of-Work function. Sure, you could extend and improve this code in many ways, but this simple example shows how far JavaScript has come - it's no longer just for DOM manipulation using jQuery, Prototype.JS or MooTools (weird, I know).

Now, JavaScript is a powerful, multi-faceted language, even if parts of it are a bit more verbose compared to Python or PHP (which, let’s be honest, is a bit ironic considering JavaScript was originally created to be as simple as possible).

Thanks for reading. Don’t forget to hash responsibly, and may your nonce always find a way!