Resize image before loading in HTML 5

Question

I am trying to resize an image when uploading a file 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 that the download is using.

Drops look like this: 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're stuck in canvasResize, there are many other image management libraries. I used to use Pixastic, but had more overhead than canvasResize. Still better documented .

Answer 2

In the end, I just added blob to the hidden field in the form and submitted it. Saving this as an image from C # was done 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");