当前位置：网站首页>图片裁剪cropper 示例

图片裁剪cropper 示例

2022-07-25 15:06:00 【深海蓝山】

头像上传时需要进行裁剪上传，可使用<input type="file">进行图片选择，然后结合cropper进行裁剪，裁剪结果是图片的base64格式，然后把结果上传到服务器就可以了

详情参数可参考：https://github.com/fengyuanchen/cropperjs

需求引入相关js和CSS：

https://cdn.bootcdn.net/ajax/libs/cropperjs/1.5.9/cropper.min.css
https://cdn.bootcdn.net/ajax/libs/cropperjs/1.5.9/cropper.min.js

效果：

代码示例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/cropperjs/1.5.9/cropper.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/cropperjs/1.5.9/cropper.min.js"></script>
    <title>Cropperjs</title>
    <style>
        .photo_cropper {
            float: left;
            width: 400px;
            height: 370px;
            margin-right: 20px;
        }

        .cropper_preview {
            float: left;
            width: 310px;
            overflow: hidden;
        }

        .photo_preview {
            float: left;
            overflow: hidden;
            margin-bottom: 10px;
            margin-right: 10px;
        }

        .photo_cropper>img,
        .photo_preview>img {
            width: 100%;
            height: 100%;
        }

        .preview-lg {
            height: 240px;
            width: 260px;
        }

        .preview-md {
            height: 120px;
            width: 120px;
        }

        .preview-sm {
            height: 80px;
            width: 80px;
        }

        .preview-xs {
            height: 40px;
            width: 40px;
        }

        .hint-content {
            top: -18px;
            font-size: 12px;
            color: gray;
        }


        .btn-primary,
        input[type="file"] {
            padding: 5px 10px;
            background-color: #00c176;
            color: white;
            border-radius: 4px;
            border: none;
        }

        .btn-primary {
            padding: 8px 10px;
        }
    </style>

</head>

<body>
    <div class="photo_container">
        <div class="photo_cropper">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604414071111&di=6681d440860b07f3c7a4fc2fcb224180&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F0dd7912397dda144dac4acc9b2b7d0a20df486f8.jpg"
                id="cr_photoImg">
        </div>
        <div class="cropper_preview">
            <div class="photo_preview preview-lg"></div>
            <div class="photo_preview preview-md"></div>
            <div class="photo_preview preview-sm"></div>
            <div class="photo_preview preview-xs"></div>
        </div>
    </div>
    <div class="cropper_actions" style="clear: both;">
        <div class="actions">
            <input type="file" accept=".gif,.jpg,.jpeg,.png" onchange="imgChange(event)" id="fileInput">
            <input type="button" class="btn-primary cr_savePhotoBtn" value=" 保存">
        </div>
        <div class="hint-content">支持格式：png、jpg, 图片大小不超过5MB。</div>
    </div>
</body>

</html>

<script>
    let cropper = null;
    $('.photo_preview').html($('.photo_cropper').html());
    function imgChange(e) {
        var fileObj = e.target.files[0];
        var typeExtens = 'image/jpeg,image/png';
        if (!typeExtens.includes(fileObj.type)) {
            alert('只能上传png、jpg格式。');
            return false;
        }
        if (fileObj.size > 5 * 1024 * 1024) {
            alert('图片大小不超过5MB。');
            return false;
        }
        console.info(fileObj);//图片文件
        var reader = new FileReader();
        reader.onload = (function (file) {
            return function (e) {
                $('#cr_photoImg').attr('src', this.result);//这个就是base64的数据了
                cropper = initCropper(cropper);
            };
        })(e.target.files[0]);
        reader.readAsDataURL(e.target.files[0]);
    }
    // 初始化图片裁剪
    function initCropper(cropper) {
        cropper && cropper.destroy();
        cropper = new Cropper(document.getElementById('cr_photoImg'), {
            viewMode: 1,
            preview: '.photo_preview',
            minCropBoxWidth: 150,
            aspectRatio: 1 / 1,
            autoCropArea: 1
        });
        return cropper;
    }
    $('.cr_selectPhoto').on('click', function () {
        $('#fileInput').trigger("click");
    })
    $('.cr_savePhotoBtn').on('click', function () {
        if ($('#fileInput').val().length == 0) {
            alert('请选择图片');
            return false;
        }
        const blobMimeType = 'image/png';
        let croppedCanvas = cropper.getCroppedCanvas({
            width: 200,
            height: 200
        });
        let dataStr = croppedCanvas.toDataURL(blobMimeType, 0.9);
        // addSave(dataStr)//将图片的base64的数据保存到服务器
    });   
</script>

原网站

版权声明
本文为[深海蓝山]所创，转载请带上原文链接，感谢
https://luqinghua.blog.csdn.net/article/details/109580113

当前位置：网站首页>图片裁剪cropper 示例

图片裁剪cropper 示例

效果：

代码示例：

边栏推荐

猜你喜欢

随机推荐