在项目中经常会用到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上传图片本地预览同时支持预览截图的功能的方法。