当前位置：网站首页>Image cropper example

Image cropper example

2022-07-25 15:13:00 【Deep sea blue mountains】

When uploading avatars, you need to cut and upload , You can use <input type="file"> Make a picture selection , Then combine cropper Tailoring , The cropping result is the image base64 Format , Then upload the results to the server

For detailed parameters, please refer to ：https://github.com/fengyuanchen/cropperjs

Requirements introduction related js and 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

effect ：

Code example ：

<!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="  preservation ">
        </div>
        <div class="hint-content"> Support formats ：png、jpg,  The size of the picture does not exceed 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(' Can only upload png、jpg Format .');
            return false;
        }
        if (fileObj.size > 5 * 1024 * 1024) {
            alert(' The size of the picture does not exceed 5MB.');
            return false;
        }
        console.info(fileObj);// Picture file 
        var reader = new FileReader();
        reader.onload = (function (file) {
            return function (e) {
                $('#cr_photoImg').attr('src', this.result);// This is base64 The data of the 
                cropper = initCropper(cropper);
            };
        })(e.target.files[0]);
        reader.readAsDataURL(e.target.files[0]);
    }
    //  Initialize image cropping 
    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(' Please choose a picture ');
            return false;
        }
        const blobMimeType = 'image/png';
        let croppedCanvas = cropper.getCroppedCanvas({
            width: 200,
            height: 200
        });
        let dataStr = croppedCanvas.toDataURL(blobMimeType, 0.9);
        // addSave(dataStr)// Picture the base64 The data is saved to the server 
    });   
</script>

原网站

版权声明
本文为[Deep sea blue mountains]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/206/202207251506167034.html

当前位置：网站首页>Image cropper example

Image cropper example

effect ：

Code example ：

边栏推荐

猜你喜欢

随机推荐