Cropper. js - первый аргумент обязателен и должен быть элементом <img>или <canvas> - PullRequest
Новая
       34

Cropper. js - первый аргумент обязателен и должен быть элементом <img>или <canvas>

0 голосов
/ 24 января 2020

Я совершенно новичок в JS и пытаюсь использовать Кроппер. js. Я не мог запустить данный пример на README. Это код, который я пытаюсь запустить: 

//import Cropper from 'cropperjs';

let image = document.getElementById('img');
const cropper = new Cropper(image, {
  aspectRatio: 16 / 9,
  crop(event) {
    console.log(event.detail.x);
    console.log(event.detail.y);
    console.log(event.detail.width);
    console.log(event.detail.height);
    console.log(event.detail.rotate);
    console.log(event.detail.scaleX);
    console.log(event.detail.scaleY);
  },
});
img {

    display: block;
    max-width: 100%;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Cropper Test</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css"/>
        <link rel="stylesheet" href="style.css"/>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js"></script>
        <script type="text/javascript" src="test.js"></script>
    </head>
    <body>
        <div>
            <img id="img" src="test.png"/>
        </div>
    </body>
</html>

Если я раскомментирую оператор импорта, в консоли отобразится: Невозможно использовать оператор импорта вне модуля. Я искал здесь эту проблему, но не смог найти ничего, что решило бы мою проблему.

Ответы [ 2 ]

0 голосов
/ 24 января 2020

Я понял это - проблема была в том, что файл JavaScript загружался до полной загрузки DOM. Следовательно, ссылка 'img' продолжала давать сбой, так как она была запрошена до загрузки фактического изображения. Также я благодарю Sarfraaz за указание на ссылки.

FIX: 

<!DOCTYPE html>
<html>
    <head>
        <title>Cropper Test</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css"/>
        <link rel="stylesheet" href="style.css"/>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js"></script>
    </head>
    <body>
        <div>
            <img id="img" src="test.png"/>
        </div>
        <script type="text/javascript" src="test.js"></script>
    </body>
</html>
0 голосов
/ 24 января 2020

Проверьте это, это работает как положено, возможно, это проблема с изображением, которое вы пытаетесь загрузить 

/* import Cropper from 'cropperjs';
 */
let image = document.getElementById('img');
const cropper = new Cropper(image, {
  aspectRatio: 16 / 9,
  crop(event) {
    console.log(event.detail.x);
    console.log(event.detail.y);
    console.log(event.detail.width);
    console.log(event.detail.height);
    console.log(event.detail.rotate);
    console.log(event.detail.scaleX);
    console.log(event.detail.scaleY);
  },
});
img {

    display: block;
    max-width: 100%;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Cropper Test</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css"/>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js"></script>
    </head>
    <body>
        <div>
            <img id="img" src="https://patadev.s3.eu-west-2.amazonaws.com//profile/1576322838400hdiqdcjlxs.png"/>
        </div>
    </body>
</html>
...