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
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