使用JCrop时更改图像
我正在我的网站上开发一个新function而且我被困了。 我明显使用JCrop在我的网站上裁剪图像。
我被要求实现的新function是允许用户更改正在裁剪的图像的颜色。
我现在有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？ 还有另一种方法吗？
我可以在每次用户更改图像的颜色时轻松重新加载页面，但我们都知道这并不酷。
最新版本有setImagefunction
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');
这是一个例子
我遇到过这种情况。 我把我的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();
希望这可以帮助。
第一个问题是你交换的图像大小是否相同？ 如果是，则以下内容应该有效：
$(document).ready(function(){ // Just pulled some creative commons images off flickr for testing. var one = "http://sofzh.miximages.com/jquery/4580633003_e62e061b64_d.jpg"; var two = "http://sofzh.miximages.com/jquery/4580650483_7881505c66_d.jpg"; var three = "http://sofzh.miximages.com/jquery/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://sofzh.miximages.com/jquery/4580633003_e62e061b64_d.jpg"; var two = "http://sofzh.miximages.com/jquery/4580650483_7881505c66_d.jpg"; var three = "http://sofzh.miximages.com/jquery/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上为我测试了一切。 你可以在这里试一试。
好问题！ 以下可以节省我们的时间，
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(); });
如果你想用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");
我找到的最简单的解决方案：
$('.jcrop-holder img').attr('src', 'new image url');
我最终也遇到了这个问题。 如果我添加和删除cropbox图像一切正常。
............ $("#wrapper").on('click', '.img-crop-trigger',function(e){ //clear the wrapper $("#cropImageWrp").html(""); // add the image cropbox $("#cropImageWrp").append("![]()
"); //set the image source $("#cropbox").attr("src", "/"+imageToCropUrl); ...............................