Comment utiliser cropper.js sur le terminal mobile pour recadrer des images et les télécharger (analyse de code)

Le contenu de cet article explique comment recadrer des images et les télécharger à l'aide de cropper.js sur le terminal mobile (analyse de code). J'espère que cela sera utile. pour vous. .

Présentation de Cropper à utiliser

<link  href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>

Structure HTML

<li class="ui-border-bottom">
    <a href="javascripts:void(0);">头像
        <span class="pull-right user-header">
            <img class="rounded" id="avatar" src="../images/user.jpg" alt="avatar">
            <input type="file" class="sr-only" id="input" name="image" accept="image/*">
        </span>
    </a>
</li>

<div class="common-layer" id="modal">
    <div class="layer-content">
        <div class="layer-title">
            <span class="cancel-btn" id="cancle">取消</span>
            <h4>截图头像</h4>
        </div>
        <div class="layer-area">
            <div class="img-container">
                <img id="image" src="https://avatars0.githubusercontent.com/u/3456749">
            </div>
            <a class="ui-btn m-t-15" id="crop" href="javascripts:void(0);">保存</a>
        </div>
    </div>
</div>

Référence js :
Pour cropper.js spécifique, veuillez consulter le site officiel

$(function() {
    //修改头像 参加文件https://blog.csdn.net/weixin_38023551/article/details/78792400
    var avatar = document.getElementById('avatar');
    var image = document.getElementById('image');
    var input = document.getElementById('input');
    var $modal = $('#modal');
    var cropper;
    //点击图片
    input.addEventListener('change', function (e) {
        var files = e.target.files;
        var done = function (url) {
            input.value = '';
            image.src = url;
            $modal.show(function() {
                //初始化
                cropper = new Cropper(image, {
                    aspectRatio: 1,
                    viewMode:1,
                });
            });

        };
        var reader;
        var file;
        var url;

        if (files && files.length > 0) {
            file = files[0];
            if (URL) {
                done(URL.createObjectURL(file));
            } else if (FileReader) {
                reader = new FileReader();
                reader.onload = function (e) {
                    done(reader.result);
                };
                reader.readAsDataURL(file);
            }
        }
    });
    //关闭弹窗
    document.getElementById('cancle').addEventListener('click', function () {
        $modal.hide(function() {
            cropper.destroy();
            cropper = null;
        });
    });
    //保存截图
    document.getElementById('crop').addEventListener('click', function () {
        var initialAvatarURL;
        var canvas;
        $modal.hide(function() {
            cropper.destroy();
            cropper = null;
        });

        if (cropper) {
            canvas = cropper.getCroppedCanvas({
                width: 120,
                height: 120,
            });
            initialAvatarURL = avatar.src;
            avatar.src = canvas.toDataURL('image/jpeg');
            //保存数据
            canvas.toBlob(function (blob) {
                var formData = new FormData();
                formData.append('avatar', blob);
                $.ajax('https://jsonplaceholder.typicode.com/posts', {
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function () {
                        console.log('Upload success');
                    },
                    error: function () {
                        avatar.src = initialAvatarURL;
                        console.log('Upload error');
                    }
                });
            });
        }
    });
})

Recommandations associées :

Comment implémenter la fonction de recadrage frontal et de téléchargement d'images

javascript - Comment implémenter le recadrage et le téléchargement d'images sur le téléphone mobile

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!