我怎么敢倒下,我身后空无一人

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

 jQuery/js   高蒙   阅读(16198)   评论(9)   2017-05-17 18:46:01    js cropper.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上传图片本地预览同时支持预览截图的功能的方法。





相关文章



我要评论


站长昵称:(*)

输入内容:


评论列表


高蒙

男,程序猿一枚

 

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


关于我

  http://www.shuchengxian.com

高蒙个人博客是以PHP技术为主的程序员个人博客。博客主要发布php开发中遇到的问题以及解决办法,同时个人博客也分享网站模板素材,jquery插件等方面素材。


站点声明:相关侵权、举报、投诉及建议等,请发E-mail:936594075#qq.com(#替换成@)。

Copyright © 2018, www.shuchengxian.com, All rights reserved. 个人博客皖公网安备 34152302000022号 皖ICP备15015490号

关键词:个人博客,PHP博客,PHP博客程序,高蒙博客,高蒙个人博客,php程序员博客,程序员个人博客