cropper.js实现图片裁剪预览并转换为base64发送至服务端。

原创 pomelott 随笔 javascript 252阅读 2017-12-24 17:56:19 举报

详细代码,可见博客园。博客园链接 http://www.cnblogs.com/pomelott/p/8098737.html

一 、准备工作

1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令:
npm install cropper

  1. cropper基于jquery,在此不要忘记引入jq,同时记得引入cropper.css
  2. 此处后端使用的nodejs,不过不懂node的影响也不大。

    二 、 图片裁剪并预览

1.首先利用cropper完成图片裁剪并预览:
复制代码

<input type="file" name="" id="imgBtn" name="imgCut">
<!-- 预览容器-->
<div class="box">
    <img src="" id="preview">
</div>
<!-- 点击上传按钮裁剪-->
<input type="button" name="" value="上传" onclick="imgSubmit()">        

复制代码
复制代码

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>;
<script type="text/javascript" src="../js/cropper.min.js"></script>
<script>
//生成裁剪区域
$("#imgBtn").change(function(e){
var file = $("#imgBtn").get(0).files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload=function(e){
alert('文件读取完成');
$("#preview").attr("src",e.target.result)
var $img = $("#preview");
$('.box > img').cropper({
aspectRatio: 16 / 9,
crop: function(data) {
}
});
}

})
    //预览裁剪后的图片
function imgSubmit(){
    var result= $('.box > img').cropper("getCroppedCanvas");
    document.body.appendChild(result);
}    

</script>

三、图片裁剪预览后以base64发送至服务端
详细代码,可见博客园。博客园链接 http://www.cnblogs.com/pomelott/p/8098737.html

有需要可以留言。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复