Generate images with ImageMagick without saving to file but still display them on website

Question

This is my ImageMagick code which works fine on my webserver by creating new image with the file name 'coloured_font.png' in a default directory ...

<?php 
$cmd = " -background none -pointsize 60 -font Times-Roman -fill red ".
 " -strokewidth 1 -stroke black label:\"google\" ";
exec("convert $cmd coloured_font.png");
?>

But now I am running ImageMagick on Windows which will not create any image files in a default folder but ImageMagick applications runs fine(i have tested by creating thumbnail). So now my idea is to display 'coloured_font.png' in the browser screen without saving it anywhere else... so please can anyone help me to create and display image on the screen without saving it.

Answer 1

You could use the special inline: format of images (which ImageMagick supports for reading files too). This format is a base64 encoding of binary data.

On the (Linux) commandline:

my_base64_png="$(
convert               \
    -background none  \
    -pointsize 60     \
    -font Times-Roman \
    -fill red         \
    -strokewidth 1    \
    -stroke black     \
     label:\"google\" \
     png:fd:1         \
 |                    \
 base64  -i -  -o -)"

This command uses several special tricks ImageMagick and the shell have up in their sleeves:

• using the format hint png: to tell it that the output should be in PNG format;
• using stdout as its output channel (instead of a file) by specifiying fd:1;
• piping the output directly into stdin of the base64 binary to encode the PNG;
• storing the base64 encoded data in the environment variable my_base64_png.

Now in your HTML inlining the base64 image data (which should work in all modern, but doesn't work in older browsers):

 <IMG SRC="data:image/png;base64,
         echo "$(my_base64_png)"
  ALT="google" WIDTH=214  HEIGHT=57  VSPACE=5 HSPACE=5 BORDER=0 />

or

 <IMG SRC="data:image/png;base64,
         iVBORw0KGgoAAAANSUhEUgAAAM4AAABJAQMAAABPZIvnAAAABGdBTUEAALGPC/xh
         BQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAA
         OpgAABdwnLpRPAAAAAZQTFRFAAAA/wAAG/+NIgAAAAF0Uk5TAEDm2GYAAAABYktH
         RACIBR1IAAAACXBIWXMAAABIAAAASABGyWs+AAAB6ElEQVQ4y+3UQY7bIBQG4IeQ
         yqYaLhANV+iyi9FwpS69iGyiLuZYpepF6A1YskC8/uCA7SgZtVI3lcoiivkIxu/9
         MdH/8U+N6el2pk0oFyibWyr1Q3+PlO2NqJV+/BnRPMjcJ9zrfJ/U+zQ9oAvo+QGF
         d+npPqFQn++TXElkrEpEJhAtlTBR6dNHUuzIMhFnEhxAmJDkKxlmt7ATXDDJYcaE
         r4Txqtkl42VYSH+t9KrD9b5nxZeog/LWGVHprGInGWVQUTvjDWXca5KdsowqyGSc
         DrZRlGlQUl4kQwpUjiSS9gI9VdECZhHFQ2I+UE2CHJQfkNxTNKCl0RkURqlLowJK
         1h1p3sjc0CJD39D4BIqD7JvvpH/GAxl2/YSq9mtHSHknga7OKNOHKyEdaFC2Dh1w
         9VSJemBeGuHgMuh24EynK03YM1Lr83OjUle38aVSfTblT424rl4LhdglsUag5RB5
         uBJSJBIiELSzaAeIN0pUlEeZEMeClC4cBuH6mxOlgPjC3uLproUCWfy58WPN/MZR
         86ghc888yNdD0Tj8eAucasl2I5LqX19I7EmEjaYjSb9R/G1SYfQA7ZBuT5H6WwDt
         UAfK1BOJmh/eZnKLeKvZ/vA8qonCpj1h6djfbqvW620Tva36++MXUkNDlFREMVkA
         AAAldEVYdGRhdGU6Y3JlYXRlADIwMTItMDgtMjJUMDg6Mzc6NDUrMDI6MDBTUnmt
         AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDEyLTA4LTIyVDA4OjM3OjQ1KzAyOjAwIg/B
         EQAAAA50RVh0bGFiZWwAImdvb2dsZSJdcbX4AAAAAElFTkSuQmCC"
  ALT="google" WIDTH=214  HEIGHT=57  VSPACE=5 HSPACE=5 BORDER=0 />

It shouldn't be difficult for you to translate this procedure into PHP. ;-)

As I said, ImageMagick can read this inline: format (not used here for reading). But for completeness' sake let me show you how:

  convert                                                                   \
        'inline:image/png;data:,
         iVBORw0KGgoAAAANSUhEUgAAAM4AAABJAQMAAABPZIvnAAAABGdBTUEAALGPC/xh
         BQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAA
         OpgAABdwnLpRPAAAAAZQTFRFAAAA/wAAG/+NIgAAAAF0Uk5TAEDm2GYAAAABYktH
         RACIBR1IAAAACXBIWXMAAABIAAAASABGyWs+AAAB6ElEQVQ4y+3UQY7bIBQG4IeQ
         yqYaLhANV+iyi9FwpS69iGyiLuZYpepF6A1YskC8/uCA7SgZtVI3lcoiivkIxu/9
         MdH/8U+N6el2pk0oFyibWyr1Q3+PlO2NqJV+/BnRPMjcJ9zrfJ/U+zQ9oAvo+QGF
         d+npPqFQn++TXElkrEpEJhAtlTBR6dNHUuzIMhFnEhxAmJDkKxlmt7ATXDDJYcaE
         r4Txqtkl42VYSH+t9KrD9b5nxZeog/LWGVHprGInGWVQUTvjDWXca5KdsowqyGSc
         DrZRlGlQUl4kQwpUjiSS9gI9VdECZhHFQ2I+UE2CHJQfkNxTNKCl0RkURqlLowJK
         1h1p3sjc0CJD39D4BIqD7JvvpH/GAxl2/YSq9mtHSHknga7OKNOHKyEdaFC2Dh1w
         9VSJemBeGuHgMuh24EynK03YM1Lr83OjUle38aVSfTblT424rl4LhdglsUag5RB5
         uBJSJBIiELSzaAeIN0pUlEeZEMeClC4cBuH6mxOlgPjC3uLproUCWfy58WPN/MZR
         86ghc888yNdD0Tj8eAucasl2I5LqX19I7EmEjaYjSb9R/G1SYfQA7ZBuT5H6WwDt
         UAfK1BOJmh/eZnKLeKvZ/vA8qonCpj1h6djfbqvW620Tva36++MXUkNDlFREMVkA
         AAAldEVYdGRhdGU6Y3JlYXRlADIwMTItMDgtMjJUMDg6Mzc6NDUrMDI6MDBTUnmt
         AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDEyLTA4LTIyVDA4OjM3OjQ1KzAyOjAwIg/B
         EQAAAA50RVh0bGFiZWwAImdvb2dsZSJdcbX4AAAAAElFTkSuQmCC'              \
  my_decoded.png

ImageMagick doesn't require the image/png; part of the command (it even ignores it), because it can identify the format anyway through it's own builtin magic database -- but it doesn't hurt either...

Let me also point out that ImageMagick's commandline length is limited to 5000 characters, so reading inline: data will not work for larger pictures. (I don't know at the moment what the limitation for inlining image data in HTML is...)

Answer 2

Just replace coloured_font.png with coloured_font.php in you html file and create

coloured_font.php with this contents:

<?php

header("Content-Type: image/png");

echo `convert -background none -pointsize 60 -font Times-Roman -fill red ".
 " -strokewidth 1 -stroke black label:\"google\" png:-`;

and thats it! Try to open coloured_font.php in your browser!

Answer 3

You will have to create a temporary file

Steps

1. Create a temporary file, temp_image.jpg by running imagemagick command in shell

2. Send this as http response

   $file = 'pathto/temp_image.jpg';
   $type = 'image/jpeg';           // set appropriate type    
   header('Content-Type:'.$type);  // set content type
   header('Content-Length: ' . filesize($file));
   readfile($file);
   

3. Delete temp_image.jpg

Suppose this is in getImage.php, it can be given as the source of an image tag

<img src="pathto/getImage.php" />