Problems, need help? Have a tip or advice? Post it here.
3 posts Page 1 of 1
Greetings to All and KK Sir!

I hope all are doing fine and are taking care during the pandemic!

I am having a small problem that I am facing. I am trying to allow the camera to capture an image and upload it. My code is as follows:
Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<cms:template title="Camera Capture" clonable="1" >
   <cms:editable name='uploaded_image' required='1' allowed_ext='jpg, jpeg, png, gif' max_size='5120' type='securefile' show_preview="1" quality='80' width="1500" max_height="2048" enforce_max="1" />
</cms:template>
<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Camera Test</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   </head>
   <body>

      <cms:set submit_success="<cms:get_flash 'submit_success' />" />
       <cms:if submit_success >
           <h4>Success: Your application has been submitted.</h4>
       </cms:if>

       <cms:form
           masterpage=k_template_name
           mode='create'
           enctype='multipart/form-data'
           method='post'
           anchor='0'
           id="my_form"
           >

           <cms:if k_success >
              <cms:php>
                 $image_name =  'path_of_Image/Name_of_Image.jpg|png';
              </cms:php>
               <cms:db_persist_form
                   _invalidate_cache='0'
                   _auto_title='0'
                   k_page_title="<cms:date format='Y-m-d H:i:s' />"
                   k_page_name="<cms:random_name />"
               />
               <cms:if k_success >
                  <cms:set_flash name='submit_success' value='1' />
                  <cms:redirect k_page_link />
              </cms:if>
           </cms:if>

           <cms:if k_error >
               <div class="error">
                   <cms:each k_error >
                       <br><cms:show item />
                   </cms:each>
               </div>
           </cms:if>

           <div class="container">
              <div class="row">
                 <div class="col-md-6">
                    <label>Capture image</label>
                    <br>
                    <cms:hide>
                       <cms:input name="uploaded_image" type="bound" />
                    </cms:hide>
                    <div class="input-group">
                     <input class="form-control" id="f_uploaded_image" name="f_uploaded_image" type="file" accept="image/*" capture="camera" />
                     <span class="input-group-btn">
                        <button class="btn btn-primary" type="button" onclick="submit()">Upload Image</button>
                     </span>
                     <!-- <span onclick="submit()">submit</span> -->
                  </div>
                 </div>
              </div>
           </div>

       </cms:form>

      <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
   </body>
</html>
<?php COUCH::invoke(); ?>


I am able to upload photos. but the moment I click a photo from the camera to upload it, I get the error:
uploaded_image: The dimensions of image exceed the permitted 2048px X 2048px


How can I adjust the image dimensions to fit to the securefile region specifications? I tried a simple script but the image comes up null.

The script is:
Code: Select all
function submit(f_uploaded_image)
{
    var img = document.getElementById(f_uploaded_image);
    var $img = $(img);
    var maxWidth = 2000;
    var maxHeight = 2000;
    var width = img.width;
    var height = img.height;
    var aspectW = width / maxWidth;
    var aspectH = height / maxHeight;

    if (aspectW > 1 || aspectH > 1) {
        if (aspectW > aspectH) {
            $img.width(maxWidth);
            $img.height(height / aspectW);
        }
        else {
            $img.height(maxHeight);
            $img.width(width / aspectH);
        }
    }
    $("#my_form").submit();
}

This is the error: where the input cannot be read:
camera-test-error-script.png
camera-test-error-script.png (51.21 KiB) Viewed 1326 times


Need not be this script if there is a workaround using php, that would also do. I gave a try to the GD Graphics Library but could not get my head around it.

Any solution to this issue can come in handy for web apps that need to have the camera functionality that are being developed in CouchCMS.

Any help would be really appreciated.

Regards,
GenXCoders
(Aashish)
Image
where innovation meets technology
Hi,

The code you are trying to use is front-end JS and won't be able to modify the back-end behaviour of Couch in any way.

I think you'll have to specify sufficiently large values (in securefile) for the dimensions to cover the size outputted by cameras.
@KK Sir,
I never thought of it as you mentioned.
I think you'll have to specify sufficiently large values (in securefile) for the dimensions to cover the size outputted by cameras.


My current editable is defined as (only for testing):
Code: Select all
<cms:editable name='uploaded_image' allowed_ext='jpg, jpeg, png, gif' max_size='5120' type='securefile' show_preview="1" quality='80' max_width="7500" max_height="7500" enforce_max="1" />

And the best part is, it works.

Thanks a lot sir!

Regards,
GenXCoders
(Aashish)
Image
where innovation meets technology
3 posts Page 1 of 1