Display imagejpeg() in middle of page

[jakebur01]

I'm calling the image page via ajax.  Depending on what date is selected will be written to the image.  However I'm getting header error on my main page.

What would be the proper way to display the generated image to the user?  Can I do it without saving it?

// FETCH IMAGE & WRITE TEXT
$img = imagecreatefromjpeg('balloon.jpg');
$white = imagecolorallocate($img, 255, 255, 255);
$txt = "Hello World";
$font = "C:\Windows\Fonts\arial.ttf"; 
imagettftext($img, 24, 0, 5, 24, $white, $font, $txt);

// OUTPUT IMAGE
header('Content-type: image/jpeg');
imagejpeg($img);
imagedestroy($jpg_image);

// OR SAVE TO A FILE
// THE LAST PARAMETER IS THE QUALITY FROM 0 to 100
// imagejpeg($img, "test.jpg", 100);

 

[Barand]

Main page contains image tag

<img src='myimage.php?txt=Hello+world'>

myimage.php

$img = imagecreatefromjpeg('balloon.jpg');
$white = imagecolorallocate($img, 255, 255, 255);
$txt = $_GET['txt'] ?? '';
$font = "C:/Windows/Fonts/arial.ttf"; 
imagettftext($img, 24, 0, 5, 24, $white, $font, $txt);

// OUTPUT IMAGE
header('Content-type: image/jpeg');
imagejpeg($img);
imagedestroy($img);

 

[jakebur01]

That's what I was thinking!  Thanks.

[jakebur01]

Wow.  I'm using session_start() on my image page and querying data where user_id = session user id.  That's pretty cool that the session still works through an image link and the user doesn't have to be directly on the page.

[Barand]

Or you could pass the user_id (or other data) in the query string as I did with the "txt" value in the example above.

[jakebur01]

Do you know how to insert a javascript variable into the path? Javascript variable eventdate

<img src='myimage.php?date=JAVASCRIPT eventdate VARIABLE HERE'>

I've used javascript variables with php before but it's been several years.

Edited November 7, 2019 by jakebur01

[Barand]

1) you could get the date in PHP, or

2) build the image url in javascript

HTML

<img src="" id="myimg" >

JS

<script type="text/javascript">

    var my_js_date
    
    var imgurl = "myimage.php?date=" + my_js_date
    
    $().ready( function() {
        $("#myimg").attr("src",imgurl);
    })
</script>

 

Edited November 7, 2019 by Barand

[jakebur01]

I'm complicating things now.  I have an option select to select the date.  The image displays on the initial value.  But, the image is not changing when I change the selection.

<select name="dateselect" id="dateselect" oninput="document.getElementById('my_js_date').innerHTML = this.value">

function bodyOnLoad(){

var e = document.getElementById("dateselect");
document.getElementById('my_js_date').innerHTML = e.options[e.selectedIndex].value;

}

 

[jakebur01]

I was able to get the javascript working.

$(document).ready(function(){ /* PREPARE THE SCRIPT */
$("#dateselect").bind('load change', function(){ /* WHEN YOU CHANGE AND SELECT FROM THE SELECT FIELD */
var my_js_date = $(this).val(); /* GET THE VALUE OF THE SELECTED DATA */
var dataString = "my_js_date="+my_js_date; /* STORE THAT TO A DATA STRING */

var imgurl = "myimage.php?date=" + my_js_date;

$().ready( function() {
    $("#myimg").attr("src",imgurl);
})


}).triggerHandler('change');
});

 

[Barand]

8 hours ago, jakebur01 said:

But, the image is not changing when I change the selection.

update the image's src attribute when date changes