使用jQuery Jcrop 图像裁剪无法更换图片的坑

​ 因为公司需求，需要完成一个显示屏定制的业务，用户自主上传图片然后在线裁剪的功能，我选择了jQuery Jcrop这个插件。

先看看怎么使用

载入 CSS 文件

<link rel="stylesheet" href="jquery.Jcrop.css">

载入 JavaScript 文件

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.Jcrop.js"></script>

给 IMG 标签加上 ID

<img id="element_id" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="pic.jpg">

调用 Jcrop

$('#element_id').Jcrop();

就不展示具体代码了，最终实现的图需要是这样。

重点来了，敲黑板

举个栗子：当你上传一张图片后裁剪，忽然这个时候你发现当前图片可能不适用，当你重新上传图片后，发现裁剪后的图片变了，但是上传的图片没变。如下图

这就很尴尬了，于是我就看上传后的图片地址

可以看下我的标注,其实你重新上传后，原图片地址已经改变了，但是jcorp操作的不是原始的img那个对象了，是jcorp生成的img对象。

这不是玩我么，于是一顿百度谷歌搜索看看有没有大佬遇到过，还是有发现的。

有人说使用jcorp的setImage方法设置图片地址，也有人说把定义的jcrop_api, boundx, boundy变成全局变量（变量名不是固定的， 你定义成什么就用什么）。boundx和boundy是用于记录选择的原始图片尺寸与在弹窗上展现尺寸的缩小/放大比例的，前面的jcrop_api变量用于获取到所有jcropd 的API。

也不知道是我操作失误，还是就是这个插件年久失修，我用了上面的所有解决方案都是不行。

于是乎我决定另辟蹊径，为何我不上传图片时直接操作jcrop的IMG对象呢？把上传后的图片地址赋值给Jcrop的图片地址。

var reader = new FileReader();
reader. = function (evt) {
$('#uploadImg').attr("src", evt.target.result)
$('#jcropImg').attr("src", evt.target.result)
$('#preview').removeClass("hidden");
$('.preview-container').removeClass("hidden");
$(".jcrop-holder img").attr("src",$('#uploadImg').attr("src")) //这里就是直接操作的Jcrop
  previewNewImg() //裁剪方法
}
reader.readAsDataURL(file.files[0]);

ok，大功告成。

偷了个懒，直接使用插件裁剪，但是Jcrop这个裁剪插件最后一次更新是14年，所以说可能遗留了很多问题，虽然是一个骚操作，但是实属无奈之举，有朋友有更好的解决方法欢迎指教。