Initial Image Load Issue

[trstaley]

My code is below and I have tried several different methods for passing in an initial image. Thus far anything I do, displays the initial image, but then any image selected from the file input refuses to display. Any help would be greatly appreciated.

<form action='#'>
        <div class='image-cropper'>
            <input type='file' class='cropit-image-input' accept='image/*'>
            <div class='cropit-preview'>
                <div class='cropit-box'>
                    <canvas width='150' height='150' id='canvas'></canvas>  
                </div>
            </div>
            <input type='range' class='cropit-image-zoom-input'>
            <input type='hidden' name='image-data' class='hidden-image-data' />
       </div>
</form>

    <script>
        $(document).ready(function() {
            $('.image-cropper').cropit({
                smallImage: 'allow'
            });
        });
    </script>