Re: Image.toBlob()
On Sat, 28 Jan 2012 09:27:08 +0100, Bronislav Klučka bronislav.klu...@bauglir.com wrote: would it be possible to have Image.toBlob() function? We are introducing Canvas.toBlob(), image (and maybe video, audio) would be nice addition Are the additional resource required to drawing the image on canvas first a bottleneck? -- Anne van Kesteren http://annevankesteren.nl/
Re: Image.toBlob()
On Thu, Feb 2, 2012 at 4:24 PM, Anne van Kesteren ann...@opera.com wrote: On Sat, 28 Jan 2012 09:27:08 +0100, Bronislav Klučka bronislav.klu...@bauglir.com wrote: would it be possible to have Image.toBlob() function? We are introducing Canvas.toBlob(), image (and maybe video, audio) would be nice addition Are the additional resource required to drawing the image on canvas first a bottleneck? As long as the canvas isn't inserted into a document (eg. it doesn't have to be composited), I'd think browsers could optimize this case transparently, without adding additional API (eg. avoid the backbuffer allocation and surface copy). -- Glenn Maynard
Re: Image.toBlob()
On Feb 2, 2012, at 2:24 PM, Anne van Kesteren ann...@opera.com wrote: On Sat, 28 Jan 2012 09:27:08 +0100, Bronislav Klučka bronislav.klu...@bauglir.com wrote: would it be possible to have Image.toBlob() function? We are introducing Canvas.toBlob(), image (and maybe video, audio) would be nice addition Are the additional resource required to drawing the image on canvas first a bottleneck? They are a pain, and lossy. You don't want to do drawImage then a toBlob png on an image that's a jpeg. We've had to use followup XHR calls which may or may not do another http fetch. We went the route of doing an XHR call first, but then we couldn't display nice progressive loading. Canvas also inflates the size of PNG files, typically. Audio and video are a different thing; they will be using chunked streams. -Charles
Re: Image.toBlob()
On 2.2.2012 23:24, Anne van Kesteren wrote: On Sat, 28 Jan 2012 09:27:08 +0100, Bronislav Klučka bronislav.klu...@bauglir.com wrote: would it be possible to have Image.toBlob() function? We are introducing Canvas.toBlob(), image (and maybe video, audio) would be nice addition Are the additional resource required to drawing the image on canvas first a bottleneck? There may be additional changes to images being applied in document (CSS: width, height, CSS filters) and I would prefer drawImage to have the displayed image as its source, but then I have no way to get to the underlying/original data of that resource (before any transformation). Basically anything, that can be understood as an resource should have toBlob() (Canvas, Image, Video, Audio, Document). But as Charles mentioned before me, maybe stream would be even better. Assuming we would redefine Blob as a descendant of stream - file stream (seekable stream in oppose to nonseekable stream e.g. network stream). We have started with a lot of helpers to avoid working with chunks of bytes, when working with resources (XHR Blob send; draw image on canvas, play audio), then there are APIs like AudioApi allowing to work with underlying data, but still media specific. And it would be nice to have one basic way to reduce any resource to sequence of bytes. Brona
Re: Image.toBlob()
(You're blue today.) On Thu, Feb 2, 2012 at 4:34 PM, Charles Pritchard ch...@jumis.com wrote: They are a pain, and lossy. You don't want to do drawImage then a toBlob png on an image that's a jpeg. We've had to use followup XHR calls which may or may not do another http fetch. We went the route of doing an XHR call first, but then we couldn't display nice progressive loading. Canvas also inflates the size of PNG files, typically. Not if the browser optimizes for this and avoids the copy entirely (eg. as long as you do a 1:1 copy, don't draw anything else on top of it, etc). That seems like a useful optimization anyway. I'm not sure if alpha complicates this. If you save a transparent PNG back to a PNG, you want the original RGBA, not premultiplied and un-premultiplied results. I don't know if the spec allows bypassing those lossy steps in this case. I don't think 2d canvas specifies the color depth of the backbuffer. If you think of the backbuffer as having a high color depth, you'd get the same result. That doesn't work for alpha values of zero, though, where the result would be undefined (and is defined as black) rather than the original color. It's worth trying to make this work before adding new API. -- Glenn Maynard
Re: Image.toBlob()
On 2/2/12 8:14 PM, Glenn Maynard wrote: (You're blue today.) I can't stop myself from responding on my mobile phone. Bad habit :-). On Thu, Feb 2, 2012 at 4:34 PM, Charles Pritchard ch...@jumis.com mailto:ch...@jumis.com wrote: They are a pain, and lossy. You don't want to do drawImage then a toBlob png on an image that's a jpeg. We've had to use followup XHR calls which may or may not do another http fetch. We went the route of doing an XHR call first, but then we couldn't display nice progressive loading. Canvas also inflates the size of PNG files, typically. Not if the browser optimizes for this and avoids the copy entirely (eg. as long as you do a 1:1 copy, don't draw anything else on top of it, etc). That seems like a useful optimization anyway. It's a pretty extreme optimization. I get what you're saying. You could, in theory, make one optimization onDrawImage if(cleanCanvas x == 0 y == 0 width = canvas.width height == canvas.height) referenceImageBuffer; There's nothing like it in current implementations. I'd think it rare to come across an instance where an author has only made a clone image, and done nothing else. They'd just use the img element in such a case. I'm not sure if alpha complicates this. If you save a transparent PNG back to a PNG, you want the original RGBA, not premultiplied and un-premultiplied results. I don't know if the spec allows bypassing those lossy steps in this case. I don't think 2d canvas specifies the color depth of the backbuffer. If you think of the backbuffer as having a high color depth, you'd get the same result. That doesn't work for alpha values of zero, though, where the result would be undefined (and is defined as black) rather than the original color. It's worth trying to make this work before adding new API. We're talking about jpeg, as well as PNG, and items like WebM. Canvas is specified as RGBA. What happens when an indexed or an RGB PNG file is put in? You're taking some real liberties with the scheme I mentioned above, and there seems to be very few use cases for it. With that scheme, though, if you were really referencing an image, then your toDataURL and toBlob output, given no optional parameters were specified, and the file format were the same, well it could be a copy of the binary data. I think that's where perhaps we're at a bit of a disconnect. My concern is getting a copy of the binary data of an image, not getting a copy of the display pixels. I was hoping Image.toBlob would handle that. There's all sorts of yummy information in that binary data. And I dislike the extra XHR calls it requires to fish out. -Charles
Re: Image.toBlob()
On Thu, Feb 2, 2012 at 10:26 PM, Charles Pritchard ch...@jumis.com wrote: ** There's nothing like it in current implementations. I'd think it rare to come across an instance where an author has only made a clone image, and done nothing else. They'd just use the img element in such a case. It's not at all rare, since it's how you convert images to blobs. (Or, if it's rare, then that's an argument against adding a special method for it.) We're talking about jpeg, as well as PNG, and items like WebM. Canvas is specified as RGBA. What happens when an indexed or an RGB PNG file is put in? You're taking some real liberties with the scheme I mentioned above, and there seems to be very few use cases for it. If there aren't use cases, then there's no need for HTMLImageElement.toBlob, either. The use cases are identical. With that scheme, though, if you were really referencing an image, then your toDataURL and toBlob output, given no optional parameters were specified, and the file format were the same, well it could be a copy of the binary data. That's the whole idea. You can transparently bypass the process of blitting to a backbuffer for this case (modulo the zero alpha issue). It's just an optimization. -- Glenn Maynard
Re: Image.toBlob()
On 2/2/12 9:03 PM, Glenn Maynard wrote: With that scheme, though, if you were really referencing an image, then your toDataURL and toBlob output, given no optional parameters were specified, and the file format were the same, well it could be a copy of the binary data. That's the whole idea. You can transparently bypass the process of blitting to a backbuffer for this case (modulo the zero alpha issue). It's just an optimization. Oh, that's not a use case I need. There's no real overhead. I need the use case of Image.toBlob() returning a binary copy of the resource, metadata and all, in its original and pure form. That way I don't have to XHR after or before hand, and I can still get progressive rendering and whatever else comes along with the browser implementation of the Image object. It ought to spout off a state error if image has not loaded yet, a security error if cors isn't met, I'm going to be using img crossorigin, cause that's what I do. I actually don't need Image.toBlob() to be used for image format conversion, though that'd be up to the implementer. Canvas.toBlob() is a PNG by default. Image.toBlob() is format agnostic by default. -Charles
Re: Image.toBlob()
2012/1/28 Bronislav Klučka bronislav.klu...@bauglir.com Hello, would it be possible to have Image.toBlob() function? We are introducing Canvas.toBlob(), image (and maybe video, audio) would be nice addition Brona Proposing a more detailed spec would be a good place to start. Some example questions: 1. What does img.toBlob() do if the image failed to load? 2. Should img.toBlob() respect CORS? 3. Does img.toBlob() take a content type argument like the others? If so, what does img src=foo.jpg.toBlob(image/png) do? 4. Is img.toBlob() asynchronous like canvas.toBlob()? I think the idea of implementing img.toBlob() is fine, but we need to spec out the behavior first. - Kyle
Re: Image.toBlob()
On 28.1.2012 10:19, Kyle Huey wrote: 2012/1/28 Bronislav Klučka bronislav.klu...@bauglir.com mailto:bronislav.klu...@bauglir.com Hello, would it be possible to have Image.toBlob() function? We are introducing Canvas.toBlob(), image (and maybe video, audio) would be nice addition Brona Proposing a more detailed spec would be a good place to start. Some example questions: 1. What does img.toBlob() do if the image failed to load? 2. Should img.toBlob() respect CORS? 3. Does img.toBlob() take a content type argument like the others? If so, what does img src=foo.jpg.toBlob(image/png) do? 4. Is img.toBlob() asynchronous like canvas.toBlob()? I think the idea of implementing img.toBlob() is fine, but we need to spec out the behavior first. - Kyle Sure, sure just throwing the idea here. I think whatever can be followed according to existing should be (the same signature as Canvas.toBlob, respecting crossorigin attribute, CORS) If there is failure possible in Canvas.toBlob(), this method should follow it, if not, error should be thrown once called on error image img src=foo.jpg.toBlob(image/png) should return PNG Basically the idea is, that this should replace for creating canvas, painting image on such canvas and calling canvas.toBlob(). Brona
