在项目中经常会用到js上传图片本地预览的效果，同时需要在预览图上直接预览截图的范围。
下面是我写的简单的demo，是用js结合cropper.js模拟实现此项前端的功能，后台则不考虑。
准备：引入文件：
插件地址：
https://fengyuanchen.github.io/cropperjs/
效果如下：
一、实现js上传图片本地预览的功能。html:
javascript:
/*从file域获取本地图片url*/
functiongetFileUrl(sourceId){
varurl;
if(navigator.userAgent.indexOf("MSIE")>=1){//IE
url=document.getElementById(sourceId).value;
}elseif(navigator.userAgent.indexOf("Firefox")>0){//Firefox
url=window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}elseif(navigator.userAgent.indexOf("Chrome")>0){//Chrome
url=window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}
returnurl;
}
/*将本地图片显示到浏览器上*/
functionpreImg(sourceId,targetId){
varurl=getFileUrl(sourceId);
varimgPre=document.getElementById(targetId);
imgPre.src=url;
}
上面的方法，可以实现上传图片本地预览的功能。下面我们再来看如何结合cropper.js实现预览截图的功能。
二、结合cropper.js实现预览截图的功能。html:
开始裁剪
裁剪
javascript:
/*从file域获取本地图片url*/
functiongetFileUrl(sourceId){
varurl;
if(navigator.userAgent.indexOf("MSIE")>=1){//IE
url=document.getElementById(sourceId).value;
}elseif(navigator.userAgent.indexOf("Firefox")>0){//Firefox
url=window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}elseif(navigator.userAgent.indexOf("Chrome")>0){//Chrome
url=window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}
returnurl;
}
/*将本地图片显示到浏览器上*/
functionpreImg(sourceId,targetId){
varurl=getFileUrl(sourceId);
varimgPre=document.getElementById(targetId);
imgPre.src=url;
varimgCrop=document.getElementById('cropTestImg');
imgCrop.src=url;
}
/*点击裁剪图片*/
$("#cropBeginBtn").on('click',function(event){
var$image=$('#cropTestImg');
$image.cropper({
movable:false,
zoomable:false,
rotatable:false,
scalable:false,
autoCropArea:0.5,
minCropBoxWidth:100,
minCropBoxHeight:100
});
/*点击获取图片的裁剪大小*/
$('#cropEndBtn').on('click',function(){
varfilenames=document.getElementById('cropTestImg').src;
varimageData=$image.cropper('getData');
console.log(imageData);
alert(imageData.x+imageData.y+imageData.width+imageData.height);
returnfalse;
});
});
上面的方法，可以很好的解决js上传图片本地预览同时支持预览截图的功能的方法。
