Recortar una image con el complemento JS | PhoneGap | iOS

Soy nuevo en usar PhoneGap en iOS y estuve atrapado en recortar una image con el complemento imgAreaSelect JS. El código funciona bien en los browseres web, mientras que no muestra ningún cambio en el simulador de iOS. La image se está importando desde una carpeta local. El código utilizado es el siguiente:

$('#testimg').imgAreaSelect({ handles: true, aspectRatio: '16:9' }); 

¿Me avisan si hay alguna otra manera de recortar una image usando PhoneGap? Así es como se ve en el browser web y no ocurre lo mismo en el simulador de iOS. introduzca la descripción de la imagen aquí

El complemento imgAreaSelect probablemente no funcione. He intentado JCrop- http://deepliquid.com/content/Jcrop.html y funciona perfectamente bien. Mencionan explícitamente que tienen soporte Touch para iOS, Android, etc. Simplemente siga la demostración en el enlace.

 Jcrop Does'nt support touch event in phone gap so there is no need to use I have spend 3 hour on it. I just want to crop after upload image from camera or salary in phonegap. I use following it is working fine. 

https://github.com/acornejo/jquery-cropbox

 <?php if ($_SERVER['REQUEST_METHOD'] == 'POST') { $targ_w = 640; $targ_h=280; $jpeg_quality = 90; $save=dirname(__FILE__).'/files/abcd.jpg'; $src = dirname(__FILE__).'/img/img.jpg'; $img_r = imagecreatefromjpeg($src); $dst_r = ImageCreateTrueColor( $targ_w, $targ_h ); imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],$targ_w,$targ_h,$_POST['w'],$_POST['h']); header('Content-Type: image/jpeg'); imagejpeg($dst_r,null ,$jpeg_quality); exit; } ?> <!DOCTYPE html> <!-- saved from url=(0041)http://acornejo.github.io/jquery-cropbox/ --> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery-cropbox</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"> <link type="text/css" media="screen" rel="stylesheet" href="js/jquery.cropbox.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/hammer.js"></script> <script type="text/javascript" src="js/jquery.cropbox.js"></script> <script type="text/javascript" defer=""> $( function () { $(function () { var r = $('#results'), x = $('.cropX', r), y = $('.cropY', r), w = $('.cropW', r), h = $('.cropH', r); $('#cropimage').cropbox({ width: 500, height: 240 }).on('cropbox', function (event, results, img) { console.log("on crop"); x.text(results.cropX); y.text(results.cropY); w.text(results.cropW); h.text(results.cropH); $("#x").val(results.cropX); $("#y").val(results.cropY); $("#w").val(results.cropW); $("#h").val(results.cropH); }); }); }); </script> </head> <body> <form action="index.php" method="post" onsubmit="return checkCoords();"> <div style="width:100%;"> <img id="cropimage" alt="" src="img/img.jpg" /> </div> <div id="results"> <b>X</b>: <span class="cropX"></span> <b>Y</b>: <span class="cropY"></span> <b>W</b>: <span class="cropW"></span> <b>H</b>: <span class="cropH"></span> <input type="text" name="x" id="x" size="4" /> <input type="text" name="y" id="y" size="4" /> <input type="text" name="w" id="w" size="4" /> <input type="text" name="h" id="h" size="4" /> </div> <input type="submit" /> </form> </body></html>