Forums

Is there a tutorial out there on how to convert the base64 image that gets created from the signature widget into a png file so I can have it stored in the database and displayed in emails?

There's not, but there are a few answers here on the forums and heaps more on google.

Hi ftpaul,
​
Please check this FAQ. If you scroll down there is a CFv6 section.
​
Bob

I've tried both the Chronoforms v5 and v6 code in that FAQ. The v5 code seems to create a file but it's only 0 bytes. The v6 code in the FAQ doesn't seem to work at all.

Not exactly sure what's wrong here.

Post your code

<?php
$data_pieces = explode(",", $this->data[signature9]);
$encoded_image = $data_pieces[1];
$decoded_image = base64_decode($encoded_image);

// set the folder where the images will be saved
$folder = 'images/photos/signatures/';
$path = JPATH_SITE.'/'.$folder;
$url = JURI::root().$folder;
// sets a file name using a date-time prefix to make sure it is unique
$sig_name = date('Ymd-his').'_signature.png';
file_put_contents( $path.$sig_name, $decoded_image);

// add the file info into the form data
return array(
  'url' => $url.$sig_name,
  'path' => $path.$sig_name
);
// display the image if needed
echo "<img src='{$url}{$sig_name}' />";
// to add the image to an email add this line
// and put {sig_img} in the email template 
$form->data['sig_img'] = "<img src='{$url}{$sig_name}' />";
?>

The code above does nothing.

<?php
$data_pieces = explode(",", $form->data['signature9']);
$encoded_image = $data_pieces[1];
$decoded_image = base64_decode($encoded_image);

// set the folder where the images will be saved
$folder = 'images/photos/signatures'.$form->form['Form']['title'].'/';
$path = JPATH_SITE.'/'.$folder;
$url = JURI::root().$folder;
// sets a file name using a date-time prefix to make sure it is unique
$sig_name = date('Ymd-his').'_signature.png';
file_put_contents( $path.$sig_name, $decoded_image);

// add the file info to the form data
$form->data['signature9'] = $sig_name;
$form->files['signature9']['name'] = $sig_name;
$form->files['signature9']['link'] = $url.$sig_name;
$form->files['signature9']['path'] = $path.$sig_name;
// display the image if needed
echo "<img src='{$url}{$sig_name}' />";
// to add the image to an email add this line
// and put {sig_img} in the email template 
$form->data['sig_img'] = "<img src='{$url}{$sig_name}' />";
?>

This code creates a 0 byte .png file.

If you're on V6 it helps if you have the Syntax right.
​
$this->data("signature9", "not found")

I'm getting that syntax straight from the FAQ.

I tried using both the v5 and v6 examples from the FAQ. The v5 code is the one that creates the 0 byte png file whereas the v6 code does absolutely nothing at all.

But thank you. Switching out the syntax from the v5 example and putting in your code syntax works for v6. The image saves properly now.

Now I just need to get this image to go into an email. Do I just put ...

"<img src='{$url}{$sig_name}' />";

Or is there a different syntax I'll need for v6?

Have the PHP code block you're using to create the image return the <img src blahblahblah as a string and in your email use it with {var:php_action_name}

I'm using this code to generate the png image...
​

<?php
$data_pieces = explode(",", $this->data("signature9", "not found"));
$encoded_image = $data_pieces[1];
$decoded_image = base64_decode($encoded_image);

// set the folder where the images will be saved
$folder = 'images/photos/signatures'.$form->form['Form']['title'].'/';
$path = JPATH_SITE.'/'.$folder;
$url = JURI::root().$folder;
// sets a file name using a date-time prefix to make sure it is unique
$sig_name = date('Ymd-his').'_signature.png';
file_put_contents( $path.$sig_name, $decoded_image);

$form->data['signature9'] = $sig_name;
$form->files['signature9']['name'] = $sig_name;
$form->files['signature9']['link'] = $url.$sig_name;
$form->files['signature9']['path'] = $path.$sig_name;
// display the image if needed
echo "<img src='{$url}{$sig_name}' />";
// to add the image to an email add this line
// and put {sig_img} in the email template 
$form->data['sig_img'] = "<img src='{$url}{$sig_name}' />";

?>

And

"<img src='{$url}{$sig_name}' />";

will echo out the png image after the form is submitted. Is the php action name the name of the custom code element? I can't seem to get the shortcode to actually fill in the url, path to the file, and filename in the email for whatever reason.

Because those aren't short codes that's PHP code.

According to the v5 example just putting {sig_img} in the email template should work but it doesn't. I just assumed because I'm using a modified version of v5 code on v6 was the reason why using the {sig_img} tag in the email template was why it wasn't working.

V5 and V6 are different, and it wouldn't have worked the way you're wanting anyway.

I changed the $form->files code to $this->files and now I'm getting better results. Now [sig_img] shows in the array as a URL. Now all I need it to do is show that in the email template.

Shows in what array? If in the data array then you'd get it with {data:sig_img}

I figured it out. I had to add sig_img:{data:sig_img} to the data override on insert for the save data action. That allowed me to save the data in the mysql table. Then I just added {data:sig_img} to the email body and now the png is coming through in the email itself. Super happy. Thanks healyhatman for the pointers.