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:
I am able to upload photos. but the moment I click a photo from the camera to upload it, I get the error:
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:
This is the error: where the input cannot be read:
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)
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:
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)