8

Foliotek の画像クロッパー Croppie を使用しようとしていますが、何らかの理由で機能しません。非常に単純な例を使用しています。

次のページのデモ例を使用しています: 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>

誰かがこの画像クロッパーを機能させるのを手伝ってくれることを願っています:-)

ありがとう - ジェームズ

4

2 に答える 2

15

ドキュメントは良い例を示していません。私はこれを見つけました: Jquery plugin Croppie to crop image Error

それは私がいくつかのことを理解するのを助けました。

作業例: 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。

于 2017-01-12T22:52:53.383 に答える