我可以在上传之前使用 Javascript 旋转和裁剪图片库吗？

Question

我一直在尝试使用文件 reader 和 croppie 来允许用户在上传之前在本地编辑他们的图像（缩放/旋转/裁剪），但似乎无法让它工作正确。我怀疑这是一个 DOM 问题，因为模态，但我无法在我的生活中弄清楚如何让它工作！


FileReader () stuff
//
//
//create elements for image, edit and delete buttons, then appending to parent div
//
//

//place the new image and button into the new div
newdiv.appendChild(newimage);
newdiv.appendChild(newedit);
newdiv.appendChild(newdelete);

//place the new div into the results div
output.appendChild(newdiv);

//add event listeners to dynamically created buttons
newdelete.addEventListener('click', delImage, false);
newedit.addEventListener('click', showModal, false);

.
.
.

function showModal(){
    var edit_id = this.getAttribute("dataset-editid");
    var image_id = document.getElementById('img-'+edit_id);
    var thisImage = image_id.src;
    $('#'+edit_id).click(function(){
        $("#cropImagePop").modal();
    });
    console.log(edit_id);
    console.log('image source: ' + image_id);
    var themodal = document.getElementById('cropImagePop');
    var theimage = document.getElementById('cropimage');
    var instance = new Croppie(theimage, {
        viewport: { width: 300, height: 300 },
        boundary: { width: 900, height: 600 },
        showZoomer: true,
        enableResize: true,
        url: thisImage
    });

}

当我点击任何给定图片的动态 'edit' 按钮时，模态框打开，但照片确实很大（不在模态框内），并且没有可裁剪的边界框..

这是一个fiddle：https://jsfiddle.net/noz2eb3y/

此外 - 我绝不与 Croppie 结婚 - 如果有人有很棒的（工作！）javascript 他们知道可以 zoom/rotate/crop 图片的图书馆 - 我'洗耳恭听！

Answer 1

回答你的问题：是的，这是可能的。

模态 window 的问题是因为您忘记添加 croppie css 参考。

我在此 fiddle 中修复了该问题，并向裁剪按钮添加了一个功能，以更新源元素。

参见以下示例：

$('#cropImageBtn').click(function(){
  instance.result('base64').then(function(base64) {
    image_id.src = base64;
    cleanModal();
  });
});
$('#closeImageBtn').click(function(){
    cleanModal();
});
function cleanModal()
{
  instance.destroy();
  $("#cropImagePop").modal("hide");
}

如果您想上传图片，您需要执行的后续步骤。

看看jquery.ajax
Post将base64编码的数据传到你的服务器
解码base64编码数据
保存图像文件

我还建议改进您的代码（有点混乱）。

我可以在上传之前使用 Javascript 旋转和裁剪图片库吗？

Can I use Javascript to Rotate and Crop a gallery of images prior to upload?

javascript

php

jquery

bootstrap-4

croppie