photoclip / 移动端图片上传剪裁插件 /一款手势驱动的裁图插件

最新推荐文章于 2021-03-09 18:43:38 发布

原创

最新推荐文章于 2021-03-09 18:43:38 发布 · 6.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#photoclip #图片剪裁

Photoclip 是一款适用于移动端的图片裁剪插件，支持手势驱动，可在移动设备上实现双指捏合缩放、转动等操作。兼容IE10及以上及主流浏览器，依赖iscroll-zoom.js、hammer.js、lrz.all.bundle.js。通过 PhotoClip 构造函数设置参数，如 container、options，提供裁剪、旋转、缩放等功能，并能自定义输出图片大小、类型及质量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方网站 https://www.npmjs.com/package/photoclip

介绍

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

兼容

IE10及以上版本，Chrome、Firefox、Safari、Android、微信等主流先进浏览器

依赖插件

iscroll-zoom.js
hammer.js
lrz.all.bundle.js

使用方法

<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

配置选项，详细配置如下：

size 截取框大小。默认值为 [100,100]。

值为数字或者数组。
当值为数字时，表示截取框为宽高都等于该值的正方形。
当值为数组时，数组中索引[0]和[1]所对应的值分别表示宽和高。
adaptive 截取框自适应。默认为 ''。

类型为：字符串或者数组。

设置该选项后，size 选项将会失效，此时 size 进用于计算截取框的宽高比例。
当值为一个百分数字符串时，表示截取框的宽度百分比。
当值为数组时，数组中索引 [0] 和 [1] 所对应的值分别表示宽和高的百分比（不是宽与高的百分比，是宽相对于剪裁容器宽的百分比，高相对于剪裁容器高的百分比）。
当宽或高有一项值未设置或值无