jQuery 使用 JCrop 时更改图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2767927/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change an Image while using JCrop
提问by Bathan
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.
我正在我的网站上开发一个新功能，但我陷入了非常糟糕的境地。我显然使用 JCrop 在我的网站上裁剪图像。
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.
我现在有 3 个图像，颜色、灰度和棕褐色。
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.
我可以使用 javascript 更改图像标记的来源，因此图像无需重新加载即可更改，但是一旦启用 JCrop，我就无法执行此操作，因为它将原始图像替换为新图像。
I thought I could disable JCrop, Replace the Image and then Re-Enable, but i couldnt do such thing.
我以为我可以禁用 JCrop，替换图像然后重新启用，但我不能这样做。
The example I found where the JCrop gets destroyed (example5 in Demo zip) uses an object :
我发现 JCrop 被销毁的示例（Demo zip 中的示例 5）使用了一个对象：
jcrop_api = $.Jcrop('#cropbox');
jcrop_api = $.Jcrop('#cropbox');
But I'm enabling JCrop in a different manner,more like Example 3 :
但我以不同的方式启用 JCrop，更像示例 3：
jQuery('#cropbox').Jcrop({
onChange: showPreview,
onSelect: showPreview,
aspectRatio: 1
});
How can I destroy JCrop so I can replace te Image? Is there another way to do this?
如何销毁 JCrop 以便我可以替换 te Image？有没有另一种方法可以做到这一点？
I Could easily reload the page each time the user changes de color of the image but we all know that's not cool.
每次用户更改图像的颜色时，我都可以轻松地重新加载页面，但我们都知道这并不酷。
回答by Michael L Watson
latest version has setImage function
最新版本有 setImage 功能
http://deepliquid.com/projects/Jcrop/js/jquery.Jcrop.js
http://deepliquid.com/projects/Jcrop/js/jquery.Jcrop.js
var jcrop_api;
$().ready(function() {
initJcrop();
function initJcrop()
{
jcrop_api = $.Jcrop('#cropbox');
};
});
Then call
然后打电话
jcrop_api.setImage('server/uploads/image.jpg');
Theres an example here
这里有一个例子
回答by jrom
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
我遇到过这种情况。我已将 jcropimage(#cropbox) 放在 div 上，然后清空 div 的 html。见下面的代码
javascript:
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();
Hope this helps.
希望这可以帮助。
回答by AdmSteck
First question is if the images you are swapping are the same size? If they are, the following should work:
第一个问题是您交换的图像大小是否相同？如果是，则以下应该起作用：
$(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();
});
});
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.
如果您的图像大小不同（将肖像换成风景？）事情会稍微复杂一些。您将需要等待图像加载，以便 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();
});
});
That should help you out. Everything tested out for me on FireFox over at jsFiddle. You can try it out here.
那应该能帮到你。一切都在 jsFiddle 上在 FireFox 上为我测试过。你可以在这里试一试。
回答by Sun
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();
});
回答by 1_bug
If you want change/reload image with jcrop you have to use a setImage()function:
如果您想使用 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");
回答by Yair
The simplest solution i've found:
我找到的最简单的解决方案：
$('.jcrop-holder img').attr('src', 'new image url');
回答by stefan
I end up with this problem too. If I add and remove the cropbox image everything works ok.
我也遇到了这个问题。如果我添加和删除裁剪框图像一切正常。
............
$("#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);
...............................
