Cropping Images In HTML Using jQuery

Here, we are cropping an image in jQuery using Cropper and later, we are providing a functionality to download at client machine or save the cropped image on SharePoint Server.

Here, we are creating the functionality of Image Cropping which will crop the image and later on, you can save those images at a client machine or you can save the cropped images on the SharePoint Server.

 

I have created an Image Cropping project and attached the complete project with this blog. You can directly start the download and can customize it based on your requirement. 

 

As I have implemented the Image Cropping functionality at SharePoint Server, it will be saved in the picture library in SharePoint which I have named as 'Image'. 

 

 

In the Image, we can see that we have the feature of image cropping along with multiple other features like aspect ratio, toggle etc. which we can use to customize based on our requirement.

 

The cropped image can be previewed as -

 

 

 

In the preview cropped image, we have options to Download/Save and close. 

 

Sample script to preview image of 320*180.

<button type="button" class="btn btn-success" data-method="getCroppedCanvas" data-option="{ "width": 320, "height": 180 }">
    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper("getCroppedCanvas", { width: 320, height: 180 })"> 320×180 </span>
</button>

We can also pass the parameter for different image inputs based on our requirement.

//To save Image in our SharePoint Library can be achieved with the below code.
< script >
    /* Cropped Image Code Section */
    function SaveCroppedImg() {
        var fileName = 'CroppedImg'; //you can modify based on input from file upload control
        var fileType = '';
        var hrefVal = $("#download").attr("href");
        console.log(hrefVal);
        var ImageURL = hrefVal; //this Image is now in Img64 type.
        // Split the base64 string in data and contentType
        var block = ImageURL.split(";");
        // Get the content type of the image
        var contentType = block[0].split(":")[1];
        if ((contentType == 'image/gif') || (contentType == 'image/GIF')) {
            fileType = '.gif';
        } else if ((contentType == 'image/png') || (contentType == 'image/PNG')) {
            fileType = '.png';
        } else if ((contentType == 'image/jpg') || (contentType == 'image/JPG')) {
            fileType = '.jpg';
        } else if ((contentType == 'image/jpeg') || (contentType == 'image/JPEG')) {
            fileType = '.jpg';
        }
        // get the real base64 content of the file
        var realData = block[1].split(",")[1];
        // Convert it to a blob to upload
        var blob = b64toBlob(realData, contentType);
        uploadCroppedImage(blob, fileName + fileType);
    }

function b64toBlob(b64Data, contentType, sliceSize) {
    contentType = contentType || '';
    sliceSize = sliceSize || 512;
    var byteCharacters = atob(b64Data);
    var byteArrays = [];
    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);
        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }
        var byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }
    var blob = new Blob(byteArrays, {
        type: contentType
    });
    return blob;
}

function uploadCroppedImage(buffer, fileName) {
    var call = uploadCroppedDocument(buffer, fileName);
    call.done(function(firstData, textStatus, jqXHR) {
        //get the URL of the Uploaded Image
        var call2 = getItem(firstData.d);
        call2.done(function(SecondData, textStatus, jqXHR) {
            //Update the metadata of the uploaded Image.
            var call3 = updateMetadata(fileServerUrl);
            call3.done(function(data, textStatus, jqXHR) {
                console.log("Image Metadata Updated");
            });
            call3.fail(function(jqXHR, textStatus, errorThrown) {
                failHandler(jqXHR, textStatus, errorThrown);
            });
        });
        call2.fail(function(jqXHR, textStatus, errorThrown) {
            failHandler(jqXHR, textStatus, errorThrown);
        });
    });
    call.fail(function(jqXHR, textStatus, errorThrown) {
        failHandler(jqXHR, textStatus, errorThrown);
    });
}

function uploadCroppedDocument(buffer, fileName) {
    var url = String.format("{0}/_api/Web/Lists/getByTitle('Images')/RootFolder/Files/Add(url='{1}', overwrite=true)", _spPageContextInfo.webAbsoluteUrl, fileName);
    var call = jQuery.ajax({
        url: url,
        type: "POST",
        data: buffer,
        processData: false,
        headers: {
            Accept: "application/json;odata=verbose",
            "X-RequestDigest": jQuery("#__REQUESTDIGEST").val(),
            "Content-Length": buffer.byteLength
        }
    });
    return call;
}

function getItem(file) {
    fileServerUrl = "";
    fileServerUrl = file.ServerRelativeUrl;
    var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Images')/GetItems";
    var call = jQuery.ajax({
        url: file.ListItemAllFields.__deferred.uri,
        type: "GET",
        dataType: "json",
        headers: {
            Accept: "application/json;odata=verbose"
        },
        success: function(data) {
            console.log(data.d.result);
        },
        error: function(data) {
            alert('Error');
        }
    });
    return call;
}

function updateMetadata(fileUrl) {
    var restSource = _spPageContextInfo.webAbsoluteUrl + "/_api/Web/lists/getbytitle('Images')/rootfolder/files/getbyurl(url='" + fileUrl + "')/listitemallfields";
    var dfd = $.Deferred();
    var titleVal = 'Crooped Image Title'; //$("#txtTitle").val();
    $.ajax({
        'url': restSource,
        'method': 'POST',
        'data': JSON.stringify({
            '__metadata': {
                'type': 'SP.ListItem'
            },
            'Title': titleVal
        }),
        'headers': {
            'accept': 'application/json;odata=verbose',
            'content-type': 'application/json;odata=verbose',
            'X-RequestDigest': $('#__REQUESTDIGEST').val(),
            'X-Http-Method': 'PATCH',
            "If-Match": "*"
        },
        'success': function(data) {
            var d = data;
            dfd.resolve();
        },
        'error': function(err) {
            dfd.reject();
        }
    });
    return dfd;
}

function failHandler(jqXHR, textStatus, errorThrown) {
    var response = JSON.parse(jqXHR.responseText);
    var message = response ? response.error.message.value : textStatus;
    alert("Call failed. Error: " + message);
}
/* End Cropped Image Section*/
< /script>

Let me know if you face issues with any implementation.