Использование croppie для обрезки изображений без jquery - PullRequest
Новая
       8

Использование croppie для обрезки изображений без jquery

0 голосов
/ 06 мая 2018

Я пытаюсь добавить изображение на веб-сайт, над которым я работаю. Пример, на котором я базируюсь, приведен здесь:

https://jsfiddle.net/Twisty/afb76b7f/8/

Панель JS утверждает, что это простой javascript, но она также использует JQuery (если я не ошибаюсь, совсем не знаком с ним). Я пытаюсь удалить его, чтобы максимально упростить поддержку веб-сайта, но получаю сообщение об ошибке.

HTML: 

<div id="page">
    <div id="demo-basic">
    </div>
</div>

CSS: 

#page
{
    background: #FFF;
    padding: 20px;
    margin: 20px;
}

#demo-basic {
  width: 200px;
  height: 300px;
}

JS 

$(function() {
    var basic = $('#demo-basic').croppie ( {
        viewport: {
            width: 150,
            height: 150
        }
    });
    basic.croppie('bind', {
        url: 'https://i.imgur.com/xD9rzSt.jpg',
      });
});

Итак, насколько я понимаю, первый $ (function ()) можно упростить, вызвав метод onLoad, а $ ('demo-croppie') можно упростить, используя document.getElementById ('demo-croppie') )

Итак, страница импортирует файлы javascript croppie

croppie.js croppie.min.js

И попытался упростить скрипт следующим образом (событие onLoad тела страницы) 

var basic = document.getElementById('demo-basic').croppie({
    viewport: {    
        width: 150,
        height: 150
    }
});

basic.croppie('bind', {
    url: previewPictureSource,
});

Но я получаю справочную ошибку: 

ReferenceError: croppie is not defined

Я нигде не могу найти функцию croppie или понять, как связать ее с объектом.

Есть ли очевидное решение этой проблемы?

Я также с удовольствием попробую любую другую библиотеку, которая обрезает изображение квадратным результирующим изображением, если кто-то еще может предложить

...