在使用JCrop时更改图像
我正在开发我网站上的一个新功能，我遇到了非常糟糕的问题。我正在使用JCrop显然是为了在我的网站上裁剪图像。
我被要求实现的新功能是允许用户更改正在裁剪的图像的颜色。
我现在有3个图像，颜色，GrayScale和深褐色。
我可以使用javascript更改图像标记的源，这样无需重新加载就可以更改图像，但是一旦启用了JCrop，我就不能这样做了，因为它会用新的图像替换原始的图像。
我以为我可以禁用JCrop，替换图像，然后重新启用，但我不能这样做。
我找到的销毁JCrop的示例( Demo zip中的example5)使用了一个对象：
jcrop_api =$.Jcrop(‘#裁剪框’)；
但我正在以一种不同的方式启用JCrop，更像示例3：
jQuery('#cropbox').Jcrop({
onChange: showPreview,
onSelect: showPreview,
aspectRatio: 1
});如何销毁JCrop以便替换te镜像？有没有其他方法可以做到这一点？
我可以很容易地在每次用户更改图像的颜色时重新加载页面，但我们都知道这并不酷。
回答 7
Stack Overflow用户
发布于 2011-06-05 21:26:25
最新版本有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
Stack Overflow用户
发布于 2010-09-17 16:18:20
我遇到过这种情况。我把我的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();希望这能有所帮助。
Stack Overflow用户
发布于 2010-05-05 23:32:24
第一个问题是交换的图像大小是否相同？如果是这样的话，下面的方法应该是可行的：
$(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上为我测试过。你可以在here上试试。
https://stackoverflow.com/questions/2767927
复制相似问题
腾讯云开发者
