All geek questions in one place

Crop image using JS plugin | Phonegap | IOS

I am new to using PhoneGap on iOS and fixated on cropping the image using the imgAreaSelect JS plugin. The code works well in web browsers until it shows any changes in the iOS simulator. The image is imported from the local folder. The code used looks like this:

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

Please let me know if there is another way to crop the image using PhoneGap? Here's what it looks like in a web browser, and the same thing doesn't happen in the iOS simulator.enter image description here

+4
source share
2 answers

imgAreaSelect, , . JCrop- http://deepliquid.com/content/Jcrop.html, . , Touch iOS, Android .. .

+3
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.imtqy.com/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>
+1

Source: https://habr.com/ru/post/1548432/

More articles:


All Articles