I have a simple PHP script that takes a base image adds some text on top and delivers the result to the browser.
The problem is that the text appears to be different sizes on different browsers. I cannot for the life of me understand why. Isn't everything assembled server-side and therefore should always look the same?
Here is the script in it's entirety:
<?php
$ext = $source_type = end(explode('.', $_REQUEST['base_image']));
if( $source_type == 'jpg' ) $source_type = 'jpeg';
$read = "imagecreatefrom$source_type";
$output = "image$source_type";
list($x, $y) = explode('x', $_REQUEST['position']);
list($r, $g, $b) = explode(',', $_REQUEST['color']);
$size = $_REQUEST['size'];
$text = $_REQUEST['text'];
$font = realpath($_REQUEST['font']);
$image = $read($_REQUEST['base_image']);
list($llx, $lly, $lrx, $lry, $urx, $ury, $ulx, $uly) = imageftbbox($size, 0, $font, $text);
$offset = ($lrx - $llx) / 2;
$color = imagecolorallocate($image, $r, $g, $b);
imagefttext($image, $size, 0, $x-$offset, $y, $color, $font, $text);
header("Content-Type: image/$source_type");
header("Content-Disposition: attachment; filename=\"wolfpackbadge.$ext\"");
$output($image);
I have one computer in my house that shows the text microscopically small. I also have had reports of others with extra large text. Below is an example of how the image should look:
Here is a screenshot of how it looks when displays on one computer in my house:
Here is a screenshot of how it looks for another user reported to me:
A few more bits of info:
- The computer in my house looks ok when viewed in IE. Only on Windows Chrome does it look odd. But another Windows machine in my house displays in Chrome normally.
- The reports I am getting from others also indicate browsers with the problem include Chrome, Android and iOS.
My question is:
- If the image is generated server-side how can the font be different depending on the browser?
- What can I change to the script to remove this problem?
A few things I have tried.
- I have tried converting the font from an otf to a ttf to ensure the font type isn't a problem.
- I have tried changing the source and output image to something other than jpeg
