首页 » 前端技术 » 如何实现js上传图片本地预览同时支持预览截图的功能

如何实现js上传图片本地预览同时支持预览截图的功能

高蒙 2017/05/17 18:46 1.9w浏览 0评论 jQuery/js


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

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

准备:

引入文件:
<link rel="stylesheet" href="http://static.shuchengxian.com/css/cropper.min.css">
<script src="http://static.shuchengxian.com/js/jquery.min.js"></script>
<script src="http://static.shuchengxian.com/js/cropper.min.js"></script>

插件地址:
https://fengyuanchen.github.io/cropperjs/


效果如下:

20170518103515.jpg


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

html:

<input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" /> 
<img id="imgPre" src="" style="display: block;max-width:100px" /> 

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:

<div style="float:left">
<input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" /> 
<img id="imgPre" src="" style="display: block;max-width:100px" /> 
</div>
<div style="float:left;">
    <button id="cropBeginBtn">开始裁剪</button>
    <button id="cropEndBtn">裁剪</button>
    <div style="max-width:550px;width:100%;">
    <img id="cropTestImg" src="" style="display:block;max-width: 550px;height: auto;width:100%;"/>
</div>
</div>

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上传图片本地预览同时支持预览截图的功能的方法。





相关文章

我有话说

站长昵称:(*)

输入内容:

选个头像:

评论列表

    ...

    高蒙

    男, PHP程序猿

    文章

    484

    标签

    41

    热度

    10w+

    南京, 江苏, 中国

    人生要是没有理想, 那跟咸鱼有什么分别。