[whatwg] Image resize API proposal

[Markus Ernst]

Am 11.05.2010 20:58 schrieb Sterling Swigart:
> I'm working with David Levin, and based on the feedback received 
> regarding offscreen canvas, the proposal has been changed to address 
> more specific scenarios. The main use case was resizing images, so we 
> are proposing an asynchronous image resizing API. If you are curious 
> about how we arrived at our API below, take a look at the "appendix" to 
> view the alternatives we considered.
> 
> Let us know what you think. Thanks!
> Sterling
> 
> 
>   Use Cases:
> 
> Begin with a user giving a local image file to a webpage. Then:
> 
> 1. In real-time chat, quickly give other users a thumbnail view of the 
> image file.
> 
> 2. Or, limit the size of an image file before uploading it to a web server.
> 
> Proposed Solution:
> 
> We propose adding image.getBlob. getBlob will be an instance function of 
> the javascript Image object which asynchronously gets a blob of the 
> image, resized to the given width and height, encoded into jpeg or png. 
> The function declaration will be:
> 
> getBlob(mimeType /* req */, width /* req */, height /* req */, 
> successEvent /* req */, errorEvent /* op */, qualityLevel /* op */, 
> preserveAspectRatio /* op */, rotateExif /* op */);

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

I do not understand what use cases could be other than modifying images 
for form upload, but if there are any, the same method could be applied 
to the image object (given that the method waits for the image data to 
be completely loaded):

var i = document.getElementById("myImg");
i.resize('image/png', 300, 350, true, .95);

This would have mainly the same effect as changing i.style.width and 
i.style.height, except you can specify the quality level. (Maybe the 
argument order should be changed the way that the mime type can be 
optional, as in this case most authors would not really care about the 
mime type - except that it might be nice to convert a gif with 
transparency into a png to get the transparency edges antialiased.)

If you need the blob data for further processing, a separate getBlob() 
function would be needed.

var i = new Image();
i.src = "my/img/url.jpg";
i.resize('image/jpeg', 300, 350, true, .55);
var blobData = i.getBlob();