blocks|key|2217110|text|第一个问题是交换的图像大小是否相同？如果是这样的话，下面的方法应该是可行的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2217111|$(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();
++++});++++

});|code-block|syntax|javascript|2217112|如果你的图片是不同大小的(把肖像换成风景？)事情有点复杂。您需要等待图像加载，这样Jcrop才能获得新图像的正确大小。vanilla+javascript+setTimeout函数可以工作，但由于它在全局范围内运行，您需要在全局范围内定义一些东西。缺点是，您必须等待一到两秒才能裁剪。|2217113|$(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();
++++});++++

});|2217114|这应该能帮到你。一切都在jsFiddle的FireFox上为我测试过。你可以在here上试试。|offset|length|2217115|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/HZXSQ/1/^0|0|0|0|0|13|4|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

First question is if the images you are swapping are the same size? If they are, the following should work:

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

});
</code></pre>

If your images are different sizes (swapping a portrait for landscape?) things are a little more complicated. You will need to wait for the image to load so Jcrop can get the correct size of the new image. The vanilla javascript setTimeout function will work, but since it runs in global scope, you need to define a few things gloabally. The downside is that you have to wait a second or two before you can crop.

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

});
</code></pre>

That should help you out. Everything tested out for me on FireFox over at jsFiddle. You can try it out <a href="http://jsfiddle.net/HZXSQ/1/" rel="noreferrer">here</a>.

blocks|key|4329488|text|问得好！下面的内容可以节省我们的时间，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4329489|function+initJcrop(id)+{

++jcrop_api+=+$.Jcrop('#'%2Bid,+{

++++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();
});|code-block|syntax|javascript|4329490|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Good question!
Followings may save our time,

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

blocks|key|5746767|text|我遇到过这种情况。我把我的jcropimage(#cropbox)放在一个div上，然后清空div的html。请参阅下面的代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5746768|javascript：|5746769|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();|code-block|syntax|javascript|5746770|希望这能有所帮助。|5746771|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I've come across this situation. I've put my jcropimage(#cropbox) on a div and just empty the html of the div. See code below

javascript:

<pre><code>

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

</code></pre>

Hope this helps.

blocks|key|4329514|text|最新版本有setImage功能|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4329515|http://deepliquid.com/projects/Jcrop/js/jquery.Jcrop.js|offset|length|4329516|var+jcrop_api;++
$().ready(function()+{
++++++++++++initJcrop();
++++++++++++function+initJcrop()
++++++++++++{
++++++++++++++++jcrop_api+=+$.Jcrop('#cropbox');
++++++++++++};
});|code-block|syntax|javascript|4329517|然后调用|4329518|jcrop_api.setImage('server/uploads/image.jpg');+|4329519|这里有一个例子|4329520|http://deepliquid.com/projects/Jcrop/demos/tutorial5.html|4329521|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|1J|0|0|0|0|0|0|0|1L|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|17|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|19|8|@]|9|@$D|1A|E|1B|1|1C]]|A|$]]|$1|S|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|C]]|Z|$5|V|W|X|A|$Y|R]]]]

latest version has setImage function

<a href="http://deepliquid.com/projects/Jcrop/js/jquery.Jcrop.js" rel="noreferrer">http://deepliquid.com/projects/Jcrop/js/jquery.Jcrop.js</a>

<pre><code>var jcrop_api; 
$().ready(function() {
 initJcrop();
 function initJcrop()
 {
 jcrop_api = $.Jcrop('#cropbox');
 };
});
</code></pre>

Then call

<pre><code>jcrop_api.setImage('server/uploads/image.jpg'); 
</code></pre>

Theres an example here

<a href="http://deepliquid.com/projects/Jcrop/demos/tutorial5.html" rel="noreferrer">http://deepliquid.com/projects/Jcrop/demos/tutorial5.html</a>

blocks|key|1728632|text|我最终也遇到了这个问题。如果我添加和删除裁剪框图像，一切正常。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1728633|............
$("#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",+"/"%2BimageToCropUrl);
...............................|code-block|syntax|javascript|1728634|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I end up with this problem too. If I add and remove the cropbox image everything works ok.

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

blocks|key|5746809|text|我找到的最简单的解决方案是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5746810|$('.jcrop-holder+img').attr('src',+'new+image+url');|code-block|syntax|javascript|5746811|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The simplest solution i've found:

<pre><code>$('.jcrop-holder img').attr('src', 'new image url');
</code></pre>

blocks|key|4329569|text|如果你想用jcrop改变/重新加载图像，你必须使用一个setImage()函数：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4329570|//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");|code-block|syntax|javascript|4329571|entityMap^0|R|A|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

If you want change/reload image with jcrop you have to use a <code>setImage()</code> function:

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

I'm working on a new feature in my site and I got stucked really bad. Im using JCrop obviously to crop an Image on my website.

The new feature that I've been asked to Implement is to allow the user to change the colors of the Image being cropped.

I have now 3 images , Color, GrayScale and Sepia.

I can change the source of the image tag using javascript so the image gets changed without reload but I cannot do this once the JCrop has been enabled because it replaces the original Image for a new one.

I thought I could disable JCrop, Replace the Image and then Re-Enable, but i couldnt do such thing.

The example I found where the JCrop gets destroyed (example5 in Demo zip) uses an object :

jcrop_api = $.Jcrop('#cropbox');

But I'm enabling JCrop in a different manner,more like Example 3 :

<pre><code> jQuery('#cropbox').Jcrop({
 onChange: showPreview,
 onSelect: showPreview,
 aspectRatio: 1
 });
</code></pre>

How can I destroy JCrop so I can replace te Image? Is there another way to do this?

I Could easily reload the page each time the user changes de color of the image but we all know that's not cool.

Change an Image while using JCrop

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在开发我网站上的一个新功能，我遇到了非常糟糕的问题。我正在使用JCrop显然是为了在我的网站上裁剪图像。我被要求实现的新功能是允许用户更改正在裁剪的图像的颜色。我现在有3个图像，颜色，GrayScale和深褐色。我可以使用javascript更改图像标记的源，这样无需重新加载就可以更改图像，但是一旦启用了JCrop...

问在使用JCrop时更改图像
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在使用JCrop时更改图像EN