Question

我是在iOS上使用PhoneGap的新手，并且使用imgAreaSelect JS插件停留在裁剪图像上。该代码在Web浏览器中运行良好，但未在iOS模拟器中显示任何更改。正在从本地文件夹导入图像。使用的代码如下：

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

如果有其他方法使用PhoneGap裁剪图片，请告诉我们？这就是它在Web浏览器中的外观，并且在iOS模拟器中也不会发生这种情况。 enter image description here

Answer 1

插件imgAreaSelect可能无法正常工作。我尝试过JCrop - http://deepliquid.com/content/Jcrop.html，它的工作原理非常好。他们明确提到他们有iOS，Android等Touch支持。只需按照链接上的演示即可。

Answer 2

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>

使用JS插件剪裁图像| PhoneGap的| iOS版

2 个答案: