序一

　　很久之前就在一个网站的截取相片的功能中看到这个效果，也叫图片裁剪、图片剪切（设置一下也可以做出放大镜等类似的效果）。
　　当时觉得很神奇，碍于水平有限，没做出来。
　　前些日子突然想做一个透镜效果，就突然想到了这个效果，于是找出当年“珍藏”的代码决定一尝所愿。

序二

　　自上一个版本的图片切割效果出来后，虽然也经常看到“框架开发这个如何如何容易”之类的评论，但也受到很多人的肯定，小弟在此感谢大家的支持。
　　上一个版本由于是初次接触这类效果，而且是三个大功能一起开发，能力所限，所以仅仅是实现了效果就完成了。
　　后来我知道这个效果叫ImageCropper，找了些这类效果参考，完善了切割的部分。
　　近来我把其中的拖放效果和缩放效果单独出来研究，经过整理和完善，再套进切割效果，个人感觉效果已经不错了。
　　要说明的是这个只是一个效果，并不是真正的切割图片，要获取真正的切割图片请参考图片切割系统。

　　浏览效果请参考：http://www.cnblogs.com/cloudgamer/archive/2008/07/21/ImgCropper.html

　　（浏览完效果，你一定想知道其中的奥秘吧，那就听我细细道来吧~）

程序说明

　　这个效果主要分三个部分：层的拖放、层的缩放、图片切割（包括预览）。
　　其中层的拖放和层的缩放我已经在其他两篇文章中有详细说明，这里就说说图片切割这部分吧。

【图片切割】

　　关于图片切割的设计，有三个方法：
　　1.定位四个半透明层，遮住要盖住的部分，没试过，感觉比较麻烦；
　　2.把图片设为背景图，通过设置背景图的位置来实现，但这样的缺点是只能按图片的正常比例实现，不够灵活；
　　3.把图片放到切割对象里面，通过设置图片的top和left实现，这个方法是可行，但下面有更简单的方法实现；
　　4.通过设置图片的clip来实现。

　　这里介绍方法4的实现方法，这个方法是从当年“珍藏”的代码中看到的，先说说clip：
　　clip的作用是“检索或设置对象的可视区域。可视区域外的部分是透明的。”
　　依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值来剪切。
　　例如：

it知识库：JavaScript 图片切割效果，转载需保留来源！

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。