Crop background image after positioning

Question

I'm using the following code that allows the user to choose a picture to upload:

var imageLoader = document.getElementById('filePhoto');
imageLoader.addEventListener('change', handleImage, false);

function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) {
        $('.coverPicture').css('background-image', 'url(' + event.target.result + ')');
    }
    reader.readAsDataURL(e.target.files[0]);
}

The picture that the user chooses are attached as a background to my coverPicture div. The user can then position the background image by dragging it around in the div.

When the user is finished positioning the background image, I want to crop the image as it appears in the div. How can I do this with JavaScript/jQuery?

Answer 1

Below are couple of really good javascript libraries you can consider

Cropper https://fengyuanchen.github.io/cropperjs/

Darkroom https://mattketmo.github.io/darkroomjs/

Suggested by Bryan (image crop with background images) http://scottcheng.github.io/cropit