0

我正在使用 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,
            enableResize: 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>
4

1 回答 1

0

它使您重新上传图像，因为您正在破坏 Croppie 实例并在更改纵横比时重建它。为了克服这个问题，您可以将图像保存到全局变量中，并在纵横比发生变化时重新初始化 Croppie 时加载它。

var uploadedImage = null;

// saving uploaded image on global variable
$('#croppie-input').on('change', function () { 
    var reader = new FileReader();
    reader.onload = function (e) {
       croppieDemo.croppie('bind', {
           url: e.target.result
       });
       // saving the image to a global variable
       uploadedImage = e.target.result;
     }
     reader.readAsDataURL(this.files[0]);
});


// loading saved image on aspect ratio change
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
        },
        // loading the image from saved image
        url: uploadedImage
     });     
 }
于 2021-09-28T05:43:50.927 回答