使用 Croppie 库更改照片裁剪的纵横比时如何不必重新上传图像

编程问答 2022-05-24

问题描述

我正在使用 JavaScript croppie 库来创建图像裁剪器。我的任务是添加按钮，让用户可以根据需要选择裁剪成特定的纵横比，而不仅仅是自己调整大小（我包含的当前选项是 9 x 16、1 x 1 和 16由 9）。为此，我编写了一个名为 changeSize 的函数，该函数传入照片裁剪器的新宽度和新高度。这有效，但唯一的问题是每次单击不同的纵横比按钮时，它都会让我重新上传图像。我该如何解决这个问题？也许通过将图像保存为变量？不确定。以下是我的代码供参考：

<!DOCTYPE html>
<html>
<head>
    <Meta charset="utf-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>croppie</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.min.js"></script>
    <script src=""></script>
    <style type="text/css">
        #croppie-demo {
            width: 350px;
        }
        #croppie-container {
            padding-top: 30px;
            padding-left: 160px;
        }
        #croppie-view {
            background: #e1e1e1;
            width: 450px;
            padding-left: 40px;
            height: 450px;
        }
        #size-changers {
            padding-top: 20px;
        }

    </style>
</head>
<body>
    <div class="container">
        <h2>croppie</h2>
        <div class="row">
            <div class="col-md-4 text-center">
                <div id="croppie-demo"></div>
              </div>
              <div class="col-md-4" id="croppie-container">
                <strong>Select Image:</strong>
                <br/>
                <input type="file" id="croppie-input">
                <br/>
                <button class="btn btn-success croppie-upload">Upload Image</button>
                <div id="size-changers">
                    <p>Aspect Ratio: </p>
                    <button type="button" onclick="changeSize(250,250)">1</button>
                    <button type="button" onclick="changeSize(444,250)">16/9</button>
                    <button type="button" onclick="changeSize(250,444)">9/16</button>
                </div>
              </div>
              <div class="col-md-4" style="">
                <div id="croppie-view"></div>
              </div>

        </div>
    </div>
    <script type="text/javascript">
        function changeSize(newWidth,newHeight) {
            // reload the croppie thing with new width and height
            $('#croppie-demo').croppie('destroy'); // might need to get rid of this
            croppieDemo = $('#croppie-demo').croppie({
                enableOrientation: true,enableResize: true,viewport: {
                    width: newWidth,height: newHeight,type: 'square' // or 'circle'
                },boundary: {
                    width: 450,height: 450
                }
            });     
        }

        var croppieDemo = $('#croppie-demo').croppie({
            enableOrientation: true,viewport: {
                width: 250,height: 250,type: 'square' // or 'circle'
            },boundary: {
                width: 450,height: 450
            }
        });

        $('#croppie-input').on('change',function () { 
            var reader = new FileReader();
            reader.onload = function (e) {
                croppieDemo.croppie('bind',{
                    url: e.target.result
                });
            }
            reader.readAsDataURL(this.files[0]);
        });

        $('.croppie-upload').on('click',function (ev) {
            croppieDemo.croppie('result',{
                type: 'canvas',size: 'viewport'
            }).then(function (image) {
                html = '<img src="' + image + '" />';
                $("#croppie-view").html(html);
            });
        });

    </script>
</body>
</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

croppercropperjscroppiefile-uploadjavascript