使用多方流调整图像大小答案

【问题标题】：image resize using multiparty stream使用多方流调整图像大小
【发布时间】：2018-09-24 18:30:14
【问题描述】：

如何在我的场景中使用GraphicsMagick 或transloadit？

我正在使用 expressjs 多方将文件上传到 Azure 存储：

app.post('/upload', function (req, res) {
    var blobService = azure.createBlobService();
    var form = new multiparty.Form();

    form.on('part', function(part) {
        if (part.filename) {
            var filename = part.filename;
            var size = part.byteCount;

            var onError = function(error) {
                if (error) {
                    res.send({ grrr: error });
                }
            };
            blobService.createBlockBlobFromStream('container', filename, part, size, onError);
        } else {
            form.handlePart(part);
        }
    });

    form.parse(req);
    res.send("SWEET");
});

在上传到存储之前，我可以使用任何服务来调整图像和缩略图的大小。我不想将文件保存到临时文件夹，因为我使用的是 azure 网站。

【问题讨论】：

如果您已经解决了这个问题。你能告诉我解决方案吗？谢谢。

标签： node.js azure express transloadit

【解决方案1】：

披露：我在 Transloadit 工作，所以我会朝这个方向努力。

选项 1，继续自己处理上传：

由于您自己处理上传并使用 Node.js，您可以使用 Node.js SDK 将文件发送到 Transloadit：

// npm install transloadit --save
const TransloaditClient = require('transloadit')

const transloadit = new TransloaditClient({
  authKey: 'YOUR_TRANSLOADIT_KEY',
  authSecret: 'YOUR_TRANSLOADIT_SECRET'
})

// Likely you'll want to use .addStream(part) here instead!
transloadit.addFile('myfile_1', './chameleon.jpg')

const options = {
  params: {
    steps: {
      thumbed: {
        use: ':original',
        robot: '/image/resize',
        width: 75,
        height: 75,
        resize_strategy: 'fit',
      },
    }
  }
}

transloadit.createAssembly(options, (err, result) => {
  if (err) {
    throw err
  }

  console.log({result})
})

文件现在由 Transloadit 调整大小，您可以使用我们的/azure/export Robot 将文件发送到 Azure 存储：

"exported": {
  "use": ["thumbed"],
  "robot": "/azure/store",
  "credentials": "YOUR_CREDENTIALS"
}

选项 2，让 Tranloadit 也处理上传

或者，您可以将我们新的开源文件上传器Uppy 作为插件放入您的网站，并使用其 Transloadit 插件将文件直接发送到 Transloadit。编码和 Azure 导出指令将保存在模板中的 Tranloadit 帐户中。您可以在 Uppy 集成中引用 template_id，然后您不必自己编写任何服务器端代码或处理分段上传。您的上传也将变为可恢复的。 Uppy 网站上有一个live example。以下是我为您的用例调整它的方法（未经测试）：

<!-- Basic Uppy styles. You can use Transloadit's CDN, Edgly:
https://transloadit.edgly.net/releases/uppy/v0.27.4/dist/uppy.min.css -->
<link rel="stylesheet" href="/uppy/uppy.min.css">

<div class="UppyDragDrop"></div>

<!-- Load Uppy pre-built bundled version. You can use Transloadit's CDN, Edgly:
https://transloadit.edgly.net/releases/uppy/v0.27.4/dist/uppy.min.js -->
<script src="/uppy/uppy.min.js"></script>
<script>
  var uppy = Uppy.Core();
  uppy.use(Uppy.DragDrop, {
    target: '.UppyDragDrop',
  });
  uppy.use(Transloadit, {
    params: {
      auth: {
        key: YOUR_TRANSLOADIT_API_KEY
      },
      template_id: YOUR_TEMPLATE_ID
    },
    waitForEncoding: true
  });

  console.log('--> Uppy pre-built version with Tus, DragDrop & Russian language pack has loaded');
</script>

【讨论】：