Ryan, I don't have an out-of-the-box solution for you, but if I was in your shoes I'd be looking into Buster.JS and Phantom.JS to see if they could help:
http://busterjs.org/ http://www.phantomjs.org/ The rendering script found in the wiki is pretty cool, but I don't know if it works with canvas or not: http://code.google.com/p/phantomjs/wiki/QuickStart If you find or build a solution, I'd love to hear about it! Tauren On Fri, Feb 24, 2012 at 9:56 PM, Ryan Schmidt <google-2...@ryandesign.com>wrote: > On Feb 24, 2012, at 18:00, Chad Retz wrote: > > > You can save an expected result image (as something lossless like PNG) > and use canvas to pixel by pixel assert your rendering with the expected > result. It may not be quick, but it'll work. > > Yes, that is what I was thinking. However, the same canvas drawing > rendered in Firefox and Safari has slightly different output. I assume this > is because different browsers have different antialiasing implementations; > I assume for example that Firefox uses the Cairo graphics library while > Safari uses OS X's Quartz rendering. So I either need a reference image per > browser, or a fuzzy way to compare the images. And I was hoping this was a > matter that somebody's existing testing library had already taken care of, > so that I didn't have to write it myself. > > > On Feb 24, 2012, at 22:38, talltyler wrote: > > > I helped build a system for something at work like this, we use > > ImageMagick to do this part which has a compair method. This method > > can have a few different threshold values so images can be a few > > pixels off which we needed because of anti-alias/floating point > > differences we were seeing. > > > > If your images are not going to have these issues you can just get the > > base64 strings directly from the canvas api which is much faster/ > > simpler. > > > > The basic setup is every time you have a clean render export either > > the base64 or a png with the serialized data that it took to render > > that image. Then when you run your test just loop over every piece of > > serialized data, render with the current state of your app and compair > > the output with the fixtures. > > I'm familiar with ImageMagick's compare program and I've read articles > about the many ways you can customize it to do more fuzzy, less-exact > matching. It's possible I could come up with an invocation of compare that > would ignore the small antialiasing differences I'm seeing. However, > ImageMagick is a command line compiled program; how would you propose that > I invoke it from a testing script running in a web browser? I suppose I > could run a small node web server, and have the browser POST its drawn > image to the server, which would then run ImageMagick to compare. It seems > messy; it would be cleaner to keep it all running in the browser. I imagine > I can loop over all the pixels in the drawn image and see how much each one > differs from the corresponding pixel in the reference image, and develop > some tolerances for what should be considered "close enough". If there's no > existent testing library that does that, I guess that's what I'll do. > > > > -- > Job Board: http://jobs.nodejs.org/ > Posting guidelines: > https://github.com/joyent/node/wiki/Mailing-List-Posting-Guidelines > You received this message because you are subscribed to the Google > Groups "nodejs" group. > To post to this group, send email to nodejs@googlegroups.com > To unsubscribe from this group, send email to > nodejs+unsubscr...@googlegroups.com > For more options, visit this group at > http://groups.google.com/group/nodejs?hl=en?hl=en > -- Job Board: http://jobs.nodejs.org/ Posting guidelines: https://github.com/joyent/node/wiki/Mailing-List-Posting-Guidelines You received this message because you are subscribed to the Google Groups "nodejs" group. To post to this group, send email to nodejs@googlegroups.com To unsubscribe from this group, send email to nodejs+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/nodejs?hl=en?hl=en
