Chinaunix首页 | 论坛 | 博客
  • 博客访问: 387374
  • 博文数量: 273
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 1430
  • 用 户 组: 普通用户
  • 注册时间: 2018-02-02 15:57
文章分类

全部博文(273)

文章存档

2018年(273)

我的朋友

分类: 大数据

2018-06-27 15:51:12

因为公司需求,之前的一个老项目需要完成一个显示屏定制的业务,用户自主上传图片然后在线裁剪的功能,我选择了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();

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

img

实际操作

重点来了,敲黑板

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

img

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

img

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

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

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

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

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


阅读(1548) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~