jQuery图片裁剪插件:jQuery-photoClip

jQuery图片裁剪插件:jQuery-photoClip

2024-03-17

8.34K

PhotoClip.js v3介绍

一款手势驱动的裁图插件,移动端照片裁剪的简洁化解决方案!在移动设备上双指捏合为缩放,双指转动为旋转在PC设备上鼠标滚轮为缩放,每次双击则顺时针旋转90度

依赖插件

[iscroll-zoom.js] 插件(由于原插件的zoom扩展存在几个bug,所以建议使用demo中提供的iscroll-zoom.js文件)
[hammer.js] 插件

[lrz.all.bundle.js]

操作说明

在移动设备上双指捏合为缩放,双指旋转可根据旋转方向每次旋转90度
在PC设备上鼠标滚轮为缩放,每次双击则顺时针旋转90度

使用方法


<div id="clipArea"></div>
<input type="file" id="file" />
...
<script src="js/iscroll-zoom.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/lrz.all.bundle.js"></script>
<script src="js/PhotoClip.js"></script>
<script>
var pc = new PhotoClip('#clipArea');
file.addEventListener('change', function() {
	pc.load(this.files[0]);
});
</script>


PhotoClip 构造函数

new PhotoClip( container [, options] )
构造函数有两个主要参数:
container
表示图片裁剪容器的选择器或者DOM对象。
options

配置选项,详细配置如下:


参数

  • options.adaptive:截取框自适应。设置该选项后,size 选项将会失效,此时 size 进用于计算截取框的宽高比例。 当值为一个百分数字符串时,表示截取框的宽度百分比。 当值为数组时,数组中索引 [0] 和 [1] 所对应的值分别表示宽和高的百分比。 当宽或高有一项值未设置或值无效时,则该项会根据 size 选项中定义的宽高比例自适应。 默认为 ''。
  • options.outputSize:输出图像大小。 当值为数字时,表示输出宽度,此时高度根据截取框比例自适应。 当值为数组时,数组中索引 [0] 和 [1] 所对应的值分别表示宽和高,若宽或高有一项值无效,则会根据另一项等比自适应。 默认值为[0,0],表示输出图像原始大小。
  • options.outputType:指定输出图片的类型,可选 'jpg' 和 'png' 两种种类型,默认为 'jpg'。
  • options.outputQuality:图片输出质量,仅对 jpeg 格式的图片有效,取值 0 - 1,默认为0.8。(这个质量并不是图片的最终质量,而是在经过 lrz 插件压缩后的基础上输出的质量。
  • options.maxZoom:图片的最大缩放比,默认为 1。
  • options.rotateFree:是否启用图片自由旋转。由于安卓浏览器上存在性能问题,因此在安卓设备上默认(false)关闭。
  • options.view:显示截取后图像的容器的选择器或者DOM对象。如果有多个,可使用英文逗号隔开的选择器字符串,或者DOM对象数组。
  • options.file:上传图片INPUT=FILE控件的选择器或者DOM对象。如果有多个,可使用英文逗号隔开的选择器字符串,或者DOM对象数组。
  • options.ok:确认截图按钮的选择器或者DOM对象。如果有多个,可使用英文逗号隔开的选择器字符串,或者DOM对象数组
  • options.img:需要裁剪图片的url地址。该参数表示当前立即开始读取图片,不需要使用 file 控件获取。注意,加载的图片必须要与本程序同源,如果图片跨域,则无法截图。

方法

  • size(width, height):截取框大小。 当值为数字时,表示截取框为宽高都等于该值的正方形。 当值为数组时,数组中索引[0]和[1]所对应的值分别表示宽和高。 默认值为 [100,100]。
    /**
     * 如果设置了 adaptive 选项,则该方法仅用于修改截取框的宽高比例
     * @param  {Number} width  截取框的宽度
     * @param  {Number} height 截取框的高度
     * @return {PhotoClip}     返回 PhotoClip 的实例对象
     */
    pc.size(width, height);
  • load(src):加载一张图片
    /**
     * @param  {String|Object} src 图片的 url,或者图片的 file 文件对象
     * @return {PhotoClip}         返回 PhotoClip 的实例对象
     */
    pc.load(src);
  • clear():清除当前图片
    /**
     * @return {PhotoClip}  返回 PhotoClip 的实例对象
     */
    pc.clear();
  • rotate(angle, duration):图片旋转到指定角度
    /**
     * @param  {Number} angle      可选。旋转的角度
     * @param  {Number} duration   可选。旋转动画的时长,如果为 0 或 false,则表示没有过渡动画
     * @return {PhotoClip|Number}  返回 PhotoClip 的实例对象。如果参数为空,则返回当前的旋转角度
     */
  • scale(zoom, duration):图片缩放到指定比例,如果超出缩放范围,则会被缩放到可缩放极限
    /**
     * @param  {Number} zoom       可选。缩放比例,取值在 0 - 1 之间
     * @param  {Number} duration   可选。缩放动画的时长,如果为 0 或 false,则表示没有过渡动画
     * @return {PhotoClip|Number}  返回 PhotoClip 的实例对象。如果参数为空,则返回当前的缩放比例
     */
  • clip(): 截图
    /**
     * @return {String}  返回截取后图片的 Base64 字符串
     */
  • destroy():销毁,无返回值

事件

  • options.loadStart:图片开始加载的回调函数。type: Function。this 指向当前 PhotoClip 的实例对象,并将正在加载的 file 对象作为参数传入。(如果是使用非 file 的方式加载图片,则该参数为图片的 url)
  • options.loadComplete:图片加载完成的回调函数。type: Function。this 指向当前 PhotoClip 的实例对象,并将图片的 img 对象作为参数传入。

1. 本站所有资源来源于网络和用户上传!如有侵权请邮件联系客服!sys(at)hoohtml.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!
3. 本由本站提供的程序对您的网站或计算机造成严重后果的本站概不负责。