网页端 裁剪图片，不需要经过服务器。
这个是用 框架实现的。配合jcrop.
高级浏览器 使用 canvas 裁剪，ie6 7 8使用 flash过度。
核心代码：
seajs.use(['gallery/jcrop/0.9.12/jcrop.css','gallery/jcrop/0.9.12/jcrop.js'],function(){
FileAPI.event.on(el,'change',function (evt){
var files = FileAPI.getFiles(evt); // Retrieve file list
FileAPI.filterFiles(files,function (file,info){
if( !/^image/.test(file.type) ){
alert('图片格式不正确');
return false;
}
else if(file.size > 20 * FileAPI.MB){
alert('<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>必须小于20M');
return false;
}
else{
return true;
}
},function (files,rejected){
console.log(files);
if( files.length ){
var file = files[0];
var img0 = FileAPI.Image(file);
var img1 = FileAPI.Image(file);
var ratio = 0;
FileAPI.getInfo(file,function (err,info) { //get image ratio
if (!err) {
if (info.width > info.height) {
ratio = info.width / 500;
}
else {
ratio = info.height / 500;
}
}
});
img0.resize(500,500,'max') //place image and register jcrop
.get(function(err,img) {
$('#img2').empty();
$('#img2').append($(img));
$('#img2').children().Jcrop({
aspectRatio: 1,bgColor: 'rgba(0,0.4)',onSelect: function(c) {
img1.matrix.sx = c.x * ratio;
img1.matrix.sy = c.y * ratio;
img1.matrix.sw = c.w * ratio;
img1.matrix.sh = c.h * ratio;
img1.matrix.dw = 500;
img1.matrix.dh = 500;
img1.get(function(err,img) {
// $('#img3').empty();
// $('#img3').append($(img));
$('#img3').html($(img));
});
}
});
});
$('#btn').on('click',function(){
FileAPI.upload({
// url: '/testUpFile/upFile',// headers: { 'Content-Type': 'multipart/form-data' },files: { images: img1 },progress: function (evt){ / ... / },complete: function (err,xhr){ / ... /
//alert(xhr.responseText);
console.log(xhr);
}
});
});
}
});
});
});
完整代码：
<input name="files" type="file" multiple />
<button id="btn"><a href="https://www.jb51.cc/tag/shangchuan/" target="_blank" class="keywords">上传</a></button>
</div>
<div id="images">
<p style="margin-top: 40px;"></p>
<div id="img2" ></div>
<div id="img3"></div>
</div>
以上所述就是本文的全部内容了，希望大家能够喜欢。
原文链接：https://www.f2er.com/jquery/54653.html