jq实现批量上传+裁剪功能

解决问题:批量上传+裁剪功能(前端给后台传递图片的坐标和宽高即可)

请使用谷歌观看

使用jquery的插件:jcrop

官方在线演示:http://code.ciaoca.com/jquery/jcrop/demo/

需要引入的文件:


下载地址:https://github.com/819slw/-

使用方法:

<img id="previewImg" src="" width="120px"/>
	html部分只需要这一行代码 主要是使用这个img的id
$("#previewImg").Jcrop( {
      aspectRatio : 1,
      onChange : showCoords,
      onSelect : showCoords,
      minSize :[200,200]
});
	通过id就可以完成
关于里面的方法官网说的很清楚:http://code.ciaoca.com/jquery/jcrop/
注意部分:
问题一:这个插件是通过id来完成的裁剪,但是我的是动态加的img标签?
	    如果是批量上传但是这个插件又是使用id来完成裁剪的:你可以先获取页面的图片数量;然后动态的添加img标签给每一个id加一个变量
	就会产生不同id的img标签;
问题二:当我给后台传的时候我想分别获取他们的坐标和宽高,这个插件里面的 onSelect 这个方法,不能帮			 我完成获取对应图片的对应宽高?
		先看图:

      一个图片只对应一个这样的div  所以你可以在提交的时候再获取这个div里面的值 不一定非要用插件里的方法。
问题三:本地显示图片


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lar_slw

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值