使用cropper.js 实现简单的头像裁剪上传

最新推荐文章于 2024-08-09 07:15:36 发布

木子_L

最新推荐文章于 2024-08-09 07:15:36 发布

阅读量6.4k

点赞数 4

本文链接：https://blog.csdn.net/ljt123456765/article/details/79716260

版权

本文介绍了如何使用cropper.js库来创建一个简单的头像裁剪并上传的功能。在实际操作中，由于jQuery获取的image是jQuery对象而非DOM节点，因此需要注意实例化的正确方式。同时，由于后台不支持base64编码的图片，我们需要将其转换为文件。在利用formData上传时，确保文件名已添加，避免上传错误。最后，在使用ajax上传文件时，要将processData和contentType设置为false以防止额外的处理错误。

摘要由CSDN通过智能技术生成

最近项目中用到了头像上传功能，于是找了好久找到了cropper.js,简单做个小例子,话不多说直接上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Cropper.js</title>
    <link rel="stylesheet" href="../dist/cropper.css">
    <style>
        .container{
            width:500px;
            height:500px;
            border:1px solid #000;
            float: left;
        }
        .preview{
            width: 200px;
            height: 200px;
            float: left;
            border:1px solid #000;
            margin-left: 100px;
        }
        button{
            width: 100px;
            height: 30px;
            margin-top: 30px;
            margin-left: 150px;
        }
    </style>
</head>

<body>
    <div class="container">
        <input type="file" id="file">
        <img src="" alt="" id="img">
    </div>
    <div class="preview">
         <img src="" alt="" id="imga">
    </div>
    <button>上传图片</button>

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="../dist/cropper.js"></script>
    <script>
        var image = document.getElementById('img');
        var cropper, canvas;
        $('#file').change(function(e){
            var file;
            var files = e.target.files;
             if (files && files.length > 0) {
                file = URL.createObjectURL(files[0]);
                $('#img').attr({'src': file})
            }
             cropper = new Cropper(image, {
                aspectRatio: 1,
                viewMode: 1,
                background: false,  //是否显示网格背景
                zoomable: false,   //是否允许放大图像
                guides: false,   //是否显示裁剪框虚线
                crop: function (event) { //剪裁框发生变化执行的函数。
                    canvas = cropper.getCroppedCanvas({  //使用canvas绘制一个宽和高200的图片
                        width: 200,