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

时间：2022-01-08 03:29:51

一 、准备工作

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

npm install cropper

2. cropper基于jquery，在此不要忘记引入jq,同时记得引入cropper.css

3. 此处后端使用的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>

裁剪并预览的完整代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" type="text/css" href="../css/cropper.min.css">

    <style type="text/css">

        .box{

            width: 600px;

            height: 600px;

            border:5px solid #555fff;

            border-radius: 10px;

        }

    </style>

</head>

<body>

<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().files[];

        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:  / ,

                crop: function(data) {

                }

            });

        }

    })

    //预览裁剪后的图片

    function imgSubmit(){

        var result= $('.box > img').cropper("getCroppedCanvas");

        document.body.appendChild(result);

    }

</script>

</body>

</html>

三、图片裁剪预览后以base64发送至服务端

此处后端使用nodejs，没有基础的可以看我之前的nodejs文章。

前端页面如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="../css/cropper.min.css">

    <style type="text/css">

        .box{

            width: 600px;

            height: 600px;

            border:5px solid #555fff;

            border-radius: 10px;

        }

    </style>

</head>

<body>

<form>

    <input type="file" name="" id="imgBtn" name="imgCut">

    <div class="box">

        <img src="" id="previewyulan">

    </div>

    <input type="button" name="" value="上传" onclick="imgSubmit()">

</form>

    <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 type="text/javascript">

    $("#imgBtn").change(function(e){

        var file = $("#imgBtn").get(0).files[0];

        var reader = new FileReader();

        reader.readAsDataURL(file);

        reader.onload=function(e){

            alert('文件读取完成');

            $("#previewyulan").attr("src",e.target.result)

            var $img = $("#preview");

            $('.box > img').cropper({

                aspectRatio: 16 / 9,

                crop: function(data) {

                    //转换为base64

                    // var $imgData=$img.cropper('getCroppedCanvas')

                   //   var dataurl = $imgData.toDataURL('image/png');

                    //  $("#previewyulan").attr("src",dataurl)

                }

            });

        }

    })

    function imgSubmit(){

        //获取裁剪后的canvas对象

        var result= $('.box > img').cropper("getCroppedCanvas");

        //将canvas对象转换为base64

        var dataurl =result.toDataURL('image/png');

        document.body.appendChild(result);

        //发起post请求

        var data = "img="+dataurl+"";

        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function(event){

            if(xhr.readyState == 4){    //4:解析完毕

                if(xhr.status == 200){    //200:正常返回

                    console.log(xhr)

                }

            }

        };

        xhr.open('POST','imgCut',true);    //true为异步

        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

        xhr.send(data);

    }

    </script>

</body>

</html>

路由拦截：

app.post("/html/imgCut",function(req,res){

    console.log(req.body.img);

    //此处省略详细的后端逻辑代码

    res.send();

})

有需要可以留言。

相关文章