Jquery 使用JCrop时更改图像

我正在我的网站上开发一个新功能，我被绊倒了。我使用JCrop显然是为了在我的网站上裁剪图像

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

我现在有3个图像，彩色，灰度和深褐色

我可以使用javascript更改图像标记的源代码，以便在不重新加载的情况下更改图像，但一旦启用JCrop，我就无法这样做，因为它会将原始图像替换为新图像

我想我可以禁用JCrop，替换映像，然后重新启用，但我不能这样做

我发现的JCrop被销毁的示例（Demo zip中的示例5）使用了一个对象：

jcrop_api=$.jcrop（'cropbox'）

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

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

如何销毁JCrop以便替换te映像？还有别的办法吗

---

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

第一个问题是，您交换的图像大小是否相同？如果是，则应采取以下措施：

$(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();
    });    

});

那应该能帮你。我在JSFIDLE的FireFox上测试了一切。你可以试试。

问得好！ 以下内容可以节省我们的时间

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();
});

---

我遇到过这种情况。我已经将我的jcropmage（#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();

---

希望这有帮助。

最新版本具有设置图像功能

然后打电话

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

这里有一个例子

---

我最后也遇到了这个问题。如果我添加和删除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);
...............................

。。。。。。。。。。。。
$（“#包装器”）。在（'click'，'img crop trigger'，函数（e）{
//清除包装纸
$（“#cropImageWrp”）.html（“”）；
//添加图像cropbox
$（“#cropImageWrp”）。追加（“”）；
//设置图像源
$（“#cropbox”）.attr（“src”，““/”+imageToCropUrl）；
...............................

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

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

---

如果要使用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");

---

签名是

function setImage（src，callback）

因此，当映像加载完成时，您可以进行回调。并且API创建过程是无润滑的。请改用它

var jcrop_API；$（'#target'）.jcrop（选项，函数（）{jcrop_API=this}）

小心，

var API=$（'img'）.jcrop（选项）

不起作用使用

$.Jcrop（$（'img'）[0]，选项）

来防止浏览器缓存映像：Jcrop_api.setImage（filename+'？'+d.getTime（））；@Michael:非常感谢您使用.setImage（）解决了我的问题，链接不起作用。这个解决方案真的救了我的命，非常感谢。如果你想刷新预览窗格，即使是在2014年，这是唯一能帮你的。非常感谢。这真是一个很棒的答案。我浪费了4个小时，在使用此代码后也保存了同样的内容。2019年，这仍然有帮助：）谢谢！

//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");