Question

我正在制作我网站上的一项新功能，但实际上我很困难。我明显使用JCrop在我的网站上裁剪图像。

我被要求实施的新功能是允许用户更改正在裁剪的图像的颜色。

我现在有3张图片，Color，GrayScale和Sepia。

我可以使用javascript更改图像标记的来源，因此图像会在不重新加载的情况下进行更改，但是一旦启用了JCrop，我就无法执行此操作，因为它会替换原始图像以换取新图像。

我以为我可以禁用JCrop，替换图像然后重新启用，但我无法做到这一点。

我发现JCrop被破坏的示例（Demo zip中的example5）使用了一个对象：

jcrop_api = $ .Jcrop（'＃cropbox'）;

但我以不同的方式启用JCrop，更像示例3：

            jQuery('#cropbox').Jcrop({
                onChange: showPreview,
                onSelect: showPreview,
                aspectRatio: 1
            });

如何销毁JCrop以便我可以替换te Image？还有另一种方法吗？

每次用户更改图像颜色时，我都可以轻松地重新加载页面，但我们都知道这并不酷。

Answer 1

最新版本有setImage功能

http://deepliquid.com/projects/Jcrop/js/jquery.Jcrop.js

var jcrop_api;  
$().ready(function() {
            initJcrop();
            function initJcrop()
            {
                jcrop_api = $.Jcrop('#cropbox');
            };
});

然后致电

jcrop_api.setImage('server/uploads/image.jpg');

这是一个例子

http://deepliquid.com/projects/Jcrop/demos/tutorial5.html

Answer 2

我遇到过这种情况。我把我的jcropimage（#cropbox）放在div上，然后清空div的html。见下面的代码

的javascript：



try {
   $("#workspace").html('');
   } catch (Error)
   { }

//add cropbox on the fly
$("#workspace").prepend(//create img tag with id "cropbox" here... i can't seem to post my code - Stack Overflow mechanism);
$('#cropbox').attr("src", 'path/to/image');
$('#cropbox').Jcrop();

希望这有帮助。

Answer 3

第一个问题是你交换的图像大小是否相同？如果是，则以下情况应该有效：

$(document).ready(function(){
    // Just pulled some creative commons images off flickr for testing.
    var one = "http://farm5.static.flickr.com/4034/4580633003_e62e061b64_d.jpg";
    var two = "http://farm5.static.flickr.com/4060/4580650483_7881505c66_d.jpg";
    var three = "http://farm5.static.flickr.com/4034/4581278976_0c91bc0f6f_d.jpg";

    var api;

    function showPreview(){ alert('Changed'); }

    function setCrop()
    {
        api = $.Jcrop('#cropBox',{ aspectRatio: 1, onSelect: showPreview });
    }

    // Setup Jcrop for the original image
    setCrop();

    // Change the image and reset Jcrop
    $('#button').click(function(){
        api.destroy();
        var i = $('#cropBox').get(0).src = three;
        setCrop();
    });    

});

如果你的图像尺寸不同（交换风景画像？），事情会复杂一些。您需要等待图像加载，以便Jcrop可以获得新图像的正确大小。 vanilla javascript setTimeout函数可以工作，但由于它在全局范围内运行，你需要全局定义一些东西。缺点是你必须等待一两秒才能裁剪。

$(document).ready(function(){

    var one = "http://farm5.static.flickr.com/4034/4580633003_e62e061b64_d.jpg";
    var two = "http://farm5.static.flickr.com/4060/4580650483_7881505c66_d.jpg";
    var three = "http://farm5.static.flickr.com/4034/4581278976_0c91bc0f6f_d.jpg";

    // api needs to be defined globally so it can be accessed from the setTimeout function
    $.globalEval("var api;");

    // Also need to define your showPreview globally.
    $.globalEval("function showPreview(){ alert('Changed'); }");

    function setCrop()
    {
        // Need to pause a second or two to allow the image to load, otherwise the Jcrop plugin
        // will not update the image size correctly and if you change image size the picture
        // will be stretched.
        // Change the 1000 to however many seconds you need to load the new image.
        setTimeout("api = $.Jcrop('#cropBox',{ aspectRatio: 1, onSelect: showPreview     });",1000);
    }

    // Setup Jcrop for the original image
    setCrop();

    // Change the image and reset Jcrop
    $('#button').click(function(){
        api.destroy();
        var i = $('#cropBox').get(0).src = two;
        setCrop();
    });    

});

那应该可以帮到你。在jsFiddle的FireFox上为我测试了一切。您可以尝试here。

Answer 4

好问题！以下可以节省我们的时间，

function initJcrop(id) {

  jcrop_api = $.Jcrop('#'+id, {

    onSelect:   showCoords,
    onChange:   showCoords,
    bgColor:    'black',
    bgOpacity:  .4,
    boxWidth:   picture_width,
    boxHeight:  picture_height,
    setSelect:   [ (picture_width * 4/5), 
                   (picture_height * 4/5), 
                   (picture_width/5),
                   (picture_height/5) ]
  });
} 

function stopJcrop() {
  jcrop_api.destroy();
  return (false);
}

/* Example in use */

$('#start_button').bind('click', function() {
  $('#image_file').attr('src', server_file);
  initJcrop('raw_file');
});

$('#end_button').bind('click', function() {
  stopJcrop();
});

Answer 5

如果您想使用jcrop更改/重新加载图片，则必须使用setImage()函数：

//create var
var jscrop_api;

//set instance to our var
$('#cropping-image').Jcrop({
        onChange: setCoords,
        onSelect: setCoords
}, function () { jcrop_api = this; });

//change image for instance
jcrop_api.setImage("newPhoto.png");

Answer 6

我找到的最简单的解决方案：

$('.jcrop-holder img').attr('src', 'new image url');

Answer 7

我最终也遇到了这个问题。如果我添加和删除cropbox图像一切正常。

............
$("#wrapper").on('click', '.img-crop-trigger',function(e){ 
  //clear the wrapper
  $("#cropImageWrp").html("");
  // add the image cropbox
  $("#cropImageWrp").append("<img src='' id='cropbox'>");
  //set the image source
  $("#cropbox").attr("src", "/"+imageToCropUrl);
...............................

使用JCrop时更改图像

7 个答案: