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

我是在iOS上使用PhoneGap的新手，並且在使用imgAreaSelect JS插件裁剪圖像時遇到困難。該代碼在Web瀏覽器中運行良好，但不會在iOS模擬器中顯示任何更改。正在從使用本地folder.The代碼導入的圖像如下：使用JS插件裁剪圖像| PhoneGap的| iOS

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

請讓我知道，如果有任何其他方式使用PhoneGap的裁剪圖像？這是它在Web瀏覽器中的外觀，iOS模擬器中也沒有這種情況。 enter image description here

來源

2014-07-15 apen

插件imgAreaSelect可能不起作用。我試過JCrop- http://deepliquid.com/content/Jcrop.html，它工作得很好。他們明確提到他們對iOS，Android等有Touch支持。只需按照鏈接上的演示。

來源

2014-07-16 00:50:35 rumshenoy

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>

來源

2016-09-22 08:55:13

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

回答

相關問題