定位后裁剪背景图像

Question

我使用以下代码，允许用户选择要上传的图片：

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中拖动背景图像来定位背景图像。

当用户完成背景图像的定位时，我想裁剪图像，因为它出现在div中。我怎么能用Javascript / jQuery做到这一点？

Answer 1

以下是一些你可以考虑的非常好的javascript库

克罗珀 https://fengyuanchen.github.io/cropperjs/

暗室 https://mattketmo.github.io/darkroomjs/

Bryan建议（带有背景图像的图像裁剪） http://scottcheng.github.io/cropit