使用JCrop时更改图像

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上为我测试了一切.你可以在这里试试.