как дать cropper.js фиксированную высоту и ширину, чтобы обрезать соответственно - PullRequest
Новая
       29

как дать cropper.js фиксированную высоту и ширину, чтобы обрезать соответственно

0 голосов
/ 16 декабря 2018

Я использую cropper.js v0.8.0

Я использую приведенный ниже код jQuery для обрезки изображения. 

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#img_view').attr('src', e.target.result)
            };
            reader.readAsDataURL(input.files[0]);
            setTimeout(initCropper, 1000);
        }

function initCropper(){
        // console.log("Came here")
        var image = document.getElementById('img_view');
        var cropper = new Cropper(image, {
          aspectRatio: 1/1,
          cropBoxResizable: false,
          crop: function(e) {
            // console.log(e.detail.x);
            // console.log(e.detail.y);
          }
        });

        // On crop button clicked
        document.getElementById('crop_button').addEventListener('click', function(){
            var imgurl =  cropper.getCroppedCanvas().toDataURL();
            var img = document.createElement("img");
            img.src = imgurl;
            document.getElementById("cropped_result").appendChild(img);

            /* ---------------- SEND IMAGE TO THE SERVER-------------------------

                cropper.getCroppedCanvas().toBlob(function (blob) {
                      var formData = new FormData();
                      formData.append('croppedImage', blob);
                      // Use `jQuery.ajax` method
                      $.ajax('/path/to/upload', {
                        method: "POST",
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function () {
                          console.log('Upload success');
                        },
                        error: function () {
                          console.log('Upload error');
                        }
                      });
                });
            */
        })
    }

По Defualt, когда появляется область обрезки для обрезки изображенияпо умолчанию по соотношению сторон.Я хочу, чтобы он обрезал с определенной высоты и ширины, как 420x230.Я пробовал 

maxCropBoxWidth: 420,
maxCropBoxHeight: 230,

и 

minCropBoxWidth: 420,
minCropBoxHeight: 230,

Ниже приведен мой HTML-код: 

<div class="custom-file">
    <input type="file" id="post_featured_image" name="post_featured_image" class="custom-file-input" onchange="readURL(this);" />
    <div class="image_container">
        <img id="img_view" class="fixed-size-crop-box" src="#" alt="This is How the Featured Image will Look Exactly..">
    </div>
    <div id="cropped_result"></div>
    <button id="crop_button">Crop</button>
    <label class="custom-file-label" for="post_featured_image">Choose file</label>
</div>

, но все равно безуспешно.Есть ли какая-либо ошибка в коде или из-за того, что она не работает, может кто-нибудь помочь мне с обновленной версией.Это было бы очень полезно.М застрял на этом с последних 10 часов.

...