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

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

先看看怎么使用

使用方法

载入 CSS 文件

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

载入 JavaScript 文件

<script src="jquery.js"></script>
<script src="jquery.Jcrop.js"></script>

给 IMG 标签加上 ID

<img id="element_id" src="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.onload = 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年,所以说可能遗留了很多问题,虽然是一个骚操作,但是实属无奈之举,有朋友有更好的解决方法请不要吝啬。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏计算机编程

Vue 单文件组件详解<1>--简单上手

vue 的webpack的结构非常简单,简单的一眼就可以知道每个目录下是干啥的,在components目录下就有属于我们想要详细解析的内容,这两个vue文件即为...

611
来自专栏拂晓风起

Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇——多页面VueSSR+热更新Server)

1844
来自专栏企鹅号快讯

手把手教你用vue2.0写个弹窗组件

在开始之前需要了解一下开发vue插件的前置知识,推荐先看一下vue官网的插件介绍(https://cn.vuejs.org/v2/guide/plugins.h...

2928
来自专栏前端架构

IntelliJ IDEA For Mac 快捷键,重点标注常用需记忆的

⌘⌥← / ⌘⌥→ 退回 / 前进到上一个操作的地方 Ctrl + Alt + ← Ctrl + Alt + →

742
来自专栏知道一点点

全选,反选

763
来自专栏较真的前端

使用神器eruda 进行移动端调试

1843
来自专栏田超学前端

微信小程序 几个小技巧

1472
来自专栏ytkah

微信小程序开发教程第五章:微信小程序名片夹详情页开发

今天加了新干货!除了开发日志本身,还回答了一些朋友的问题。 闲话不多说,先看下「名片盒」详情页的效果图: ? ? 备注下大致需求:顶部背后是轮播图,二维码...

2978
来自专栏bdcn

Flask学习笔记-Flask模板集成Bootstrap 顶

Flask模板集成Bootstrap。一般情况下Flask都是搭配Jinja2模板引擎来实现视图展现,不过现在Bootstrap比较流行,内置的样式也比较好看,...

1322
来自专栏林德熙的博客

win10 uwp 装机必备应用 含源代码

zhxilin大神在文章说到了使用await Windows.System.Launcher.LaunchUriAsync(new Uri(uri));打开应用...

472

扫码关注云+社区