使用 JS 插件裁剪图像 |电话间隙| iOS答案

【问题标题】：Cropping an image using JS plugin | PhoneGap| iOS使用 JS 插件裁剪图像 |电话间隙| iOS
【发布时间】：2014-09-05 03:51:01
【问题描述】：

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

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

如果有其他方法可以使用 PhoneGap 裁剪图像，请告诉我？这是它在 Web 浏览器中的外观，而在 iOS 模拟器中不会发生同样的情况。

【问题讨论】：

标签： ios image cordova crop cordova-3

【解决方案1】：

插件 imgAreaSelect 可能不起作用。我已经尝试过 JCrop-http://deepliquid.com/content/Jcrop.html，它工作得非常好。他们明确提到他们有对 iOS、Android 等的触控支持。只需按照链接上的演示进行操作即可。

【讨论】：

【解决方案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>

【讨论】：