jQuery图片裁剪插件jQuery-photoClip

所属分类:媒体,输入-图像,上传

 39621  127  查看评论 (44)
jQuery图片裁剪插件jQuery-photoClip ie兼容10

一款支持手势的裁图插件插件

由于目前网上很难找到一款支持手势的裁图插件,因此自己动手写了一个。为了快速开发,依赖了很多其他的开源插件。不过目前仅解决需求即可。

依赖插件

  • [jquery.transit.js] 插件 (v1.4 中已经移除了对该插件的依赖)

  • [iscroll-zoom.js] 插件(由于原插件的zoom扩展存在几个bug,所以建议使用demo中提供的iscroll-zoom.js文件,本人已经将这些bug修复)

  • [hammer.js] 插件 

  • [lrz.all.bundle.js] 插件

操作说明

在移动设备上双指捏合为缩放,双指旋转可根据旋转方向每次旋转90度

在PC设备上鼠标滚轮为缩放,每次双击则顺时针旋转90度

使用方法及参数配置简介

<div id="clipArea"></div>
<input type="file" id="file">
<button id="clipBtn">截取</button>
<div id="view"></div>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/iscroll-zoom.min.js"></script>
<script src="js/lrz.all.bundle.js"></script>
<script src="js/jquery.photoClip.min.js"></script>
<script>
var clipArea = new bjj.PhotoClip("#clipArea", {
    size: [260, 260], // 截取框的宽和高组成的数组。默认值为[260,260]
    outputSize: [640, 640], // 输出图像的宽和高组成的数组。默认值为[0,0],表示输出图像原始大小
    //outputType: "jpg", // 指定输出图片的类型,可选 "jpg" 和 "png" 两种种类型,默认为 "jpg"
    file: "#file", // 上传图片的<input type="file">控件的选择器或者DOM对象
    view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
    ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
    loadStart: function(file) {}, // 开始加载的回调函数。this指向 fileReader 对象,并将正在加载的 file 对象作为参数传入
    loadComplete: function(src) {}, // 加载完成的回调函数。this指向图片对象,并将图片地址作为参数传入
    loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象,并将错误事件的 event 对象作为参数传入
    clipFinish: function(dataURL) {}, // 裁剪完成的回调函数。this指向图片对象,会将裁剪出的图像数据DataURL作为参数传入
});
</script>

Destroy

clipArea.destroy();


相关插件-图像,上传

jQuery照像机效果

jQuery照像机效果
  图像
 10882  39

图片局部放大

图片局部放大效果,鼠标移到产品图片上可局部放大,点击图片可浏览完整产品大图,鼠标移动到左侧箭头可上下滚动缩略图,兼容主流浏览器
  图像
 21884  103

酷炫的文字遮罩插件-ANIMATED KNOCKOUT LETTERS

Animated Knockout Letters可以让我们像在PS中使用文字遮罩一样在网页中实现这样的效果,而且在初始化的时候还会有动画的效果,使用起来也比较简单。
  图像
 10166  22

jQuery图片自动缩放居中插件

jQuery图片自动缩放居中插件
  图像
 2941  15

讨论这个项目(44)回答他人问题或分享插件使用方法奖励jQ币

    不是路不平,而是你不行。 0
    2017/8/15 21:24:38

    在手机上你们支持缩放功能吗? 为什么我不打不可以啊!

    回复
    bζ ank ′ 0
    2017/8/13 17:02:32
    为什么安卓提示destroy  undefined? 回复
    [QQ红包]发红包了! 0
    2017/7/27 11:28:30

    如果销毁了上一次的再重新初始化就会在裁剪的时候报错?怎么解决啊?

                 0
        2017/8/2 10:12:54

        问题解决了吗

    回复
    [QQ红包]发红包了! 0
    2017/7/24 13:44:33

    我要根据图片的宽高来确定裁剪框的宽和高,怎么在初始化的时候修改size的值啊??

    回复
    My density 0
    2017/7/10 13:31:08

    如何让裁剪完成之后再次点击,让之前的裁剪过的销毁掉的呢?

        霍☆雨★浩0
        2017/8/14 12:20:22

        直接刷新

    回复
    狼灰灰 0
    2017/7/7 15:34:46

    谷歌浏览器有延迟阿。点击  选择文件 按钮后就卡5秒后才弹出来上传文件的框,如何解决

    回复
    忘不掉你i 0
    2017/6/1 13:59:25

    楼主   怎么取消裁剪功能

    回复
    @ 0
    2017/4/23 20:30:31

    这个每次都是九十度,能不是九十度旋转吗

    回复
    ?╊?????BOY??? 0
    2017/4/1 14:01:46

    如果我想增加两个放大缩小按钮怎么办呢?  因为有的笔记本有时候不会用鼠标那么图片怎么缩放?

    回复
    laly 0
    2017/3/1 17:41:26

    安卓不能调用相机吗?还有在手机点图片不能选图片文件的?只能选图库才能选择。有人遇到这些问题吗?求解

        laly0
        2017/3/2 16:55:58

        我之前优化时动过js文件了,用新的js文件重新做一次就好了,这是我理想的插件!谢谢楼主

    回复
取消回复