<br><br><div class="gmail_quote">On Thu, May 13, 2010 at 9:56 AM, Markus Ernst <span dir="ltr"><<a href="mailto:derernst@gmx.ch">derernst@gmx.ch</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex;">
<div class="im"><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><br>
</blockquote>
<br></div>
I am a web author with limited scripting knowledge, so I apologize I can't give a qualified feedback to your proposal in detail.<br>
<br>
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.:<br>
<br>
function resize(mimeType, width, height, keepAspectRatio, qualityLevel)<br>
<br>
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:<br>
<br>
<input type="file" onSubmit="resize('image/jpeg', 300, 350, true)"><br></blockquote><div> </div><div>Thanks Markus for the feedback.</div><div><br></div><div>A few things that may not have been made clear in the proposal:</div>
<div>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.)</div><div>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).</div>
<div><br></div><div>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.</div>
<div><br></div><div>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.</div><div><br></div><div>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.</div>
<div><span class="Apple-style-span" style="font-family: sans-serif; font-size: medium; line-height: 20px; "><pre class="code" style="font-size: 14px; overflow-x: auto; overflow-y: auto; margin-top: 0px; margin-right: 0px; margin-bottom: 1em; margin-left: 0px; font-family: monospace; padding-top: 0px; padding-right: 1em; padding-bottom: 0px; padding-left: 1em; ">
<code class="es-code" style="font-size: 14px !important; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(217, 232, 255); font-family: monospace; background: inherit; background-position: initial initial; background-repeat: initial initial; "><font class="Apple-style-span" face="arial"><span class="Apple-style-span" style="line-height: normal; white-space: normal; font-size: small;"><div>
<br></div><div>var upload = function (newBlob) {</div><div> // Show a preview of the image.</div><div> document.getElementById("uploadPreview").src = newBlob.url;</div><div><br></div><div> // Upload it to our server.</div>
<div> var formData = new FormData();</div><div> formData.append(newBlob);</div><div> var xhr = new XMLHttpRequest();</div><div> xhr.open("POST", "<a href="http://example.com/">http://example.com/</a>");</div>
<div> xhr.send(formData);</div><div>}</div><div><br></div><div>var resizeFailed = function (newBlob) {</div><div> document.getElementById("status").innerText = "Oops. Unable to...";</div><div>}</div>
<div><br></div><div>Image i = new Image();</div><div>var file = document.forms['uploadData']['fileChooser'].files[0];</div><div>i.src = file.url;</div><div>i.getBlob('image/png', 300, 350, upload, resizeFailed, .55);</div>
</span></font></code></pre></span></div><div>Thanks, dave</div><div><br></div></div>