Re: [whatwg] Bicubic filtering on context.drawImage
--- Original Message --- From: Tab Atkins Jr. jackalm...@gmail.com Sent: December 9, 2013 2:22 AM To: Tingan Ho tin...@p1.cn Cc: WHATWG whatwg@lists.whatwg.org Subject: Re: [whatwg] Bicubic filtering on context.drawImage On Mon, Dec 9, 2013 at 5:29 PM, Tingan Ho tin...@p1.cn wrote: Hi Whatwg, I'm a web developer in need of bicubic filtering on context.drawImage. I use to crop and scale images on the web using canvas. And I noticed that quality when you scale down very much is very bad on canvas. I scale down images using context.drawImage. There is no way for me to opt in for which filter method to use. I thought it was a bug first, because I thought context.webkitImageSmoothingEnabled did the job. But it didn't. So I filed a bug for chrome. But they suggested me to email you guys. https://code.google.com/p/chromium/issues/detail?id=326640 Hm, I wonder if image-interpolation on the canvas should affect this? It's defined to only have an effect when you scale the canvas element itself, but I think it probably makes sense that whatever scaling intent you specify for the element should probably apply to images you draw into it with a scale. ~TJ
Re: [whatwg] Bicubic filtering on context.drawImage
On Mon, Dec 9, 2013 at 1:21 AM, Tab Atkins Jr. jackalm...@gmail.com wrote: Hm, I wonder if image-interpolation on the canvas should affect this? It's defined to only have an effect when you scale the canvas element itself, but I think it probably makes sense that whatever scaling intent you specify for the element should probably apply to images you draw into it with a scale. What is image-interpolation? It looks like a CSS property, but Google doesn't distinguish between image-interpolation and image interpolation, so it's impossible to search for. If it is, having CSS state affect drawing of 2d canvas seems wrong. Aside from the bad layering, it would lead to different rendering if you draw to a Canvas before stylesheets finish loading (equivalent to not waiting for images, but much easier to get wrong without noticing), and if you offscreen render a Canvas before actually putting it in a document. -- Glenn Maynard
Re: [whatwg] Bicubic filtering on context.drawImage
On Mon, Dec 9, 2013 at 4:06 PM, Glenn Maynard gl...@zewt.org wrote: On Mon, Dec 9, 2013 at 1:21 AM, Tab Atkins Jr. jackalm...@gmail.com wrote: Hm, I wonder if image-interpolation on the canvas should affect this? It's defined to only have an effect when you scale the canvas element itself, but I think it probably makes sense that whatever scaling intent you specify for the element should probably apply to images you draw into it with a scale. [...] If it is, having CSS state affect drawing of 2d canvas seems wrong. Aside from the bad layering, it would lead to different rendering if you draw to a Canvas before stylesheets finish loading (equivalent to not waiting for images, but much easier to get wrong without noticing), and if you offscreen render a Canvas before actually putting it in a document. Well, doesn't this already happen with remote web fonts and fillText/strokeText? -- Glenn Maynard -- kangax
Re: [whatwg] Bicubic filtering on context.drawImage
On Mon, Dec 9, 2013 at 9:42 AM, Juriy Zaytsev kan...@gmail.com wrote: Well, doesn't this already happen with remote web fonts and fillText/strokeText? I'm not familiar with that, but at least if a font size is incorrect it's a lot more noticable than if a resampling filter is sometimes in bilinear when you wanted bicubic. -- Glenn Maynard
Re: [whatwg] Bicubic filtering on context.drawImage
On Mon, Dec 9, 2013 at 7:06 AM, Glenn Maynard gl...@zewt.org wrote: On Mon, Dec 9, 2013 at 1:21 AM, Tab Atkins Jr. jackalm...@gmail.com wrote: Hm, I wonder if image-interpolation on the canvas should affect this? It's defined to only have an effect when you scale the canvas element itself, but I think it probably makes sense that whatever scaling intent you specify for the element should probably apply to images you draw into it with a scale. What is image-interpolation? It looks like a CSS property, but Google doesn't distinguish between image-interpolation and image interpolation, so it's impossible to search for. If it is, having CSS state affect drawing of 2d canvas seems wrong. Aside from the bad layering, it would lead to different rendering if you draw to a Canvas before stylesheets finish loading (equivalent to not waiting for images, but much easier to get wrong without noticing), and if you offscreen render a Canvas before actually putting it in a document. Yes, CSS properties should not affect 'drawImage'. The spec currently doesn't enforce what resampling algorithm to use; it just allows you to turn it off. Tingan, would it be acceptable for you to do the resampling in JavaScript?
Re: [whatwg] Bicubic filtering on context.drawImage
Tingan, would it be acceptable for you to do the resampling in JavaScript? First, writing it in Javascript is less performant. Since natively you can have access to the GPU. Second, it is abstract a layer for JS developers, since they don't need to care about bicubic resampling algoritmen. Third, it kind of make sense if you set imageSmothingEnabled to true in the context object, that all down-scaling should use bicubic resampling(I haven't tried yet, but I think the scale use bicubic sampling). I think it is is a miss in the specification that the method drawImage doesn't use bicubic resampling. It is a method of the context objext on des down-scaling. On Mon, Dec 9, 2013 at 7:22 PM, Rik Cabanier caban...@gmail.com wrote: On Mon, Dec 9, 2013 at 7:06 AM, Glenn Maynard gl...@zewt.org wrote: On Mon, Dec 9, 2013 at 1:21 AM, Tab Atkins Jr. jackalm...@gmail.com wrote: Hm, I wonder if image-interpolation on the canvas should affect this? It's defined to only have an effect when you scale the canvas element itself, but I think it probably makes sense that whatever scaling intent you specify for the element should probably apply to images you draw into it with a scale. What is image-interpolation? It looks like a CSS property, but Google doesn't distinguish between image-interpolation and image interpolation, so it's impossible to search for. If it is, having CSS state affect drawing of 2d canvas seems wrong. Aside from the bad layering, it would lead to different rendering if you draw to a Canvas before stylesheets finish loading (equivalent to not waiting for images, but much easier to get wrong without noticing), and if you offscreen render a Canvas before actually putting it in a document. Yes, CSS properties should not affect 'drawImage'. The spec currently doesn't enforce what resampling algorithm to use; it just allows you to turn it off. Tingan, would it be acceptable for you to do the resampling in JavaScript? -- Sincerely, Tingan Ho tin...@p1.cn
Re: [whatwg] Bicubic filtering on context.drawImage
On Dec 9, 2013, at 2:29 PM, Tingan Ho tin...@p1.cn wrote: Tingan, would it be acceptable for you to do the resampling in JavaScript? First, writing it in Javascript is less performant. Since natively you can have access to the GPU. Second, it is abstract a layer for JS developers, since they don't need to care about bicubic resampling algoritmen. Third, it kind of make sense if you set imageSmothingEnabled to true in the context object, that all down-scaling should use bicubic resampling(I haven't tried yet, but I think the scale use bicubic sampling). I think it is is a miss in the specification that the method drawImage doesn't use bicubic resampling. It is a method of the context objext on des down-scaling. GPUs don’t do bicubic resampling natively. You may also find that javascript can give enough performance to be usable: http://people.mozilla.org/~jmuizelaar/image-scaling/scale.html -Jeff
Re: [whatwg] Bicubic filtering on context.drawImage
On Dec 9, 2013, at 2:29 PM, Tingan Ho tin...@p1.cn wrote: Tingan, would it be acceptable for you to do the resampling in JavaScript? First, writing it in Javascript is less performant. Since natively you can have access to the GPU. Second, it is abstract a layer for JS developers, since they don't need to care about bicubic resampling algoritmen. Third, it kind of make sense if you set imageSmothingEnabled to true in the context object, that all down-scaling should use bicubic resampling(I haven't tried yet, but I think the scale use bicubic sampling). I’m not sure why you have a bias towards bicubic filtering as there are many different scaling filters that can be used. Lanczos is better than bicubic in many (most?) cases. Spline scaling can also do a good job, as can fractal interpolation. There are even specific scaling systems like Sal which are designed for upscaling sprites, and do a better job at the specific task than anything else (IIRC this is frequently used by the various old console emulators) —Oliver
Re: [whatwg] Bicubic filtering on context.drawImage
I’m not sure why you have a bias towards bicubic filtering as there are many different scaling filters that can be used. Lanczos is better than bicubic in many (most?) cases. Spline scaling can also do a good job, as can fractal interpolation. That would be even better. At least if I can opt-in for the one I want. But I think most developers also don't want to dive into this algorithms, so it would be good to have default values that perform well. right now I don't know exactly what all browser vendors are using, maybe bilinear? But it result in very poor image quality. I think it also breaks consistency that drawImage doesn't behave the same way as you would scale up and down an ordinary HTML Image object. On Mon, Dec 9, 2013 at 10:15 PM, Oliver Hunt oli...@apple.com wrote: On Dec 9, 2013, at 2:29 PM, Tingan Ho tin...@p1.cn wrote: Tingan, would it be acceptable for you to do the resampling in JavaScript? First, writing it in Javascript is less performant. Since natively you can have access to the GPU. Second, it is abstract a layer for JS developers, since they don't need to care about bicubic resampling algoritmen. Third, it kind of make sense if you set imageSmothingEnabled to true in the context object, that all down-scaling should use bicubic resampling(I haven't tried yet, but I think the scale use bicubic sampling). I’m not sure why you have a bias towards bicubic filtering as there are many different scaling filters that can be used. Lanczos is better than bicubic in many (most?) cases. Spline scaling can also do a good job, as can fractal interpolation. There are even specific scaling systems like Sal which are designed for upscaling sprites, and do a better job at the specific task than anything else (IIRC this is frequently used by the various old console emulators) —Oliver -- Sincerely, Tingan Ho tin...@p1.cn
