使用多方流调整图像大小

Question

如何在场景中使用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网站。

Answer 1

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

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

由于您自己处理上传并使用Node.js，您可以使用Node.jsSDK:将文件发送到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网站上有一个活生生的例子。以下是我如何将其适应您的用例（未经测试）：

<!-- 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>