因为在Web端,JavaScript不能直接处置惩罚当地文件,因而能够在背景裁剪图片,或许应用html5的canvas来处置惩罚。
要领1:传送到背景剪切
步骤1:上传图片到背景,向前端返回图片URL
应用input标签,将文件发送到背景。
<input id="image" type="file" name="image" />
能够运用jQuery中的ajaxFileUpload要领
$.ajaxFileUpload(
{
url: 'live/apply/uploadImage', //用于文件上传的服务器端要求地点
type:'post',
secureuri: false, //平常设置为false
fileElementId: image, //文件上传空间的id属性
dataType: 'json', //返回值范例 平常设置为json
data:data, //能够通报图片属性及其他数据
success: function (data, status) //服务器胜利相应处置惩罚函数
{
//上传传胜利处置惩罚
},
error: function (data, status, e)//服务器相应失利处置惩罚函数
{
//上传失利处置惩罚
}
步骤2: 举行裁剪,猎取图片的坐标及长宽等值,传回背景
这里平常是应用一个挪动的div来猎取剪截的动画效果,现在有多种jquery插件能够运用,本文运用的是Jcrop插件,比较简单轻易。
$("#myPhoto").Jcrop({
onChange:showPreview,
onSelect:showPreview,
aspectRatio:1
});
function showPreview(coords){
if(parseInt(coords.w){
//盘算预览地区图片缩放的比例,经由历程盘算显现地区的宽度(与高度)与剪裁的宽度(与高度)之比取得
var rx = $("#preview_box").width() / coords.w;
var ry = $("#preview_box").height() / coords.h;
//经由历程比例值掌握图片的款式与显现
$("#crop_preview").css({
width:Math.round(rx * $("#myPhoto").width()) + "px", //预览图片宽度为盘算比例值与原图片宽度的乘积
height:Math.round(rx * $("#myPhoto").height()) + "px", //预览图片高度为盘算比例值与原图片高度的乘积
marginLeft:"-" + Math.round(rx * coords.x) + "px",
marginTop:"-" + Math.round(ry * coords.y) + "px"
});
$("#X1").val(coords.x);
$("#Y1").val(coords.y);
$("#X2").val(coords.x2);
$("#Y2").val(coords.y2);
$("#W").val(coords.w);
$("#H").val(coords.h);
}
}
});
依据上述历程,能够将猎取到的剪截横纵坐标和长宽数据发送到背景。
步骤3:背景裁剪图片
以java代码为例
/*
* 图片裁剪通用接口
* src:图片位置,dest:图片保留位置
* 若要掩盖原图片,只需src == dest即可
*/
public static void cutImage(String src,String dest,int x,int y,int w,int h) throws IOException{
File srcImg =new File(src);
//猎取后缀名
String suffix = srcImg.getName().substring(srcImg.getName().lastIndexOf(".") + 1);
//依据差别的后缀猎取图片读取器
Iterator iterator = ImageIO.getImageReadersBySuffix(suffix);
ImageReader reader = (ImageReader)iterator.next();
InputStream in=new FileInputStream(src);
ImageInputStream iis = ImageIO.createImageInputStream(in);
reader.setInput(iis, true);
ImageReadParam param = reader.getDefaultReadParam();
//设置裁剪位置
Rectangle rect = new Rectangle(x, y, w,h);
param.setSourceRegion(rect);
//保留裁剪后的图片
BufferedImage bi = reader.read(0,param);
ImageIO.write(bi, suffix, new File(dest));
}
要领2:Html5的canvas手艺
这个须要浏览器支撑以下几个点,而且兼容性还没有举行测试:
File API
Blob
canvas
步骤1:读取文件
如要领1一样,须要用input标签来猎取file,然则JavaScript不能直接操纵文件,因而须要File API来处置惩罚。
$('input[type=file]').change(function(){
var file=this.files[0];
var reader=new FileReader();
reader.onload=function(){
// 经由历程 reader.result 来访问天生的 DataURL
var url=reader.result;
setImageURL(url);
};
reader.readAsDataURL(file);
});
var image=new Image();
function setImageURL(url){
image.src=url;
}
步骤2:猎取裁剪坐标
参照要领1中的步骤2
步骤3:应用canvas重绘图片
首先要设置剪截后的图片大小相称的canvas。
// 以下四个参数由步骤2取得
var x, y, width, height;
var canvas=$('<canvas width="'+width+'" height="'+height+'"></canvas>')[0],
ctx=canvas.getContext('2d');
ctx.drawImage(image,x,y,width,height,0,0,width,height);//重绘
$(document.body).append(canvas);//添加到文档中能够检察效果
步骤4:保留图片
我们要猎取 canvas 中图片的信息,须要用 toDataURL 转换成上面用到的 DataURL 。 然后掏出个中 base64 信息,再用 window.atob 转换成由二进制字符串。但 window.atob 转换后的效果仍然是字符串,直接给 Blob 照样会失足。所以又要用 Uint8Array 转换一下。
var data=canvas.toDataURL();
// dataURL 的花样为 “data:image/png;base64,****”,逗号之前都是一些说明性的笔墨,我们只须要逗号以后的就好了
data=data.split(',')[1];
data=window.atob(data);
var ia = new Uint8Array(data.length);
for (var i = 0; i < data.length; i++) {
ia[i] = data.charCodeAt(i);
};
// canvas.toDataURL 返回的默许花样就是 image/png
var blob=new Blob([ia], {type:"image/png"});
步骤5:将blob数据发送至背景
在背景能够将Blob花样的数据转换成image保留。