Transloadit调整三张图像中的图像并保存

Question

我有一个关于使用transloader上传图片的问题。 我想做的是以下几点：

您有一个文件上传按钮，当您选择图像时，屏幕上会打开一个弹出窗口，您可以选择选择图像的一部分。这可以你做肖像＆amp;景观。这是一张图片来澄清：

如你所见，我有两种选择。肖像和风景。我在表单字段中保存坐标。上部输入字段用横向坐标填充，底部用纵向坐标填充。

现在，当您点击“确定”时，我想保存三张图片。原始，肖像图像和风景图像。

我知道有一个选项“裁剪”，你可以选择x和y，所以我知道我可以裁剪图像。

弹出窗口中的图像渲染如下：

// FILE UPLOAD CHANGE
$('#background').live('change', function(){ readURL(this); });
function readURL(input) {
    // SHOW MODAL
    $('#backgroundModal').modal('show');

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            // LOAD SRC ATTR AND SHOW IMAGE
            $('#backgroundimg').attr('src', e.target.result);
            $('#backgroundimg').show();

            // LOAD JCROP (PORTRAIT)
            loadjCrops(16,9,10,65,130,65);
            // ADD SOME COLOR TO LANDSCAPE BUTTON
            $('#landscape').addClass('selected');
        }
        reader.readAsDataURL(input.files[0]);
    }
}

现在我该如何保存这三张图片？我没有形式......

Answer 1

其中一位联合创始人撰写的示例应用程序展示了如何在此处进行裁剪https://github.com/tim-kos/transloadit-image-cropper