[记]使用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 条评论
登录 后参与评论

相关文章

来自专栏用户3211691的专栏

前端面试题1(HTML篇)

html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

711
来自专栏james大数据架构

Android一些关于分辨率和布局的设置

1、Android手机屏幕大小不一,有480x320, 640x360, 800x480.怎样才能让App自动适应不同的屏幕呢? drawable- hdpi、...

1829
来自专栏软件开发 -- 分享 互助 成长

Altium designer总结

大概有半年没有画过PCB板了,最近突然又要画一个简单的小板子,却发现好多东西已经不是很熟练了,现在把Altium designer软件的使用中要注意的问题和一些...

20910
来自专栏数据之美

Web 自动化测试与智能爬虫利器:PhantomJS 简介与实战

估计部分同学没听过这个工具,那先简单介绍下它的背景与作用。 1、PhantomJS 是什么? PhantomJS是一个基于WebKit的服务器端JavaScri...

4059
来自专栏JetpropelledSnake

Notepad++ 主题配色配置

9133
来自专栏维C果糖

设置 IntelliJ IDEA 主题和字体的方法

1 前言 在博文「IntelliJ IDEA 之 HelloWorld 项目创建及相关配置文件介绍」中,我们已经用 IntelliJ IDEA 创建了第一个 J...

54110
来自专栏禅林阆苑

小程序开发总结02 - 开发技巧和第三方插件的使用

es6的Promise让异步接口的处理变得轻松,在旧版本的小程序中并不原生支持Promise,需要引入第三方库,例如:https://github.com/st...

7196
来自专栏数据小魔方

如何在Excel里加载第三方插件,让你的Excel功能更加强大!!!

今天是小魔方的第三篇推送教程,要谈的话题是如何在Excel里加载第三方插件工具! 记得第一期的时候讲的如何调用开发工具,其实微软公司在开发office办公套件的...

3335
来自专栏落影的专栏

一个BUG的发现、定位和解决

前言 在iOS 11发布之后,出现了一系列适配相关的问题,UIScrollView在pagingEnabled=YES时滑动手势不灵敏,UITableView的...

3907
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

在Android 设备上获取照片、裁剪图片、压缩图片 @TakePhoto V3.0 发布

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://www.devio.org) TakePhoto 简介 TakePhoto是一款用...

4236

扫码关注云+社区