标签: jcrop

我想让用户裁剪图像,我找到了这个JQuery插件 - http://deepliquid.com/content/Jcrop.html

我尝试将它与Angular-ui的Jquery passthrough选项一起使用,将ui-jq=Jcrop指令添加到<img>

问题是如果我使用ng-src动态更改图像它不起作用,看不到任何东西.如果我将其更改为src并放置一个静态URL我可以看到图像和Jcrop.

我该如何解决这个问题？另外,我怎样才能听Jcrop的回调知道用户的选择是什么？

是否有更好/更简单的方法将图像裁剪功能添加到AngularJS？

我正在使用我的Jcrop脚本中的本教程中的代码:http://blogaddition.com/2012/12/crop-an-image-and-upload-using-jquery-html5-and-php/

只要我不将图像放入Bootstrap模态,它就能正常工作.之后,图像被裁剪错误.

我试图添加boxWidth和boxHeight:

 $('#load_img').Jcrop({
       minSize: [32, 32], // min crop size
       aspectRatio : 1, // keep aspect ratio 1:1
       bgFade: true, // use fade effect
       bgOpacity: .3, // fade opacity
       boxWidth: 200, // added
       boxHeight: 200, // added
       onChange: showThumbnail,
       onSelect: showThumbnail
 }

但它没有帮助.如何让jCrop在Bootstrap模式下工作？

我目前正在设置图片上传裁剪序列.

该应用程序需要强制执行最小大小,但这会导致JCrop行为尴尬:

• 单击而不拖动不会产生任何效果.
• 单击并轻微拖动可立即选择最小高度.

一个可能的解决方案将解决上述问题:

• 界面打开时带有默认选择.
• 无法取消选择.

JCrop具有默认选择的内置功能,但是我还没有确定内置的配置/行为以防止取消选择.

到目前为止的尝试 -

我试过这条路

$.Jcrop.defaults.onRelease = function(e) {
     e.preventDefault();
     e.stopPropagation();
}

我也尝试在几个地方修改插件的源代码,以便通过return打开这些函数定义来短路(也许)执行取消选择的函数:

doneSelect Selection.release Selection.done

......没有预期的结果.

有小费吗？

我可以裁剪我的图像并点击裁剪.但后来出了问题,因为我不确切知道如何保存这个图像.

我使用php中的imagecreatefromjpeg.这段代码看起来像这样:

<?php
SESSION_start();
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
$targ_w = 200;
$targ_h = 400;
$jpeg_quality = 90;

$src = $_SESSION['target_path'];
$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, 'uploads/cropped/' . 'filename');

exit;
}

?>

我保存原始图像的PHP代码如下所示:

     <?php 
         session_start();
         $target = "uploads/"; 
         $target = $target . basename( $_FILES['filename']['name']) ; 
         $_SESSION['target_path'] = $target;

         $ok=1; 
         if(move_uploaded_file($_FILES['filename']['tmp_name'], $target)) 
         {
         echo "De afbeelding *". basename( $_FILES['filename']['name']). "* is geupload naar de map 'uploads'";
         } 
         else {
         echo "Sorry, er …

我有这个代码:

<div class='mini'>
    <div id='wrap_jcrop' class='td_wrap'>
        <img id='img2crop' src=''>
    </div>
</div>

有了这个CSS:

div.mini {
    width: 300px;
    height: 200px;
    display: table;
}

div.td_wrap {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

img2crop的图像源是动态加载的,并使用Jcrop api处理.但是Jcrop对齐左边的图像.

如何将图像对准div的中心？

我已广泛使用过Jcrop,但我想以与Facebook用于裁剪封面图像非常类似的方式裁剪图像.

因此,我希望div具有一些固定大小,其中背景用于保持其原始大小的可拖动图像,用户拖动并找到要裁剪的合适可见区域.

根据我所学到的,在JCrop中,原始图像具有固定大小,可拖动区域在其上移动,您想要裁剪.我只想要相反.要拖动的图像和要修复的选择区域.

有没有办法使用JCrop？

编辑: 由于我已经有一段时间发布了答案,另一个答案有助于更好的方式.请检查出来

我正在尝试使用Jcrop裁剪图像,但是当我在图像上使用jqueryrotate时,会发生奇怪的事情.

我将图像旋转90度,然后激活JCrop,JCrop不跟随旋转的图像,所以我也旋转了Jcrop-holder.生成的图像没问题,但是当我选择要裁剪的部分时,我注意到我的跟踪器也已旋转.当我向上拖动时,它向右移动,当我向左拖动时,它向下移动.

怎么了

然后它去了 如何使裁剪选择工具保持直立？

我的HTML:

    <div class="img-canvas" style="background-color:#cccccc;" >
            <img id="image_canv" src="<?php echo $imagesource;?>"> 
        </div> 

我的Jquery:

$('#rotatephoto').click(function () {
value += 90;

JcropAPI = $('#image_canv').data('Jcrop');
    if(JcropAPI != null)
    {
    JcropAPI.destroy();
    }

var h = $('.img-canvas').height();
var w = $('.img-canvas').width();
$('.img-canvas').css("position","fixed");
$('.img-canvas').css("width",w);

$('.img-canvas').css("height",h);

$('#image_canv').Jcrop({
    onSelect: showCoords2,
    onChange: showCoords2,
    setSelect:   [ 0, 100, 50, 50 ]
    });

JcropAPI = $('#image_canv').data('Jcrop');
JcropAPI.enable();

var h2 = $('.jcrop-holder').height();
var w2 = $('.jcrop-holder').width();

if(h2  < 630)
{
var tempp = (630 - h2)/2;
$('.jcrop-holder').css("margin-top",tempp);
} …

我在使用Jcrop在网站的移动版本的响应宽度图像上遇到了麻烦.

当我对上传的图像应用100%的宽度设置时 - 为了让移动设备上的用户成为提供成功裁剪的最佳选择,输出的裁剪不是所选的裁剪区域.

我认为这是因为jcrop是从真实图像的大小开始工作,而不是调整大小的版本(100%宽度),但我不知道如何修复它.

我已经看到了这个问题(和答案),但我不明白如何申请我的Jcrop函数:

$(function(){
    $('#target').Jcrop({
            aspectRatio: 4/3,
            bgColor:     '#000',
            bgOpacity:   .4,
            onSelect: updateCoords
        });
        });
        function updateCoords(c)
        {
            $('#x').val(c.x);
            $('#y').val(c.y);
            $('#w').val(c.w);
            $('#h').val(c.h);
        };
        function checkCoords()
        {
            if (parseInt($('#w').val())) return true;
            alert('Please select a crop region then press submit.');
            return false;
        };

如果我不对上传的图像应用任何大小的CSS,这可以很好地工作,但是一旦我开始尝试管理图像大小以进行显示,裁剪的图像就会歪斜.

我认为谷歌会在这方面取得更多成果,因为我认为这是一个常见的问题 - 或者我可能只是看得太明显.

我希望有人能帮帮忙.

我想在图片的中心开始JCrop选择.有办法吗？

有选择还是什么？它没有在手册中指定.

我们必须手动计算吗？

我正在尝试使用jcrop保存裁剪的图像,基于x,y,w,h.我发送到我的PHP文件,轴x,y和宽度/高度,但裁剪区域是错误的.

这是我的php功能

$axis_x = $_POST["x"];
$axis_y = $_POST["y"];
$width = $_POST["w"];
$height = $_POST["h"];
$path_foto = "imgs/3.jpg";
$targ_w = $width;
$targ_h =  $height;
$jpeg_quality = 90;
$src = $path_foto;
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor($targ_w, $targ_h);

imagecopyresampled($dst_r, $img_r, 0, 0, $axis_x, $axis_y, $width, $targ_w, $targ_h, $height);

imagejpeg($dst_r, $path_foto, $jpeg_quality);

每当图像被重新显示时,此坐标由jcrop在每次隐藏的输入中设置.问题始终是错误的区域.

我做错了什么？