github地址：https://github.com/baijunjie/jQuery-photoClip
jQuery-photoClip v1.5.1
一款支持手势的裁图插件插件
由于目前网上很难找到一款支持手势的裁图插件，因此自己动手写了一个。为了快速开发，依赖了很多其他的开源插件。不过目前仅解决需求即可。
依赖插件
[jquery.transit.js] 插件 （v1.4 中已经移除了对该插件的依赖）
[iscroll-zoom.js] 插件（由于原插件的zoom扩展存在几个bug，所以建议使用demo中提供的iscroll-zoom.js文件，本人已经将这些bug修复）
[hammer.js] 插件
操作说明
在移动设备上双指捏合为缩放，双指旋转可根据旋转方向每次旋转90度
在PC设备上鼠标滚轮为缩放，每次双击则顺时针旋转90度
使用方法及参数配置简介
<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/jquery.photoClip.min.js"></script>
<script>
$("#clipArea").photoClip({
width: 200, // 截取区域的宽度
height: 200, // 截取区域的高度
file: "#file", // 上传图片的<input type="file">控件的选择器或者DOM对象
view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
outputType: "jpg", // 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"
strictSize: false, // 是否严格按照截取区域宽高裁剪。默认为false，表示截取区域宽高仅用于约束宽高比例。如果设置为true，则表示截取出的图像宽高严格按照截取区域宽高输出
loadStart: function(file) {}, // 开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入
loadComplete: function(src) {}, // 加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入
loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入
clipFinish: function(dataURL) {}, // 裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入
});
</script>
附上html代码，以作参考
<!doctype html>
<html lang="zh-CN" id="index">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no, email=no" />
<meta name="keywords" content="">
<meta name="description" content="">
<title>图片裁剪</title>
<style>
body {
margin: 0;
text-align: center;
}
#clipArea {
margin: 20px;
height: 300px;
}
#file,
#clipBtn {
margin: 20px;
}
#view {
margin: 0 auto;
width: 200px;
height: 200px;
}
</style>
</head>
<body ontouchstart="">
<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/iscroll-zoom.js"></script>
<script src="js/hammer.js"></script>
<script src="js/jquery.photoClip.js"></script>
<script>
//document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
$("#clipArea").photoClip({
width: 200,
height: 200,
file: "#file",
view: "#view",
ok: "#clipBtn",
loadStart: function() {
console.log("照片读取中");
},
loadComplete: function() {
console.log("照片读取完成");
},
clipFinish: function(dataURL) {
console.log(dataURL);
}
});
</script>
</body>
</html>
相关推荐
【jQuery-photoClip-master 图片上传剪切】是一个基于jQuery的图片裁剪插件，主要用于Web开发中的图片商城剪切功能。这个项目集成了JavaScript技术，提供了便捷的图片处理能力，让用户在网页上能够自由地裁剪上传的...
jQuery-photoClip是一款支持移动设备触摸手势的jQuery图片裁剪插件。该图片裁剪插件在移动设备上可以使用手指来进行各种操作，如缩放、旋转等，同时在桌面设备中也提供了相应的方法来操作，是一款非常不错的图片裁剪...
【jQuery-photoClip图片裁剪插件】是一款广泛应用于网页中的图片处理工具，它允许用户在手机和PC上对图片进行自由的旋转、缩放和移动等编辑操作，从而实现个性化裁剪的需求。这款插件基于JavaScript库jQuery构建，...
jQuery-photoClip是一款支持移动设备触摸手势的jQuery图片裁剪插件。该图片裁剪插件在移动设备上可以使用手指来进行各种操作，如缩放、旋转等，同时在桌面设备中也提供了相应的方法来操作，是一款非常不错的图片裁剪...
《jQuery.photoClip手机图片裁剪插件深度解析》 在当今移动互联网时代，手机拍照功能的普及使得用户对图片编辑的需求日益增长。特别是在社交媒体、电商应用等场景中，高质量的图片上传与个性化裁剪功能成为了必不可...
《photoClip图片裁剪插件：打造网页图片编辑体验》 在现代网页设计中，用户交互体验至关重要，其中图片处理功能已经成为许多网站不可或缺的一部分。"photoClip图片裁剪插件"便是为此目的而生，它提供了简洁易用的...
由于其轻量级和易用性，该插件深受开发者喜爱，成为了实现图片裁剪功能的首选解决方案之一。 在压缩包"jQuery-photoClip"中，通常会包含以下文件： 1. jQuery库文件（如jquery.min.js）：这是jQueryphotoClip运行...
jquery.photoClip是专为移动设备设计的jQuery图片裁剪插件，它利用HTML5的Canvas元素和触控事件，实现了在手机和平板等设备上的图片裁剪功能。以下是这个插件的核心特点： 1. **触摸手势支持**：jquery.photoClip...
在IT领域，jQuery图片裁剪插件是一种广泛应用于网页开发中的工具，它允许用户在前端进行灵活的图片处理，如裁剪、旋转和缩放，从而实现个性化展示或上传符合特定尺寸要求的图片。本篇文章将详细介绍这款可缩放jQuery...
在描述中提到的"jquery图片编辑"功能，主要涉及到以下几个技术点： 1. **图片上传**：通常会使用HTML5的File API，允许用户选择本地图片并读取其内容。 2. **预览**：利用`<img>`标签的`src`属性显示上传的图片，...
本项目涉及的技术栈是JavaScript（特别是jQuery）和PHP，用于实现客户端和服务器端的图片裁剪功能。以下是对这个主题的详细阐述： ### JavaScript与jQuery JavaScript是一种广泛应用于Web开发的客户端脚本语言，它...
总结来说，基于PhotoClip的移动端上传图片裁剪插件是利用JavaScript和jQuery实现的，提供了一套完整的解决方案，包括图片选择、预览、裁剪以及美化等功能。开发者可以根据需求自定义样式和交互逻辑，以适应不同的...
《JavaScript之jQuery-photoClip图片裁剪插件详解》 在网页设计中，用户对个性化和交互性的需求日益增强，图片裁剪功能成为了许多网站必备的交互元素，例如头像上传、产品图片定制等。JavaScript库jQuery以其简洁...
利用iscroll-zoom.js，hammer.js，lrz.all.bundle.js，jquery.photoClip.js和jq文件对上传图片进行放大，缩小，旋转，裁剪操作。主要用于解决手机端客户上传头像时，不同手机不同拍摄角度，会出现头像是倒的或者横的...
`photoClip`是一个轻量级的JavaScript图片裁剪和压缩库，它能处理不同分辨率和尺寸的图片，将其压缩到指定大小。 首先，引入`photoClip.js`文件，然后创建一个用于预览的img元素，接着调用`photoClip`函数进行图片...
在这个“jQuery移动设备图片裁剪特效代码”中，我们关注的是如何在移动设备上实现用户友好的图片裁剪功能。这个功能对于手机应用、网页设计或者任何需要用户上传并调整图片的应用场景都是至关重要的。 首先，我们要...