Page 1 of 1

How can I get my cropped image to show?

Posted: Thu Oct 09, 2014 10:04 pm
by adam griffin

I am using a third-party cropping tool to crop images. It works when I use the file input. It crops the picture and displays the cropped image. I have added a button that calls the camera service to get images from the gallery to the crop tool. It successfully gets the base64 from the gallery of the image and displays it on to the cropping canvas but when I crop the image it does not show the cropped image as it does for when I crop a image with the file input component.

This is my code for the crop component. After the call is succesful to the gallery and the image is choosen the doCrop function is called and sets the base64 to the cropping canvas. How can I get the cropped image to display as it do for when the file input component is clicked?

code<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1&#46;0, minimum-scale=1&#46;0" />
</head>

<body>

Code: Select all

 <!-- 

Allow users to send an image from their computer to the cropper&#46;
No actual upload required&#46;
-->
<input type="file" class="uploadfile" id="uploadfile" />
<div align="center" class="newupload">Upload an image?<>

Code: Select all

 <div class="example" align="center"> 

     <!-- 
NOTE: To change the aspect ratio, look in crop&#46;css 
The class 'default' links the div to the innit(); function 

-->
<div class="default">
<div class="cropMain" align="center"><>
<div class="cropSlider" align="left"><>
<button class="cropButton" align="center">Crop</button>
<>

Code: Select all

 <> 

 <script> 
     &#47;&#47;  cropper settings 
     &#47;&#47; -------------------------------------------------------------------------- 

     &#47;&#47; create new object crop 
     &#47;&#47; you may change the "one" variable to anything 
     var one = new CROP(); 

     &#47;&#47; link the &#46;default class to the crop function 
     one&#46;init('&#46;default'); 

     &#47;&#47; load image into crop 
     one&#46;loadImg('img/one&#46;jpg'); 

     &#47;&#47;  on click of button, crop the image 
     &#47;&#47; -------------------------------------------------------------------------- 

     $('body')&#46;on("click", "button", function() { 
         toast("clicked"); 

        &#47;&#47; grab width and height of &#46;crop-img for canvas 
         var width = $('&#46;crop-container')&#46;width() - 80, &#47;&#47; new image width 
             height = $('&#46;crop-container')&#46;height() - 80; &#47;&#47; new image height 

         $('canvas')&#46;remove();  &#47;&#47;$('canvas')&#46;remove(); 
         &#47;&#47;$('&#46;default')&#46;after('<canvas width="' + width + '" height="' + height + '" id="canvas"/>'); &#47;&#47;$('&#46;default')&#46;after('<canvas width="' + width + '" height="' + height + '" id="canvas"/>'); 
         var canvas = jQuery('<canvas width="' + width + '" id="canvas" height="' + height + '"></canvas>'); 
$('&#46;default')&#46;after(canvas); 
         &#47;&#47;var ctx = document&#46;getElementById('canvas')&#46;getContext('2d'), 
         var c = canvas[0]; 
var ctx = c&#46;getContext("2d"), 
             img = new Image, 
             w = coordinates(one)&#46;w, 
             h = coordinates(one)&#46;h, 
             x = coordinates(one)&#46;x, 
             y = coordinates(one)&#46;y; 

         img&#46;src = coordinates(one)&#46;image; 

         img&#46;onload = function() { 

             &#47;&#47; draw image 
             ctx&#46;drawImage(img, x, y, w, h, 0, 0, width, height); 

             &#47;&#47; display canvas image 
             $('canvas')&#46;addClass('output')&#46;show()&#46;delay('4000')&#46;fadeOut('slow'); 

         } 

         /* 
         &#47;&#47;Get img component&#46; You should replace "mobileimage_1" with your img component name&#46; 
var img = Apperyio("mobileimage_1"); 
var width = img&#46;width(); 
var height = img&#46;height(); 
var canvas = jQuery('<canvas width="' + width + '" height="' + height + '"></canvas>'); 
var c = canvas[0]; 
var ctx = c&#46;getContext("2d"); 
ctx&#46;drawImage(img[0], 0, 0, width, height); 
         */ 

         toast('width="' + width + '" id="canvas" height="' + height); 

     }); 

     &#47;&#47;  on click of &#46;upload class, open &#46;uploadfile (input file) 
     &#47;&#47; -------------------------------------------------------------------------- 

     $('body')&#46;on("click", "&#46;newupload", function() { 
         $('&#46;uploadfile')&#46;click(); 
     }); 

     &#47;&#47; on input[type="file"] change 
     $('&#46;uploadfile')&#46;change(function() { 

         loadImageFile(); 

         &#47;&#47; resets input file 
         $('&#46;uploadfile')&#46;wrap('<form>')&#46;closest('form')&#46;get(0)&#46;reset(); 
         $('&#46;uploadfile')&#46;unwrap(); 

     }); 

     &#47;&#47;  get input type=file IMG through base64 and send it to the cropper 
     &#47;&#47; -------------------------------------------------------------------------- 

     oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svgxml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; 

     function loadImageFile() { 

         if (document&#46;getElementById("uploadfile")&#46;files&#46;length === 0) return 

         var oFile = document&#46;getElementById("uploadfile")&#46;files[0]; 

         if (!rFilter&#46;test(oFile&#46;type)) { 
             return; 
         } 

         oFReader&#46;readAsDataURL(oFile); 
     } 

     oFReader&#46;onload = function(oFREvent) { 
         &#47;&#47;toast("onload happend"); 

         $('&#46;example')&#46;html('<div class="default" align="center"><div class="cropMain" align="center"><><div class="cropSlider" align="left"><><button class="cropButton" align="center">Crop</button><>'); 

         &#47;&#47; create new object crop 
         &#47;&#47; you may change the "one" variable to anything 
         one = new CROP(); 

         &#47;&#47; link the &#46;default class to the crop function 
         one&#46;init('&#46;default'); 

         &#47;&#47; load image into crop 
         one&#46;loadImg(oFREvent&#46;target&#46;result); 

     }; 

     &#47;&#47;=================================================================================================================================================== 

     function doCrop(photo) { 
         try { 

             &#47;&#47;  cropper settings 
             &#47;&#47; -------------------------------------------------------------------------- 

             $('&#46;example')&#46;html('<div class="default" align="center"><div class="cropMain" align="center"><><div class="cropSlider" align="left"><><button class="cropButton" align="center">Crop</button><>'); 

             &#47;&#47; create new object crop 
             &#47;&#47; you may change the "one" variable to anything 
             one = new CROP(); 

             &#47;&#47; link the &#46;default class to the crop function 
             one&#46;init('&#46;default'); 

             &#47;&#47; load image into crop 
             one&#46;loadImg(photo); 

         } catch (e) { 
             console&#46;log(e); 
         } 
     } 
 </script> 

</body>

</html>/code


How can I get my cropped image to show?

Posted: Fri Oct 10, 2014 5:21 am
by Evgene Karachevtsev

Hello Adam,

Please look at the plugin description, whether it can work with base64 encoded images and not with files. Also please note that camera service can return not only base64 encoded string but also the address of the file, maybe it will fit you.


How can I get my cropped image to show?

Posted: Fri Oct 10, 2014 5:31 am
by adam griffin

It can work with base64. I am just not sure how can I get the cropped base64 image. I guess you could say I am confused on how the cropped image is displayed on the canvas.


How can I get my cropped image to show?

Posted: Tue Oct 14, 2014 9:53 am
by Kateryna Grynko

Hi Adam,

Please check this thread, there are a lot of links that can be helpful:
https://getsatisfaction.com/apperyio/...