图片旋转+剪裁js插件(兼容各浏览器)

这篇文章发布于 2010年05月6日,星期四,19:40,归类于 Canvas相关, JS实例。 阅读 190965 次, 今日 6 次 23 条评论

 

一、写此插件的缘由

在现在的web应用中,对上传的图片,例如头像,原始的摄影照片常常需要在web页面上进行一些处理,常见的处理就是剪裁与旋转。
对于剪裁,我之前曾翻译过一个jQuery插件,JCrop插件,此插件demo地址为:http://www.zhangxinxu.com/jq/jcrop_zh/,如果您使用了jQuery库,且单纯的只是对图片进行剪裁,此插件不可不谓强大,UI及API等都是很赞的!但是,不支持旋转。

说到旋转,我曾经从CSS到js,jQuery,甚至HTML5 canvas元素都作为研究与讲解,您有兴趣可以参阅我的“图片旋转效果的一些研究、jQuery插件及实例”这篇文章,我相信,只要是关于旋转的,您都可以在里面找到您需要的线索。

正所谓“月有阴晴圆缺,此事古难圆”,似乎鲜有即支持图片旋转又可以剪裁的插件,我相信是有的,至少会有这样的jQuery插件。还是那句话,有时候,我们只需要简单的功能,不需要多么炫酷的效果,剪裁剪裁,旋转旋转而已。使用过于强大的jQuery插件有点高射炮打蚊子,拖拉机装波音747发动机的味道,所以,有时候,精简高效,轻量的js插件反而受欢迎。

为了日后使用的方便,我今天花了点时间写了个简单的图片剪裁外加旋转的方法,封装成了js插件。此插件仅一个参数,原生态js,无需调用任何js库,有一定的UI表现,兼容性也不错,这里分享一下。

二、效果预览与下载

您可以狠狠地点击这里:剪裁与旋转demo

demo测试方法如下,点击右上角“图片处理”按钮,此时js会自动对图片进行处理,生成剪裁框,以及旋转角度输入框,点击下面的“确认处理”按钮,会返回旋转角度值,以及原始图片坐标和剪裁的实际大小。

图片旋转与剪裁demo截图 张鑫旭-鑫空间-鑫生活

zip源文件打包下载:zxx.crop_rotation.zip(12.1K)

三、如何使用

1. 调用excanvas.js
地址为:http://www.zhangxinxu.com/study/js/excanvas.js
由于本插件旋转时使用canvas标签实现了,而目前的IE浏览器并不支持canvas标签,好在通过调用excanvas.js可以让不支持canvas元素的浏览器也可以实现部分canvas标签的功能,旋转自然不在话下。
需要注意的是,以我的测试结果看来,此excanvas.js的调用需要放到页面的头部,否则,在IE下不起作用,具体原因不详。

2. 调用我写的zxx.crop_rotation.js
地址为:http://www.zhangxinxu.com/study/js/zxx.crop_rotation.js

3. 调用fnImageCropRot()方法
fnImageCropRot()方法仅需要一个参数,就是需要剪裁旋转的当前图片对象,例如,页面中有这么一个图片:

<img id="cropTestImg" loading="lazy" src="https://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" />

要让此插件可以有剪裁与旋转的UI表现,仅仅需要这么一句代码就ok了:

fnImageCropRot(document.getElementById("cropTestImg"))

然后,然后,没有然后了,当你还沉浸在泡代码的状态时,一些都已经完成了,结束了。你所做的,仅剩下给后台传递参数了。

4. 完整的示例代码
代码如下:

<script type="text/javascript" src="http://www.zhangxinxu.com/study/js/excanvas.js"></script>

<script type="text/javascript" src="http://www.zhangxinxu.com/study/js/zxx.crop_rotation.js"></script>
<script type="text/javascript">
window.onload = function(){
    var oImg = document.getElementById("cropTestImg");
    fnImageCropRot(oImg);   
</script>

然后就会有类似下图的效果了:

图片剪裁旋转js简单的代码演示截图 张鑫旭-鑫空间-鑫生活

四、一些说明

* 1. 旋转效果查看需通过在角度文本框中输入数值
* 2. 后台处理图片需要5个参数,剪裁起始点,以及剪裁的高宽,这5个参数均可以通过id获取。其中角度值即旋转角度输入框的值,id为zxxRotAngle,坐标及高宽参数分别藏在4个隐藏的文本框中,id分别是:cropPosX, cropPosY, cropImageWidth, cropImageHeight
* 3. 自动对比当前图片与原始图片尺寸比例,计算实际的剪裁值,对于高度及位置溢出也做了处理
* 4. 如果出现由于图片旋转而发生遮挡的现象,设置遮挡元素的position属性为relative,z-index为1,可修复此问题
* 5. 经我测试,excanvas.js需在头部加载以支持IE浏览器的canvas
* 6. 由于一些补充与更新,请下载最新的js替换zip源文件中的js

五、最后点东东

最近工作也蛮紧的,时间有限,多余的话我就不说了。此js插件可以说仅仅是个测试版,初版,加上我在js方面的阅历,资质等确实有限,所以肯定会出现一些问题的。如果您在使用过程中遇到什么问题,欢迎提出,欢迎交流。

(本篇完)

分享到:


发表评论(目前23 条评论)

  1. 截取动态图说道:

    Jcrop可否截取动态图片?

  2. 冯维祥说道:

    张老师的东西好精彩呀

  3. 请问说道:

    楼主请问剪切后的图片怎么获取啊

    • 我爸女儿说道:

      图片应该是前端把得到的坐标传给后后台,然后后台去实现剪切,再把剪切好的图片传回来给前端得到的。

  4. 你大爷说道:

    卧槽,楼主牛逼哦,还弄旋转呢,

    尼玛低版本IE根本不支持图片旋转,

    IE8都出问题了,你这兼容太垃圾了,

    没那个能耐就别做啊!

    做出来都是些垃圾.

  5. 星星说道:

    角度为负数出问题…请把原点定到图片中心位置

  6. Eric说道:

    剪裁与旋转demo 存在一些问题。
    (1)连续多次点击图片处理按钮,会不断出现新的裁剪选择区域和旋转角度输入框。
    (2)偶尔页面刷新后点击图片处理按钮无响应,再次刷新后正常。

  7. yalishizhude说道:

    内容还挺有用的,这里好多web的东西,网址收藏了,多谢分享·~~

  8. 月光光说道:

    ie8直接图片不见了

  9. Adam说道:

    在ie8下,旋转仍然不可以

  10. 见若不见说道:

    这里面的文章对我很有帮助,能学习的东西太多了

  11. wolfwang说道:

    学习了,谢谢

  12. mm说道:

    IE上运行确实有问题,不能兼容

  13. midas说道:

    IE9下有问题

  14. gqqnbig说道:

    非常好,我正需要,谢谢!

  15. Apple说道:

    你这里好东西真多啊。
    学习了。