在移动端开发的过程中，或许会遇到对图片裁剪的问题。当然遇到问题问题，不管你想什么方法都是要进行解决的，哪怕是丑点，难看点，都得去解决掉。
图片裁剪的jquery插件有很多，我也测试过很多，不过大多数都是支持pc端的图片裁剪，而支持移动端图片裁剪的少，很流畅的可能就会更少了。
作为一个新手，我尝试了很多种解决方法，在初始的时候尝试自己写一个jquery插件支持触屏事件等，写出来了，但是觉得都不好意思拿出手，更别说拿出来商用了。
又尝试找了一些插件，一个个试。最后综合评价，感觉还不错的jquery插件：cropper这个jquery创建。
看了一下感觉还是挺简单的。demo:http://fengyuanchen.github.io/cropper/
下面就是我使用过程的一些代码，希望能对大家有所帮助。
插件导入：
<script src="/js/libs/jquery.min.js"></script>
<script src="/js/delimg/cropper.js"></script>
必要的一点html代码：
注意：一般情况下，图片会动态生成，所以当前的src值，为空。如果你是静态图片进行图片截取，那就更简单了。看下面代码就懂了。
插件的使用（很简单）：
var $image = $(".img-container > img");
$image.attr("src", imgurl);
$image.on("load", function() { // 等待图片加载成功后，才进行图片的裁剪功能
$image.cropper({
aspectRatio: 1 / 1 // 1：1的比例进行裁剪，可以是任意比例，自己调整
});
})
现在只是做了一个框架，最主要的是下面的代码，获取到图片的数据才是最主要的，所以我们需要利用到canvas的特异功能，将图片裁剪的部分转化为base64的字符串进行前后端数据的交互。
然而，cropper并不会给你提供现成的base64字符串，但是他给你了一串的数据对象，供你自己任意发挥。
点击某个按钮时，确定剪裁这一高亮的部分：
$(selector).on("tap", function() {
var src = $image.eq(0).attr("src");
var canvasdata = $image.cropper("getCanvasData");
var cropBoxData = $image.cropper("getCropBoxData");
convertToData(src, canvasdata, cropBoxData, function(basechar) {
// 回调后的函数处理
});
})
当然这也不是重点，重点是下面这个函数处理：
function convertToData(url, canvasdata, cropdata, callback) {
var cropw = cropdata.width; // 剪切的宽
var croph = cropdata.height; // 剪切的宽
var imgw = canvasdata.width; // 图片缩放或则放大后的高
var imgh = canvasdata.height; // 图片缩放或则放大后的高
var poleft = canvasdata.left - cropdata.left; // canvas定位图片的左边位置
var potop = canvasdata.top - cropdata.top; // canvas定位图片的上边位置
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = cropw;
canvas.height = croph;
var img = new Image();
img.src = url;
img.onload = function() {
this.width = imgw;
this.height = imgh;
// 这里主要是懂得canvas与图片的裁剪之间的关系位置
ctx.drawImage(this, poleft, potop, this.width, this.height);
var base64 = canvas.toDataURL("image/jpg", 1); // 这里的“1”是指的是处理图片的清晰度（0-1）之间，当然越小图片越模糊，处理后的图片大小也就越小
callback && callback(base64) // 回调base64字符串
}
}
好啦，就到这里了，该处理的东西都处理了，当然这里一个放大缩小的正向处理剪裁，如果需要对图片的旋转等一些列的操作的话，也是可以得，这里只是给大家展示一个简单的demo的实现，如果有用得上的，可以作为参考。
实现方案：使用jquery的imagecropper.js插件中裁剪功能来实现
imagecropper.js这个源码我找了很久才找到http://pan.baidu.com/s/1oDqRO
代码量很少就没有写注释了
css
html
javascript：void(0);" onclick="document.getElementById("input").click();">选择
保存
向左旋转
向右旋转
大尺寸图片，180x180像素
中尺寸图片 100x100像素
小尺寸图片 50x50像素
最后是js部分了
var cropper;
function init()
{
//绑定
cropper = new ImageCropper(300, 300, 180, 180);
cropper.setCanvas("cropper");
cropper.addPreview("preview180");
cropper.addPreview("preview100");
cropper.addPreview("preview50");
//检测用户浏览器是否支持imagecropper插件
if(!cropper.isAvaiable())
{
alert("Sorry, your browser doesn"t support FileReader, please use Firefox3.6+ or Chrome10+ to run it.");
}
}
//打开本地图片
function selectImage(fileList)
{
cropper.loadImage(fileList[0]);
}
//旋转图片
function rotateImage(e)
{
switch(e.target.id)
{
case "rotateLeftBtn":
cropper.rotate(-90);
break;
case "rotateRightBtn":
cropper.rotate(90);
break;
}
}
//上传图片
function saveImage()
{
//选个你需要的大小
var imgData = cropper.getCroppedImageData(180, 180);
console.log("上传了："+imgData);
//在这里写你的上传代码
}
jquery选择器|使用jquery的imagecropper插件做用户头像上传 兼容移动端
http://m.bbyears.com/wangyezhizuo/87382.html
推荐访问:jquery面试题 jquery教程