Transloadit 在三个图像中调整图像大小并保存

Posted 2023-02-25

【中文标题】Transloadit 在三个图像中调整图像大小并保存

【英文标题】：Transloadit resize image in three images and save

【发布时间】：2013-10-11 09:40:26

【问题描述】：

我有一个关于使用转换器上传图片的问题。 我想做的是：

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

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

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

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

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

【参考方案1】：

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

【讨论】：

这些天你最好切换到 Uppy，同样是通过 Transloadit，它在上传之前具有图像裁剪和调整大小uppy.io/docs/image-editor