Использование Croppie — простой пример

Я пытаюсь использовать обрезчик изображений Croppie от Foliotek, но он у меня почему-то не работает - и я использую очень простой пример.

Я использую демонстрационный пример со следующей страницы: http://foliotek.github.io/Croppie/

Но все, что я получаю, это пустая страница в моем браузере - как в IE, так и в Chrome.

Мой HTML-код выглядит следующим образом:

<html>  
<head>  
    <link href="croppie.css" rel="Stylesheet" />  
    <script src="croppie.js"></script>
</head>  
<body>

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

    <script>
        var basic = $('#demo-basic').croppie({
            viewport: {
                width: 150,
                height: 200
            }
        });
        basic.croppie('bind', {
            url: 'cat.jpg',
            points: [77, 469, 280, 739]
        });

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

Я надеюсь, что кто-то сможет помочь мне заставить это изображение работать :-)

Спасибо - Джеймс


javascript image jquery cropper
person James    schedule 12.01.2017    source источник
comment
Добро пожаловать в Stack Overflow. Какие ошибки вы видите в консоли? Вам нужен jQuery для этого? Если это так, ваша страница не загружается.   -  person Twisty    schedule 13.01.2017
comment
При дальнейшем расследовании это похоже на проблему с самой библиотекой. Я могу загрузить изображение отдельно, но не во фреймворке с jQuery. jsfiddle.net/Twisty/afb76b7f/3 и ванильный тест: jsfiddle.net/Twisty/afb76b7f/4   -  person Twisty    schedule 13.01.2017

Ответы (2)


arrow_upward
13
arrow_downward

Документы не дают вам хороших примеров. Я нашел это: плагин Jquery Croppie для обрезки изображения Ошибка

Это помогло мне разобраться в некоторых вещах.

Рабочий пример: https://jsfiddle.net/Twisty/afb76b7f/8/

HTML

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

CSS

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

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

JQuery

$(function() {
  var basic = $('#demo-basic').croppie({
    viewport: {
      width: 150,
      height: 200
    }
  });
  basic.croppie('bind', {
    url: 'https://i.imgur.com/xD9rzSt.jpg',
    points: [77, 469, 280, 739]
  });
});

Таким образом, ваш div должен иметь некоторые width и height, иначе он будет слишком маленьким, чтобы увидеть окно просмотра. Кроме того, если вы удалите points: [77, 469, 280, 739], изображение полностью загрузится в div.

person Twisty    schedule 12.01.2017
comment
но как мы можем использовать для поворота изображения? - person Naren Verma; 28.06.2017
comment
@NarendraVerma этот вопрос не включает возможность поворота, как и эта библиотека. - person Twisty; 28.06.2017
comment
Да, это правильно, но вы знаете, как это сделать? - person Naren Verma; 30.06.2017
comment
@NarendraVerma это можно сделать разными способами и с помощью нескольких плагинов. Что вы пробовали? - person Twisty; 02.07.2017
comment
Когда я запускаю это на локальном хосте, это дает ошибку CORS. В чем может быть причина и решение? - person Himalaya Garg; 24.05.2021
comment
@HimalayaGarg, возможно, вы захотите просмотреть stackoverflow.com/questions/ 19966707/cors-error-on-того же-домена - person Twisty; 24.05.2021

arrow_upward
1
arrow_downward

Вы просто забыли использовать библиотеку jquery, как указано в плагине. В разделе заголовка вашего html просто добавьте вызов jquery.

person KarApAtcik    schedule 30.01.2019