How to display a JSON/base64 encoded image in FPDF? - php

Question

I'm storing signatures (using signaturepad in my database Coldfusion/MySQL 5.0.88 and would like to output the signature I'm taking onto a pdf which I'm generating with fpdf. However I can*t get it to work...
Signatures are stored like this:
[{"lx":19,"ly":58,"mx":19,"my":57},{"lx":23,"ly":54,"mx":19,"my":58},{"lx":26,"ly":53,"mx":23,"my":54},{"lx":32,"ly":51,"mx":26,"my":53},{"lx":38,"ly":47,"mx":32,"my":51},{"lx":44,"ly":44,"mx":38,"my":47},{"lx":51,"ly":41,"mx":44,"my":44},{"lx":58,"ly":37,"mx":51,"my":41},{"lx":64,"ly":35,"mx":58,"my":37},{"lx":67,"ly":31,"mx":64,"my":35},{"lx":70,"ly":30,"mx":67,"my":31},{"lx":72,"ly":28,"mx":70,"my":30},{"lx":71,"ly":28,"mx":72,"my":28},{"lx":69,"ly":28,"mx":71,"my":28},{"lx":66,"ly":28,"mx":69,"my":28},{"lx":62,"ly":29,"mx":66,"my":28},{"lx":59,"ly":31,"mx":62,"my":29},{"lx":55,"ly":32,"mx":59,"my":31},{"lx":52,"ly":33,"mx":55,"my":32},{"lx":48,"ly":35,"mx":52,"my":33},{"lx":44,"ly":37,"mx":48,"my":35},{"lx":41,"ly":38,"mx":44,"my":37},{"lx":39,"ly":40,"mx":41,"my":38},{"lx":36,"ly":40,"mx":39,"my":40},{"lx":33,"ly":42,"mx":36,"my":40},{"lx":32,"ly":43,"mx":33,"my":42},{"lx":31,"ly":44,"mx":32,"my":43},{"lx":31,"ly":46,"mx":31,"my":44},{"lx":32,"ly":48,"mx":31,"my":46},{"lx":136,"ly":23,"mx":32,"my":48},{"lx":132,"ly":24,"mx":136,"my":23},{"lx":104,"ly":38,"mx":132,"my":24},{"lx":103,"ly":40,"mx":104,"my":38},{"lx":102,"ly":41,"mx":103,"my":40},{"lx":102,"ly":42,"mx":102,"my":41},{"lx":103,"ly":42,"mx":102,"my":42},{"lx":108,"ly":42,"mx":103,"my":42},{"lx":115,"ly":42,"mx":108,"my":42},{"lx":123,"ly":39,"mx":115,"my":42},{"lx":133,"ly":36,"mx":123,"my":39},{"lx":141,"ly":34,"mx":133,"my":36},{"lx":148,"ly":32,"mx":141,"my":34},{"lx":155,"ly":30,"mx":148,"my":32},{"lx":159,"ly":29,"mx":155,"my":30},{"lx":161,"ly":28,"mx":159,"my":29},{"lx":159,"ly":27,"mx":161,"my":28},{"lx":155,"ly":27,"mx":159,"my":27},{"lx":151,"ly":27,"mx":155,"my":27},{"lx":145,"ly":27,"mx":151,"my":27},{"lx":140,"ly":29,"mx":145,"my":27},{"lx":135,"ly":31,"mx":140,"my":29},{"lx":132,"ly":33,"mx":135,"my":31},{"lx":127,"ly":36,"mx":132,"my":33},{"lx":125,"ly":38,"mx":127,"my":36},{"lx":125,"ly":40,"mx":125,"my":38},{"lx":125,"ly":41,"mx":125,"my":40},{"lx":125,"ly":42,"mx":125,"my":41},{"lx":127,"ly":43,"mx":125,"my":42},{"lx":131,"ly":44,"mx":127,"my":43},{"lx":139,"ly":45,"mx":131,"my":44},{"lx":147,"ly":45,"mx":139,"my":45},{"lx":157,"ly":43,"mx":147,"my":45},{"lx":164,"ly":41,"mx":157,"my":43},{"lx":173,"ly":39,"mx":164,"my":41},{"lx":181,"ly":36,"mx":173,"my":39},{"lx":186,"ly":34,"mx":181,"my":36},{"lx":191,"ly":33,"mx":186,"my":34},{"lx":193,"ly":30,"mx":191,"my":33},{"lx":194,"ly":29,"mx":193,"my":30},{"lx":194,"ly":28,"mx":194,"my":29},{"lx":193,"ly":27,"mx":194,"my":28},{"lx":191,"ly":26,"mx":193,"my":27},{"lx":188,"ly":25,"mx":191,"my":26},{"lx":183,"ly":25,"mx":188,"my":25},{"lx":180,"ly":25,"mx":183,"my":25},{"lx":177,"ly":25,"mx":180,"my":25},{"lx":174,"ly":27,"mx":177,"my":25},{"lx":171,"ly":30,"mx":174,"my":27},{"lx":169,"ly":32,"mx":171,"my":30},{"lx":168,"ly":34,"mx":169,"my":32},{"lx":167,"ly":36,"mx":168,"my":34},{"lx":167,"ly":38,"mx":167,"my":36},{"lx":168,"ly":40,"mx":167,"my":38},{"lx":169,"ly":41,"mx":168,"my":40},{"lx":171,"ly":41,"mx":169,"my":41},{"lx":174,"ly":41,"mx":171,"my":41},{"lx":176,"ly":41,"mx":174,"my":41},{"lx":176,"ly":40,"mx":176,"my":41},{"lx":177,"ly":39,"mx":176,"my":40},{"lx":177,"ly":37,"mx":177,"my":39}]
There is a custom function included in siganturepad (signature to image) to convert the above back into an image. Like so:
<?php
require_once '../../signature-to-image.php';
$img = sigJsonToImage(file_get_contents('sig-output.json'));
// Output to browser
header('Content-Type: image/png');
imagepng($img);
imagedestroy($img);
>
But if I try this on my fpdf page, the whole page breaks ( I guess because I want to embed the image in a cell not output only the image to the browser) and I get this:
Resource id #10‰PNG IHDRÆ7Ø7¢¶±IDATxœí›iP[×Ç/’a6±£'ŒÀk0›ë݆6)NÒƉݸµM2î´nf:“d2gq“Æušq–Ió! ŽSâÄNJgRÛñ ’#1KOFf±õ´ ÀfÖÖ/}y‘Ä`çþ>x¬û®Gºÿ{Î=ç…¹.Pm¡ €Ük#IA(J B1PRŠ’‚P”„b ¤ %¡()Å#IA(J B1PRŠ’‚P”„b ¤ %¡()Å#IA(J B1PRŠ’‚Pc¡ €üÀðèT³Æ Pa­×L'^z02œ¾Ð”Ô£·Œ+ÔX‹S¨0íÍb¼«wpåòô4,h ¤vK†ê¿Õe¨þÆà1Á óÓ¥bŽTÌÉËN™ÃL#u ªƒÇ•¾§­Y‘±27½ZÂg%{^ ƒ? œNÚoQ¨°A†ê‡F­nâ–Dìyà¾=÷ß¹ >¿¤ýËáÆ[Óþ¿¥€—ºwKá/Ëy4Z1%*lvG{¹YmÀãÚØ”mÆiþ‹i|êN}c÷7­}ß´öûiÃoÖ×dº-¹'“VÛSïž?)ïTKxÏ?.‰aFø˜ßÞcúJ¡;¥¼>:y°±ˆ{è÷kÙ‰1øÕ»XR£“wZԘŔZ÷Z£ÛUuíîäø¨y6iÒjSjJ­A†êÛºMV›ƒ¸ÄCX"Äîp6u}ìüS‡Î\× ªo잰άKß¼³wãk>lÞvàk9Š±¢#_ß³vKEŽŸ·¶9ŽžS½Qßj™xò+^Ýý3|ü®””idâí/ÛjOw:œ^fkɳ[KçÁ˜‘qk‹ÚЬ6ÈP}WŸÅîpâãaa#ÌM–ˆ2[*æho¿ö™RŽbÀo1án©®AõÝõA|„‡...
If I'm doing this:
if( strlen($unterschrift) > 0){
$img = sigJsonToImage( $unterschrift );
};
and try to output:
if ( $imgProceed == "true" ){
$pdf->imagepng($img);
} else {
$pdf->Cell(50,4,'',0,1);
}
all I'm getting is:
`Call to undefined method PDF::imagepng() `/ `strpos() expects parameter 1 to be string, resource`
Can someone explain to me, what I'm doing wrong or what I need to do to include the image in a cell in fpdf? I'm clueless.
Thanks!

Answer 1

The issue is here
$pdf->imagepng($img);
^-------------- This should be an image path (String)
Solution
$file = 'signature.png' ;
imagepng($img, $file);
^----------- Save Image to File Instead
Then
if ($imgProceed == "true") {
$pdf->imagepng($file);
} else {
$pdf->Cell(50, 4, '', 0, 1);
}

Answer 2

Originally, I was going to convert to PNG and the more I thought about it, it was more overhead then necessary. After all, Signature Pad give us everything we need to re-draw the signature in FPDF.
I did the following:
// decode the signature into an array
$sig = json_decode($signatureInJSON);
// for each line segment
foreach ($sig as $line) {
$lx = $line->lx;
$ly = $line->ly;
$mx = $line->mx;
$my = $line->my;
// draw the line
$pdf->Line($lx, $ly, $mx, $my);
}
Obviously, I also added some functions to scale the signature and offset it to where I wanted in the PDF.
Hope that helps someone else.