I am using PHP version of imagick to generate an image from a database / user selection.
I have tried a variety of resoultion/compression options but each come out soft or very slightly blurry.
e.g. setImageResolution
and setImageCompressionQuality
/* VARIABLES
================================================== */
$title = $_POST['input_title'];
$date = $_POST['input_text1'];
$format = $_POST['input_format'];
$bgimg = $_POST['bgImage'];
$theme = $_POST['theme'];
$width = '564px';
$height = '296px';
// 1. GET BACKGROUND IMAGE
$image = new Imagick('images/highres/bg/' . $bgimg . '.jpg');
$theme = new Imagick('images/highres/themes/' . $theme . '.png');
// Lets create a canvas to set the width and height
$canvas = new Imagick();
$canvas->newImage($width, $height, 'white', 'jpg' );
// ARTBOX
$draw = new ImagickDraw();
$draw2 = new ImagickDraw();
// SET DPI
$canvas->setImageUnits(imagick::RESOLUTION_PIXELSPERINCH);
$canvas->setImageResolution(72,72);
// Add the images to the canvas
// Re-order these for images to appear on top of eachother
$canvas->compositeImage($image, Imagick::COMPOSITE_DEFAULT, 0, 0);
$canvas->compositeImage($theme, Imagick::COMPOSITE_DEFAULT, 0, 0);
// Set font properties for each text area
$draw->setFont( config::get('url/clienttemplateurlabsolute') . '/styles/fonts/fredokaone-regular-webfont.ttf');
// CREATE WORD WIDTH FUNCTION
function wordWrapAnnotation(&$image, &$draw, $text, $maxWidth)
{
$words = explode(" ", $text);
$lines = array();
$i = 0;
$lineHeight = 0;
while($i < count($words) )
{
$currentLine = $words[$i];
if($i+1 >= count($words))
{
$lines[] = $currentLine;
break;
}
//Check to see if we can add another word to this line
$metrics = $image->queryFontMetrics($draw, $currentLine . ' ' . $words[$i+1]);
while($metrics['textWidth'] <= $maxWidth)
{
//If so, do it and keep doing it!
$currentLine .= ' ' . $words[++$i];
if($i+1 >= count($words))
break;
$metrics = $image->queryFontMetrics($draw, $currentLine . ' ' . $words[$i+1]);
}
//We can't add the next word to this line, so loop to the next line
$lines[] = $currentLine;
$i++;
//Finally, update line height
if($metrics['textHeight'] > $lineHeight)
$lineHeight = $metrics['textHeight'];
}
return array($lines, $lineHeight);
}
function drawText($artbox, $textalign = \Imagick::ALIGN_RIGHT, $fontsize, $color, $xpos, $ypos, $rotation = 0, $txt, $font, $maxWidth) {
// NOTE - Check for <br/> tags and swap for line breaks
$breaks = array("<br />","<br>","<br/>");
$txt = str_ireplace($breaks, "
", $txt);
global $canvas;
$artbox->setFont( config::get('url/clienttemplateurlabsolute') . '/styles/fonts/' . $font );
$artbox->setTextAlignment($textalign); // TEXT ALIGN
$artbox->setFontSize($fontsize); // FONT SIZE
$artbox->setFillColor($color); // FONT COLOUR
// SET WIDTH
list($lines, $lineHeight) = wordWrapAnnotation($canvas, $artbox, $txt, $maxWidth);
for($i = 0; $i < count($lines); $i++)
$canvas->annotateImage($artbox, $xpos, $ypos + $i*$lineHeight, $rotation, $lines[$i]);
}
// ARTBOX 1 - PAGE TITLE
drawText(
$draw, // ARTBOX
\Imagick::ALIGN_RIGHT, // TEXT ALIGN
'28', // FONT SIZE
'white', // COLOR
540, // X
200, // Y
-9, // ROTATION
$title, // TXT
'fredokaone-regular-webfont.ttf',// FONT
340 // MAX WIDTH IN PIXELS
);
// ARTBOX 2 - DATE
drawText(
$draw2,
\Imagick::ALIGN_RIGHT,
'16',
'white',
550,
280,
0,
$date,
'arial.ttf',
250 // max width in pixels
);
// Set output image format (JPG / PNG) from the user selection
$canvas->setImageFormat($format);
if ( $format == 'jpg' ) {
$canvas->setImageCompressionQuality(100);
}
What was happening is that when downloading the image and viewing it in Mac OSX "Preview" the text and edges were pixelated (slightly). Viewing the same image in Chrome the image was fine!!
Exactly the same image file but 2 different results - strange!