How To Save Artwork from Weavesilk.com

January 25, 2011 at 09:44

I just discovered weavesilk.com, which I think is pretty cool. However, it looks like they don’t give you a way to save your generated artwork. If you’re running Google Chrome (or, as I am, Chromium), there’s a trick you can use to save what you’ve created. This can probably be done with Firefox using Firebug, and maybe in some other ways, but here’s how I do it with Chromium.

  1. Create your artwork by dragging around.

  2. Right-click somewhere on the page and select “Inspect Element.”

  3. In the new browser pane that comes up, click to the “Console” tab and enter the following:

``canvas = document.getElementById('render')
img = document.createElement('img')
img.src = canvas.toDataURL()``

  1. The browser will probably freeze for a few seconds (or more than a few), and your CPU usage will shoot up. Be patient.

  2. Click to the “Resources” tab in the developer pane, and look in the list for something that starts with “data:image/png”. Click it, and you should see your artwork to the right, on a transparent checkerboard background.

  3. Right-click the image and select “Save Image As.”

The image will save with a transparent background, but you can open it up in an image editor and add a solid background color if you like.