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

最新推荐文章于 2023-10-31 11:16:05 发布

weixin_30248399

最新推荐文章于 2023-10-31 11:16:05 发布

阅读量294

点赞数

文章标签：后端前端开发工具 ViewUI

原文链接：http://www.cnblogs.com/pomelott/p/8098737.html

版权

一、准备工作

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="上传" οnclick="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.οnlοad=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>

</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();
})

有需要可以留言。

转载于:https://www.cnblogs.com/pomelott/p/8098737.html

weixin_30248399

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
cropper.js实现图片裁剪预览并转换为base64发送至服务端。

一、准备工作1.首先需要先下载cropper,常规使用npm，进入项目路径后执行以下命令：npm install cropper2. cropper基于jquery，在此不要忘记引入jq,同时记得引入cropper.css3. 此处后端使用的nodejs，不过不懂node的影响也不大。二、图片裁剪并预览1.首先利用cropper完成图片裁剪并预览：...
复制链接

扫一扫