Having trouble with cropper.js

I am using cropper.js on something I am working on, but having a little trouble getting it to work properly, is it possible to see what I might be doing wrong.

The image "duplicates" on the web page. (using a random image for example here)

My Html, Image:

<img id="ImageFrame" src="http://ift.tt/297i7Tl" style="max-width:100%" />

My javascript:

$(function () {
                var image = $('#ImageFrame');
                var cropImage = new Cropper(image[0], {
                    preview: 'div#CropPreview',
                    built: function () {},
                    crop: function (e) {
                        $("#cropX").val(Math.round(e.detail.x).toString());
                        $("#cropY").val(Math.round(e.detail.y).toString());
                        $("#cropH").val(Math.round(e.detail.height).toString());
                        $("#cropW").val(Math.round(e.detail.width).toString());
                    }
                });
            });

Then the result:

Any help would be welcome.