How can I get my cropped image to show?

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?

<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
</head>

<body>

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

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

<!--
NOTE: To change the aspect ratio, look in crop.css
The class 'default' links the div to the innit(); function
-->
<div class="default">
<div class="cropMain" align="center"></div>
<div class="cropSlider" align="left"></div>
<button class="cropButton" align="center">Crop</button>
</div>

</div>

<script>
// cropper settings
// --------------------------------------------------------------------------

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

// link the .default class to the crop function
one.init('.default');

// load image into crop
one.loadImg('img/one.jpg');

// on click of button, crop the image
// --------------------------------------------------------------------------

$('body').on("click", "button", function() {
toast("clicked");

// grab width and height of .crop-img for canvas
var width = $('.crop-container').width() - 80, // new image width
height = $('.crop-container').height() - 80; // new image height

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

img.src = coordinates(one).image;

img.onload = function() {

// draw image
ctx.drawImage(img, x, y, w, h, 0, 0, width, height);

// display canvas image
$('canvas').addClass('output').show().delay('4000').fadeOut('slow');

}

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

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

});

// on click of .upload class, open .uploadfile (input file)
// --------------------------------------------------------------------------

$('body').on("click", ".newupload", function() {
$('.uploadfile').click();
});

// on input[type="file"] change
$('.uploadfile').change(function() {

loadImageFile();

// resets input file
$('.uploadfile').wrap('<form>').closest('form').get(0).reset();
$('.uploadfile').unwrap();

});

// get input type=file IMG through base64 and send it to the cropper
// --------------------------------------------------------------------------

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.getElementById("uploadfile").files.length === 0) return

var oFile = document.getElementById("uploadfile").files[0];

if (!rFilter.test(oFile.type)) {
return;
}

oFReader.readAsDataURL(oFile);
}

oFReader.onload = function(oFREvent) {
//toast("onload happend");

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

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

// link the .default class to the crop function
one.init('.default');

// load image into crop
one.loadImg(oFREvent.target.result);

};

//===================================================================================================================================================

function doCrop(photo) {
try {

// cropper settings
// --------------------------------------------------------------------------

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

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

// link the .default class to the crop function
one.init('.default');

// load image into crop
one.loadImg(photo);

} catch (e) {
console.log(e);
}
}
</script>

</body>

</html>
1 person has
this question
+1
This topic is no longer open for comments or replies.