Jump to content
jakebur01

Display imagejpeg() in middle of page

Recommended Posts

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);

 

Share this post


Link to post
Share on other sites

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);

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by jakebur01

Share this post


Link to post
Share on other sites

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 by Barand

Share this post


Link to post
Share on other sites

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;

}

 

Share this post


Link to post
Share on other sites

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');
});

 

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.