Question

我在我的现场从事新的工作,我确实 bad不好。明显利用JCrop在我的网站上制作图像。

要求我执行的新特征是允许用户改变正在制作的图像的颜色。

目前有3个图像,有科罗、格雷斯凯和塞普亚。

我可以改变使用javascript的图像标签的来源,这样,图像就会在没有重载的情况下发生变化,但是,如果JCrop由于更换了新图像,我无法做到这一点。

我认为,我可以拆解JCrop,取代图像,然后是可复用的,但我会这样做。

例如,我发现,JCrop(在Demo zip的例5)使用物体:

jcrop_api=$.Jcrop(#crop Box );

但是,我能以不同的方式使JCrop成为可能,更像例3:

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

我怎么能够摧毁JCrop,以便我能够取代图像? 是否有其他办法这样做?

我每当用户改变形象时都能轻易上下页,但我们都知道,这并非冷静。

Answer 1

最新版本图像功能

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

然后打电话

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

这方面的一个例子

rel=“noreferer” http://deepliquid.com/projects/Jcrop/demos/tutorial5.html

Answer 2

我已走过这一局面。我把我的jcropimage(#crop箱)放在了四分五裂的 d子上,只是把四分之一空。见下文准则。

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

});

如果你的形象不同(为了景观而脱节吗?),那么事情就更加复杂了。你们需要等到图像装上,才能掌握新形象的正确规模。 vanilla javascript settimeout功能将发挥作用,但鉴于其在全球范围运作,你需要 gl清一些东西。倒数是,在你能够种植之前,你必须等待第二次或两次。

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

});

这应当帮助你。对我进行的所有测试都是在 j子上进行的。可在http://jsfiddle.net/HZXSQ/1/“rel=“noreferer”> 查询。

Answer 4

Good question! Followings may save our time,

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

如果你想要改变/重载形象,就必须使用<条码>查询/代码>功能:

//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

我最后也谈到这一问题。如果我补充并删除作物箱,那么所有东西都会 works。

............
$("#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);
...............................

友情链接