HTML 5中上传前调整图像大小

Question

我正在尝试在上传文件之前调整图像大小。我找到了一个不错的插件(链接)，可以返回更新后的图像blob，但是我找不到如何将blob分配回上传使用的文件对象。blob看起来像这样：data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQAB.....。

        var file = e.target.files[0];
        canvasResize(file, {
            width: 300,
            height: 0,
            crop: false,
            quality: 80,
            //rotate: 90,
            callback: function (data, width, height) {
                // How to assign the data blob back to the file?
                //$(file).attr('src', data);

             // THEN submit with the smaller photo   
             $('#PhotoForm').ajaxSubmit(options);
            }
        });

谢谢！

- user1854458

---

你有一个"data" scheme URI。你可以将其直接发送到服务器，然后在那里解码回二进制格式。 - Quentin

是的，你需要将blob作为文本发送回服务器，你无法使用blob覆盖文件上传控件的值。 - Adrian

Answer 1

最终我只是将Blob添加到表单中的隐藏字段并提交。使用以下代码从C#保存为图像：

        var regex = new Regex(@"data:(?<mime>[\w/]+);(?<encoding>\w+),(?<data>.*)", RegexOptions.Compiled);
        var match = regex.Match(input.ImageBlob);
        var mime = match.Groups["mime"].Value;
        var encoding = match.Groups["encoding"].Value;
        var data = match.Groups["data"].Value;
        byte[] imagedata = Convert.FromBase64String(data);

        Image img = byteArrayToImage(imagedata);

        img.Save("someimagename.jpg");

- user1854458

---

这段代码将从MIME类型中获取图像名称的正确扩展名（如果需要）：http://cyotek.com/blog/mime-types-and-file-extensions - user1854458

Answer 2

如果您在使用canvasResize时遇到困难，还有许多其他的图像处理库可供选择。我以前使用过Pixastic，效果非常好，尽管它的开销比canvasResize大。不过，它的文档记录得更好。

- po228