在项目中经常会用到js上传图片本地预览的效果，同时需要在预览图上直接预览截图的范围。

下面是我写的简单的demo，是用js结合cropper.js模拟实现此项前端的功能，后台则不考虑。

准备：引入文件：

插件地址：

https://fengyuanchen.github.io/cropperjs/

效果如下：

一、实现js上传图片本地预览的功能。html:

javascript:

/* 从 file 域获取 本地图片 url */

function getFileUrl(sourceId) {

var url;

if (navigator.userAgent.indexOf("MSIE")>=1) { // IE

url = document.getElementById(sourceId).value;

} else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox

url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));

} else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome

url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));

}

return url;

}

/* 将本地图片 显示到浏览器上 */

function preImg(sourceId, targetId) {

var url = getFileUrl(sourceId);

var imgPre = document.getElementById(targetId);

imgPre.src = url;

}

上面的方法，可以实现上传图片本地预览的功能。下面我们再来看如何结合cropper.js实现预览截图的功能。

二、结合cropper.js实现预览截图的功能。html:

javascript:

/* 从 file 域获取 本地图片 url */

function getFileUrl(sourceId) {

var url;

if (navigator.userAgent.indexOf("MSIE")>=1) { // IE

url = document.getElementById(sourceId).value;

} else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox

url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));

} else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome

url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));

}

return url;

}

/* 将本地图片 显示到浏览器上 */

function preImg(sourceId, targetId) {

var url = getFileUrl(sourceId);

var imgPre = document.getElementById(targetId);

imgPre.src = url;

var imgCrop = 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(){

var filenames = document.getElementById('cropTestImg').src;

var imageData = $image.cropper('getData');

console.log(imageData);

alert(imageData.x+imageData.y+imageData.width+imageData.height);

return false;

});

});

上面的方法，可以很好的解决js上传图片本地预览同时支持预览截图的功能的方法。