Hello Admin KK,
I am trying to use Html2Canvas js plugin to basically create a screen shot of the content of a div on my website and save the image to a cloned template from the front-end.
1. I created a securefile type in a cloned template
2. The Html2Canvas plugin creates the screenshot image as a base64 data and I use javascript put the base64 image data into a hidden input field so it can be submitted via the form's url to another page.
3. On the second page, I "GET" the base64 data from the url and put it into another hidden input field (name is _sg) so that it can be submitted together with couch managed form data. I couldn't put it into a input type file because it doesn't accept base64 data.
4. I tried using the php script below by tweaking trendoman's multi upload script and placed it before Couch's "<?php require_once( 'kt-admin/cms.php' ); ?>" tag so I can convert the image into a format couch's <db_persist> can use so it can get persisted into the cloned page but it seems not to be working.
Can you please help on how to go about this? Thank you
I am trying to use Html2Canvas js plugin to basically create a screen shot of the content of a div on my website and save the image to a cloned template from the front-end.
1. I created a securefile type in a cloned template
- Code: Select all
<cms:editable name="trip_capture"
allowed_ext='jpg, jpeg, png, gif'
max_size='10000'
type='securefile'
label='Trip distance render capture'
desc="A screen shot of the trip distance render"
max_width='9000'
quality='100'
thumb_width='730'
thumb_height='457'
show_preview='1'
use_thumb_for_preview='1'
enforce_max='1'
order="100"
delete_caption=""
/>
2. The Html2Canvas plugin creates the screenshot image as a base64 data and I use javascript put the base64 image data into a hidden input field so it can be submitted via the form's url to another page.
3. On the second page, I "GET" the base64 data from the url and put it into another hidden input field (name is _sg) so that it can be submitted together with couch managed form data. I couldn't put it into a input type file because it doesn't accept base64 data.
4. I tried using the php script below by tweaking trendoman's multi upload script and placed it before Couch's "<?php require_once( 'kt-admin/cms.php' ); ?>" tag so I can convert the image into a format couch's <db_persist> can use so it can get persisted into the cloned page but it seems not to be working.
- Code: Select all
<?php
if(isset($_POST['_sg'])) {
define('UPLOAD_DIR', '../uploads/image/');
$image_parts = explode(";base64,", $_GET['_sg']);
$image_type_aux = explode("image/", $image_parts[0]);
$image_type = $image_type_aux[1];
$image_base64 = base64_decode($image_parts[1]);
$filename = uniqid() . '.' . $image_type;
$file = UPLOAD_DIR . $filename; //'.png'
file_put_contents($file, $image_base64);
if( isset( $_GET['_sg'] ) ){
// Files submitted via multiple input.
$uploaded = $file;
$mask = 'trip_capture';
//Get file info
$tmpFilePath = UPLOAD_DIR;
$tmpFileName = $filename;
$tmpFileMime = 'image/' . $image_type;
$tmpFileSize = filesize($file);
$tmpFileErro = 0;
//Make sure we have a filepath, so file is uploaded to server okay
if( $tmpFilePath && !$tmpFileErro ){
// make sure format matches the expected by CouchCMS
$_FILES['f_' . $mask ] = array(
'name' => $tmpFileName,
'type' => $tmpFileMime,
'tmp_name' => $tmpFilePath,
'error' => '0',
'size' => $tmpFileSize );
}
}
}
?>
Can you please help on how to go about this? Thank you