PHP script Image merge
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hi, I have a PHP script half working. I'm not a PHP coder so please feel free to correct any bad coding :)

The script takes a URL and then creates an image based on the parameters. I have got 2 of the 3 outputs to work but I can't get the number 2 output to work.

header("Content-Type: image/jpeg");
imagejpeg($image_1, NULL, $myQuality);

Type 1 (works):
https://hekmancontract.digitaldraping.com/merge.php?id=C1007&timber=Beeston&hardware=Arched&metal=Brass&lock=no&width=400&type=1

https://hekmancontract.digitaldraping.com/merge.php?id=C1007&timber=Beeston&hardware=Arched&metal=Brass&lock=yes&width=400&type=1

Type 2 (does not work):
http://hekmancontract.digitaldraping.com/merge.php?id=C1007&timber=Beeston&hardware=Arched&metal=Brass&lock=no&width=400&type=2

http://hekmancontract.digitaldraping.com/merge.php?id=C1007&timber=Beeston&hardware=Arched&metal=Brass&lock=yes&width=400&type=2

Type 3 (works):
http://hekmancontract.digitaldraping.com/merge.php?id=C1007&timber=Beeston&hardware=Arched&metal=Brass&lock=no&width=400&type=3

http://hekmancontract.digitaldraping.com/merge.php?id=C1007&timber=Beeston&hardware=Arched&metal=Brass&lock=yes&width=400&type=3

Trying to output #2 onto a webpage.
https://hekmancontract.digitaldraping.com/image.html

There are not many files and you can download them here:
https://www.dropbox.com/sh/gqtgp6vkir6fcz6/AACwT3szAP0nKbM0PVI8TORNa?dl=0

In case it's not clear I want to be able to call #2 and for it to output an image like this:
https://digitaldraping.com/info/lab/merge/_php/merge.php?&myReturnType=2&myFolder=../&myResize=0&myBaseImageFolder=numbers&myImageArray=bg.png,one.png,two.png,three.png,four.png&myFolderArray=bg,one,two,three,four&myUniqueName=bg-one-two-three-four

I'm going out in a bit so sorry if I'm not responsive. I will answer any questions a soon as I can.

Thanks!

In the line 89 of merge.php there isn't ob_start(); respective ending at 92.. Is that on purpose?
SilverHood Apps 9 months ago
No, it's not on purpose, is that the problem? To be clear I'm not a php coder :)
Jacknumpty 9 months ago
Might be, Im trying to get the php to work on my localhost for testing,
Could you explain what shoud happen in type 1 2 and 3 respectivly?
SilverHood Apps 9 months ago
1 adds a JPG data image <img src="data:image/jpeg;base64,/9j/4AAQSk...
Jacknumpty 9 months ago
3 adds a PNG data image <img src="data:image/jpeg;base64,/9j/4AAQSk...
Jacknumpty 9 months ago
Ok noted.
SilverHood Apps 9 months ago
Tags
PHP
php-gd

Crowdsource coding tasks.

2 Solutions

Winning solution

From what I gather, you need the script to serve the raw JPEG image when type=2. ("output to browser as data URI" isn't really the right way to put it.)

The problem is that the calls to debug_to_console print plain text, so you end up with the binary data of the image being intertwined with text, which creates an invalid image.

A simple solution (albeit bad programming) is to silence the function when $myReturnType == 2:

function debug_to_console( $data ) {
    global $myReturnType;
    if ($myReturnType == 2) {
        return;
    }
    $output = $data;
    if ( is_array( $output ) )
        $output = implode( ',', $output);
    echo "<script>console.log( 'Debug Objects: " . $output . "' );</script>";
}

The script will then correctly output the image.

Thanks, although I could not get it to work. I'm in a bit of a rush so will check, taking more time tomorrow.
Jacknumpty 9 months ago
Hi, I'm not sure how to implement this however it does not look like it will do what I want. I'm trying to output the raw JPEG image like this example: https://hekmancontract.digitaldraping.com/image.html
Jacknumpty 9 months ago
In the example above the first image works correctly but the other two images do not work.
Jacknumpty 9 months ago
You overwrite the definition of debug_to_console at the end of the script with what I put in the solution, or manually edit it to match. It does exactly what you want: I have the script running in a test server and once the fix is applied, a raw JPEG image is output when type=2, which can be embedded in a <img src="..."> tag as in your example. The code at line 88 already outputs a raw JPEG image. The problem is with the calls to debug_to_console that occur before and after: they add superfluous text data that corrupt the raw JPEG data, which is why the fix concerns that function.
CyteBode 9 months ago
In case this somehow wasn't clear enough, here's the script in whole with the fix applied: https://pastebin.com/NdvKX09A
CyteBode 9 months ago
O how strange, if I totally remove the debugtoconsole it works. Thank you for finding the bug! It's late here let me look at this tomorrow. Thank you!
Jacknumpty 9 months ago
Thanks for your help. I don't know why (even with your explanation ) debugtoconsole was the problem but it was. Thanks!
Jacknumpty 9 months ago
That's the way CGI works. Anything that gets printed to stdout is what gets output as part of the response. debug_to_console outputs some HTML (<script>console.log(...)</script>) to create debugging outputs to the JavaScript console. This works fine when type != 2 because then a web page gets output, but when type == 2, a raw JPEG image has to be output, and that HTML corrupts it.
CyteBode 9 months ago
Thank you, I totally get it now, that makes sense. I appreciate your time CyteBode.
Jacknumpty 9 months ago

If nothing works, replace the code block at line 88

else if ($myReturnType == 2) {  // output to browser as data URI
    header("Content-Type: image/jpeg");
    imagejpeg($image_1, NULL, $myQuality);
    debug_to_console("2");
}

with

else if ($myReturnType == 2) {  // output to browser as data URI
    echo '<img src="'.$myImage.'" width="'.$myWidthPX.'">';
    debug_to_console("2");
}

This simply looks consistant with type 1 and type 3

Regards.

Tip: For better programming

It would usually show Undefined offset: 1 during testing at line 25

Divide the call debug_to_console at line 25 between the above if condition as follows

if ($myLock == "yes") {
    $myImageArray = array($myImage,$myLockImage);
    debug_to_console("myImageArray - ".$myImageArray[0]." & ".$myImageArray[1]);
}else {
    $myImageArray = array($myImage);
    debug_to_console("myImageArray - ".$myImageArray[0]);
}
Hi Silver, your solution just adds the image it does not take into account any of the parameters? https://hekmancontract.digitaldraping.com/img/C1007/Beeston_Arched_Brass.jpg
Jacknumpty 9 months ago
Thanks Jack, it takes into the parameter width as supplied by $myWidthPX variable into account. Let me know what other parameters you need..
SilverHood Apps 9 months ago
View Timeline