相关疑难解决方法(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中压缩浏览器图像的方法吗？谢谢你的回复.

我想将用户在我的应用中选择的照片发送到Firebase存储.我有一个简单的类属性_imageFile,其设置如下:

File _imageFile;

_getImage() async {
    var fileName = await ImagePicker.pickImage();
    setState(() {
        _imageFile = fileName;
    });
}

之后,我发送照片与此代码:

final String rand1 = "${new Random().nextInt(10000)}";
final String rand2 = "${new Random().nextInt(10000)}";
final String rand3 = "${new Random().nextInt(10000)}";
final StorageReference ref = FirebaseStorage.instance.ref().child('${rand1}_${rand2}_${rand3}.jpg');
final StorageUploadTask uploadTask = ref.put(_imageFile);
final Uri downloadUrl = (await uploadTask.future).downloadUrl;
print(downloadUrl);

问题是照片通常非常大.在上传之前,Flutter/Dart中是否有任何压缩和调整照片大小的方法？我很好,质量下降.