Doesn't Work Out The Box

NinjaKhoder commented 4 years ago

Expected Behavior

Download zip file
Unzip
Run index.html

Actual Behavior

There are many missing references you must manually edit before getting the index.html file to load correctly.

Steps to Reproduce the Problem

Put all necessary references within the index.html file.

Example Link

N/A

Specifications

Browser: Chrome
Version: Version 84.0.4147.105 (Official Build) (64-bit)

NinjaKhoder commented 4 years ago

This is my 3rd day on this on trying to get it to work. I'm developing in Visual Studio 2017. Here's my code sample below in its simplest form. In which I still cannot get it to work. Can anyone point me in the right direction?

bret-miller commented 4 years ago

Well, I can share my code though it's PHP/JavaScript, it'll be pretty similar:

    <!-- Image Crop Dialog -->
    <div id="image-crop" class="modal hidden" title="Zoom and Crop Image">
        <div>
            <p>Please rotate, zoom and crop your image to fit the space.</p>
            <p id="image-crop-container"></p>
            <p>&nbsp;<p>
            <p><span class="btn small">
                <a href="javascript:" onclick="gciGetCroppedImage();">Finish</a>
                <a href="javascript:" onclick="gciRotateImageRight();">Rotate Right</a>
                <a href="javascript:" onclick="gciRotateImageLeft();">Rotate Left</a>
            </span></p>
            <ul>
            <li>The image inside the gold border is what will be saved when you click "Finish".</li>
            <li>To position the image, use your mouse to drag it.</li>
            <li>Drag the white dot in the zoom slider to resize the image. For finer control use left and right arrows.</li>
            </ul>
        </div>
    </div>

And the javascript:

        var img='/sites/'+weburi+'/'+r.filename+'?t='+new Date().getTime();
        var imgel='<img style="visibility:hidden;" src="'+img+'">';
        $('#image-crop-container').html(imgel);
        gciModal('#image-crop'); // have to do this first to get the container width
        setTimeout(gciCropImage,500);

// Image Crop & Rotate
function gciCropImage() {
    var infostr=$('#image-info').val(); //which+','+aspect+','+expectedsize (w x h)
    var info=infostr.split(',');
    var imgsize=info[2].split(' x ');
    var cw=$('#image-crop-container').width();
    var ch=$('#image-crop-container').height();
    if ((cw > ch) && (info[1]=='1x1')) {
        $('#image-crop-container').width(ch);
        cw=$('#image-crop-container').width();
    }
    var vpw=parseInt(cw*0.8);
    var vph=parseInt(vpw/imgsize[0]*imgsize[1]);
    var img=$('#image-crop-container img').attr('src');
    $('#image-crop-container img').croppie({
        url:img,
        enableOrientation:1,
        enforceBoundary:0,
        viewport:{width:vpw,height:vph,type:'square'}
    });
}
function gciRotateImageRight(){
    $('#image-crop-container img').croppie('rotate',-90);
}
function gciRotateImageLeft() {
    $('#image-crop-container img').croppie('rotate',90);
}
function gciGetCroppedImage() {
        var infostr=$('#image-info').val(); //which+','+aspect+','+expectedsize (w x h)
        var info=infostr.split(',');
        var imgsize=info[2].split(' x ');
    $('#image-crop-container img').croppie('result',{type:'base64',size:{width:imgsize[0],height:imgsize[1]},format:'png'}).then(function(r) { 
        gciSaveImage(r);
    ; });
}

NinjaKhoder commented 4 years ago

Hi Bret, Thanks for your help and direction on this. I was able to create a simple HTML page with the basic functionalities of upload, resize, and crop.

` <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link href="https://foliotek.github.io/Croppie/croppie.css" rel="stylesheet" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script src="https://foliotek.github.io/Croppie/croppie.js"> </script> <script src="https://foliotek.github.io/Croppie/bower_components/exif-js/exif.js"> </script>

<style>
    #page {
        background: #ffffff;
        padding: 20px;
        margin: 20px;
    }

    #demo-basic {
        width: 600px;
        height: 600px;
    }
</style>

</head> <body> <h1>Crop Image Demo</h1> <input id="upload" type="file" /> <br /> <div id="page"> <div id="demo-basic"></div> </div>

<input id="upload-result" type="button" value="Crop Image" />
<br />
<img id="cropped-result" src="" />

<script>
    var $uploadCrop;       

    $uploadCrop = $("#demo-basic").croppie({
        viewport: {
            width: 200,
            height: 200,
            type: "square"
        },
        enableExif: true
    });

    $("#upload").on("change", function () { readFile(this); });

    $("#upload-result").on("click", function (ev) {
        $uploadCrop.croppie("result", {
            type: "canvas",
            size: "viewport"
        }).then(function (resp) {
            $("#cropped-result").attr("src", resp);
        });
    });

    function readFile(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $("#demo-basic").addClass("ready");
                $uploadCrop.croppie("bind", {
                    url: e.target.result
                }).then(function () {
                    console.log("jQuery bind complete");
                });

            }

            reader.readAsDataURL(input.files[0]);
        }
        else {
            alert("Sorry - you're browser doesn't support the FileReader API");
        }
    }
</script>

</body> </html> `

Foliotek / Croppie