[whatwg] Image resize API proposal

[David Levin]

On Thu, May 13, 2010 at 9:56 AM, Markus Ernst <derernst at gmx.ch> wrote:

>
>>
> I am a web author with limited scripting knowledge, so I apologize I can't
> give a qualified feedback to your proposal in detail.
>
> Generally I consider client side image resizing a very good idea; currently
> I use a Java applet for this purpose, and of course it would be nice to have
> this functionality natively in browsers. Anyway, for submitting the image in
> a form (which both your use cases are about), I would not primarily expect a
> function that returns a blob, but rather one that modifies the image data.
> E.g.:
>
> function resize(mimeType, width, height, keepAspectRatio, qualityLevel)
>
> For the image upload use case, calling the function via event-handler in
> the file input control affects the image data in the form data:
>
> <input type="file" onSubmit="resize('image/jpeg', 300, 350, true)">
>

Thanks Markus for the feedback.

A few things that may not have been made clear in the proposal:
1. It important that the method be asynchronous to avoid the web page
hanging while waiting for a result. (If you wanted a sync resize, you could
use canvas for example.)
2. The use cases didn't touch on the desire to display the image being
uploaded (especially useful for use case #2, limiting the size of an
uploaded image).

As I read this line <input type="file" onSubmit="resize('image/jpeg', 300,
350, true)">, you've suggesting adding a resize method on the file object
that modifies the file in memory. I'm not sure how that would work because
Files are immutable in memory. In addition, we'd need to add a resize method
to image which modifies it in memory and a getBlob() method.

I like the fact that your proposal results in much simpler code overall, but
it seems like there may be a number of problems with this approach.

fwiw, here's a more complete sample (using the img.getBlob method) which
gives a preview of the upload, does the upload to the server, or shows an
error if appropriate.


var upload = function (newBlob) {
  // Show a preview of the image.
  document.getElementById("uploadPreview").src = newBlob.url;

  // Upload it to our server.
  var formData = new FormData();
  formData.append(newBlob);
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "http://example.com/");
  xhr.send(formData);
}

var resizeFailed = function (newBlob) {
  document.getElementById("status").innerText = "Oops. Unable to...";
}

Image i = new Image();
var file = document.forms['uploadData']['fileChooser'].files[0];
i.src = file.url;
i.getBlob('image/png', 300, 350, upload, resizeFailed, .55);

Thanks, dave
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/whatwg-whatwg.org/attachments/20100513/dae9f404/attachment.htm>