Message:

I have 2 questions, i am working on a javascript script where i have the following code

<script type="text/javascript" >

        function readURL(input) {

            if (input.files && input.files[0]) {

                var reader = new FileReader();

                reader.onload = function (e) {

                    $('#imageId').attr('src', e.target.result)

                };

                reader.readAsDataURL(input.files[0]);

                setTimeout(initCropper, 1000);

            }

        }

        function initCropper(){

            var image = document.getElementById('blah');

            var cropper = new Cropper(image, {

              aspectRatio: 1 / 1,

              crop: function(e) {

                console.log(e.detail.x);

                console.log(e.detail.y);

              }

            });

    

            // On crop button clicked

            document.getElementById('crop_button').addEventListener('click', function(){

                var imgurl =  cropper.getCroppedCanvas().toDataURL();

                var img = document.createElement("img");

                img.src = imgurl;

                document.getElementById("cropped_result").appendChild(img);

    

                //sending cropped image to server

    

                    cropper.getCroppedCanvas().toBlob(function (blob) {

                          var formData = new FormData();

                          formData.append('croppedImage', blob);

                          // Use `jQuery.ajax` method

                          path = 'C:/Users/Andy/Desktop/javascript/croppingwcropperjs/uploads';

                          $.ajax(path, {

                            method: "POST",

                            data: formData,

                            processData: false,

                            contentType: false,

                            success: function () {

                              console.log('Upload success');

                            },

                            error: function () {

                              console.log('Upload error');

                            }

                          });

                    });

              

            })

        }

    </script>

here is the html part of it

<! DOCTYPE html>

<html>

<head>

       <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.1/cropper.min.js"></script>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

        <script name="jquery-croper-script">

        !function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(require("jquery"),require("cropperjs")):"function"==typeof define&&define.amd?define(["jquery","cropperjs"],r):r(e.jQuery,e.Cropper)}(this,function(c,s){"use strict";if(c=c&&c.hasOwnProperty("default")?c.default:c,s=s&&s.hasOwnProperty("default")?s.default:s,c.fn){var e=c.fn.cropper,d="cropper";c.fn.cropper=function(p){for(var e=arguments.length,a=Array(1<e?e-1:0),r=1;r<e;r++)a[r-1]=arguments[r];var u=void 0;return this.each(function(e,r){var t=c(r),n="destroy"===p,o=t.data(d);if(!o){if(n)return;var f=c.extend({},t.data(),c.isPlainObject(p)&&p);o=new s(r,f),t.data(d,o)}if("string"==typeof p){var i=o[p];c.isFunction(i)&&((u=i.apply(o,a))===o&&(u=void 0),n&&t.removeData(d))}}),void 0!==u?u:this},c.fn.cropper.Constructor=s,c.fn.cropper.setDefaults=s.setDefaults,c.fn.cropper.noConflict=function(){return c.fn.cropper=e,this}}});

        </script>



        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.1/cropper.min.css" />



    </head>

<body>

    <input type="file" name="image" id="image" onchange="readURL(this);"/>

    <div class="image_container">

        <img id="imageId" src="#" alt="your image" />

    </div>

    <div id="cropped_result"></div>        

    <button id="crop_button">Crop</button>

</body>

</html>

Okay. with the code above i intent to crop an image and save the cropped version in my a folder named uploads. I have managed to crop the image however i couldnt save the cropped image. My question are :

what should be the path format in order to successfully commit the cropped image into an upload folder?

i have seen some creating a php script for path like uploads.php is it mandatory for the path to be a script in php.

My Answer:
Question 1: Can you provide more details on what exactly is not working when you try to upload a cropped image using CropperJs?

Question 2: Can you share the relevant code snippet that you are using to upload the cropped image so that we can better understand the issue and provide assistance?

John Davidson

javascript - Uploading a cropped image not working CropperJs

Rate this post

Comments