在HTML 5中上载之前调整图像大小

Question

I'm trying to resize an image in a file upload before uploading the image to the server. I found a decent plugin that returns the blob of the updated image, however I cannot find how to assign the blob back to the file object being used by the upload.

The blob looks like: 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);
            }
        });

Thanks!

Answer 1

If you remain stuck with canvasResize, there are a lot of other image manipulating libraries. I've used Pixastic to great effect before, though it has a larger overhead than canvasResize. It is better documented though.

Answer 2

I ended up just adding the blob to a hidden field in the form and submitting it. Saving that as an image from the C# was accomplished with the following:

        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");