Apr 042012



Google Image Search By Drawing


unofficial Image Search by Drawing


Your browser doesn’t support HTML5 canvas! Please download Google Chrome.



How To

Draw and Search

  • Choose a color.
  • Draw something.
  • Adjust pencil size with the range slider.
  • Choose another color.
  • Draw some more.
  • Click on the “Search by Drawing” button.

Drag’n Drop, Draw and Search

  • Drag and drop an image from your computer into the drawing area.
  • Wait a second.
  • Draw something on the picture.
  • Click on the “Search by Drawing” button.
  • This works only in Chrome and Firefox, not Safari.

Take a picture

  • You need to have Flash installed.
  • You need to have a webcam.
  • If you don’t have a webcam or Flash installed, this won’t work and you won’t see anything.
  • Below you should see a Flash window.
  • Click on “Allow”.
  • Now you should see yourself.
  • Click on the “Take a photo” button.
  • Wait a few seconds.



Webcam Troubleshooting

  • Sadly we have to use Flash to access the webcam.
  • Sadly Flash is a very buggy software.
  • So there is no guarantee for success.
  • Right click (on the Flash area) -> Settings
  • Click on the ugly webcam icon on the right hand side.
  • Select another webcam in the drop-down menu.
  • Click on close.
  • Wait a few seconds.
  • If nothing shows up, try it again with another camera in the drop down menu.
  • And then again.
  • And again.
  • Hope it works now.

Add a color

  • Enter a color hex value #
  • Click on
  • Scroll up to the color gird.

Change the brush size

  • Use the scroller below the drawing area.
  • (Or the drop down on FireFox)
  • Alternativly you can set the brush size here
  • Click on
  • Scroll up to the drawing area.


    • Does this work on iPads, iPhone, tablets, Androids, …?
    • It should, sadly it doesn’t. Google offers a tablet/mobile experience for some mobile/tablet devices. This experience sadly redirects users from the “Google Search by Image” search page to the Google homepage. The bug is already reported to Google. You can star it to make it more prominent.
    • Does this work with Internet Explorer 6/7/8/9/10/…?
    • No, yes, I don’t know. I don’t care. Get a real browser!
    • Is this an official Google product?
    • No, this is totally unofficial .
    • Is this site affiliated with Google?
    • No.
    • Are you a Googler?
    • No.
    • How does this work?
    • You mean technically? Quite simple actually.
      • You draw something on an HTML5 canvas.
      • Click on Search
      • Image gets converted into a base64 encoded data uri
      • Image data gets send to server (powered by Heroku)
      • Image gets uploaded to Amazon S3
      • The Amazon S3 Image URL gets communicated back to your browser.
      • Browser gets redirected to Google Search by Image.
    • What technology did you use?
      • emacs
      • HTML5 canvas
      • HTML5 drag/drop API
      • CoffeeScript
      • jQuery
      • socket.io
      • node.js
      • Heroku Cedar Stack
      • Amazon S3
      • Flash
    • Does this work over all browsers?
    • No, i tested it on Chrome, Safari, Firefox on Mac.
    • Can i fork it?
    • Sure. (Docs to come.)
    • Thx
    • You are welcome.



 Posted by at 9:14 pm

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>