0

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

您有一个文件上传按钮，当您选择图像时，屏幕上会打开一个弹出窗口，您可以在其中选择图像的一部分。这可以在纵向和横向中进行。这是一张图片来澄清：

在此处输入图像描述

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

现在，当您单击“确定”时，我想保存三个图像。原图、纵向图像和横向图像。

我知道有一个“裁剪”选项，您可以在其中选择 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]);
    }
}

现在如何保存这三个图像？我没有它们的形式......

4

1 回答 1

1

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

于 2014-08-30T15:18:22.753 回答