相关疑难解决方法(0)

TL; DR;

有没有办法在上传之前直接在浏览器端压缩图像(主要是jpeg,png和gif)？我很确定JavaScript可以做到这一点,但我找不到实现它的方法.

这是我想要实现的完整场景:

• 用户访问我的网站,并通过input type="file"元素选择图像,
• 这个图像是通过JavaScript检索的,我们做了一些验证,如正确的文件格式,最大文件大小等,
• 如果一切正常,页面上会显示图像的预览,
• 用户可以进行一些基本操作,例如将图像旋转90°/ -90°,按照预定义的比例裁剪等,或者用户可以上传另一张图像并返回步骤1,
• 当用户满意时,编辑后的图像会被压缩并在本地"保存"(不保存到文件中,但在浏览器内存/页面中), -
• 用户填写表格,其中包含姓名,年龄等数据,
• 用户单击"完成"按钮,然后将包含数据+压缩图像的表单发送到服务器(不带AJAX),

直到最后一步的完整过程应该在客户端完成,并且应该与最新的Chrome和Firefox,Safari 5+和IE 8+兼容.如果可能,只应使用JavaScript(但我很确定这是不可能的).

我现在没有编码任何东西,但我已经考虑过了.可以通过File API在本地读取文件,可以使用Canvas元素完成图像预览和编辑,但是我找不到一种方法来执行图像压缩部分.

根据html5please.com和caniuse.com,支持这些浏览器非常困难(感谢IE),但可以使用FlashFanvas和FileReader之类的polyfill来完成.

实际上,目标是减小文件大小,因此我将图像压缩视为一种解决方案.但是,我知道上传的图像将在我的网站上显示,每次都在同一个地方,我知道这个显示区域的尺寸(例如200x400).因此,我可以调整图像大小以适应这些尺寸,从而减小文件大小.我不知道这种技术的压缩率是多少.

你怎么看 ？你有什么建议告诉我吗？你知道在JavaScript中压缩浏览器图像的方法吗？谢谢你的回复.

我想通过POST接口将文件上传到AWS S3 ，但我没有这样做。

我已经使它可以与PUT和一起使用getSignedUrl，但是不幸的是，该接口不允许直接文件大小的限制。因此，我尝试使用POST接口，因为在那里可以使用'content-length-range'condition。

这是我的请求签名：

const aws = require('aws-sdk');

aws.config.update({
    signatureVersion: 'v4',
    region: 'eu-central-1',
    accessKeyId: config.aws.keyId,
    secretAccessKey: config.aws.keySecret
});

const s3 = new aws.S3();

return new Promise((resolve, reject) => {
    const params = {
        Bucket: config.aws.bucket,
        Fields: {
            key: filePath
        },
        Expires: config.aws.expire,
        Conditions: [
            ['acl', 'public-read'],
            ['content-length-range', 0, 10000000] // 10 Mb
        ]
    };
    const postUrl = s3.createPresignedPost(params, (err, data) => {
        resolve(data);
    });
});

这部分似乎还可以，但是我不能使用所需的签名将文件上传到S3。

这是我所做的其他尝试：

request.post({
    url: payload.url,
    body: payload,
    form: …

我尝试将图像上传到 S3 使用serverless和 NodeJS，但上传后出现问题。在本地使用中，serverless-offline一切都像冠军一样工作，但部署后我收到此错误。然后我尝试拦截并检测发生了什么并看到这个结果：

图像主体中出现了一些奇怪的字符，例如<0x0a> 0x01 0x04

我也尝试过使用serverless-apigw-binary，但运气不好。

我正在尝试将图像中的缓冲区数据上传到 S3。它上传得很好。但是当我尝试在 S3 中下载/查看图像时，它会引发错误。我尝试了以下 -

1. 该图像以缓冲区格式 (JSON) 提供给我。我无法改变这一点

let image = { "type": "Buffer", "data": [45, 45, 45....]

let buf = new Buffer(image )

let params = {
  Bucket: "bucketName",
  Key: "TestImage123haha.PNG",
  Body: buf ,
  ACL: 'public-read',
  ContentType: 'image/jpeg'
};

s3.upload(params, function(err, data) {
  if (err) {
    console.log('ERROR MSG: ', err);
  } else {
    console.log('Successfully uploaded data' + data.Location);
  }
})

2. 上传图像后，如果我尝试访问存储它的存储桶的 URL 并查看图像，这就是我得到的 -

3. 当我打印缓冲区数据时 -buf在控制台中，这就是我得到的 -