收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 7498|回复: 4

[作品展示] JS图片裁切效果

[复制链接]
发表于 2013-6-3 09:46:12 | 显示全部楼层 |阅读模式
本帖最后由 GaFish 于 2013-6-3 09:49 编辑

最近项目里需要用到头像上传,图片裁切,以前用过jQuery图像照片剪裁插件Jcrop,本想直接再拿来用,但又一想还是多写写原生JS练练手,就直接原创写了一个,首先想到的是利用拖拽API(HTML5 drag and drop),实现直接在图片拖拽出一个选区,代码如下:

 提示:您可以先修改部分代码再运行

本帖被以下淘专辑推荐:

 楼主| 发表于 2013-6-3 09:47:40 | 显示全部楼层
本帖最后由 GaFish 于 2013-6-3 09:50 编辑


代码写完后看到论坛的DreamJser发了一个作品 - 拖拽效果(2)— 仿淘宝网flash上传头像效果 http://bbs.blueidea.com/thread-3099402-1-1.html 感觉写的不错,思路也挺好,最主要是可以兼容更多浏览器,于是我吸收他代码里的优点,换了一个思路来实现,最终代码如下:

 提示:您可以先修改部分代码再运行

最后补充下,图片裁切在前端的表现主要是获取到裁切图片的起点坐标 x y,和以此点开始的宽度和高度,然后把这些参数传递给后端实现裁切。

附上两段代码的在线DEMO地址(前端部分)

DEMO1

DEMO2
回复 支持 反对

使用道具 举报

发表于 2013-6-3 09:48:28 | 显示全部楼层
本帖最后由 Now 于 2013-6-3 09:51 编辑

从右上角开始往对角线拉的时候有点问题

晕,修改了
回复 支持 反对

使用道具 举报

 楼主| 发表于 2013-6-3 09:59:59 | 显示全部楼层
Now 发表于 2013-6-3 09:48
从右上角开始往对角线拉的时候有点问题

晕,修改了

哈哈,你回的太快了,刚我都还没改完
回复 支持 反对

使用道具 举报

 楼主| 发表于 2013-6-3 10:01:17 | 显示全部楼层
本帖最后由 GaFish 于 2013-6-3 10:02 编辑

感觉还是有改进的地方,希望大家一起看看,特别是第二段代码在缩放过一次后再拖动在Maxthon里面感觉很卡。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-11-29 04:57 , Processed in 0.077927 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表