定位后裁剪背景图片

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