фон Обрезка изображения после установки

Question

Im используя следующий код, который позволяет пользователю выбрать изображение для загрузки:

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]); 
} 

картина, что выбирает пользователь приобщается в качестве фона для моих coverPicture дел. Затем пользователь может поместить фоновое изображение, перетащив его в div.

Когда пользователь закончил позиционирование фонового изображения, я хочу обрезать изображение, как оно появляется в div. Как я могу сделать это с помощью Javascript/jQuery?

Answer 1

Ниже несколько действительно хорошие яваскрипт библиотек вы можете рассмотреть

Кроппера https://fengyuanchen.github.io/cropperjs/

фотолаборатория https://mattketmo.github.io/darkroomjs/

Предложил Bryan (изображение растениеводства с фоновыми изображениями) http://scottcheng.github.io/cropit