logo标签列表

使用JS插件在PhoneGap iOS上裁剪图像

iosimagecordovacropcordova-3
4

我是初次使用PhoneGap在iOS上，并在使用imgAreaSelect JS插件进行图片裁剪时遇到问题。 代码在Web浏览器中运行良好，但在iOS模拟器中没有任何变化。 图像是从本地文件夹导入的。 使用的代码如下：

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

请告诉我是否有其他方法可以使用PhoneGap剪裁图像？在Web浏览器中它的外观如下，但在iOS模拟器中不同。

enter image description here
2个回答
3
插件imgAreaSelect可能无法正常工作。我尝试过JCrop-http://deepliquid.com/content/Jcrop.html，它可以完美地工作。他们明确提到他们支持iOS、Android等触摸设备。只需按照链接上的演示进行操作即可。
1
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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接