search

tbx / webmarker

Draw on any website, upload GML + screenshot to the webmarker blog (currently 000000book.com webmarker app stream), twitter it, email it. Activate "Street Mode" to stumple over drawings by other users.
webmarker.me
9 stars 1 forks source link

Capture canvas as image & upload to 000000book #3

Open jamiew opened 14 years ago

jamiew commented 14 years ago

Thought I had some code started for this. Will look around. 000book cannot currently generate thumbnails for uploaded tags (and having the page elements w/ the graffiti is crucial!)

tbx commented 14 years ago

oh this'll be sick! ALSO I'll look around for "capture webpage" code, so we can upload the entire screenshot including the drawing. Found an old one for FF, but looks obsolete. Chrome has a completly different solution.

jamiew commented 14 years ago

is chrome support on the horizon?!

tbx commented 14 years ago

at the moment the code isn't (as far as I think) using any FF specific stuff. So in theory, it will be possible to support it. I would like to have it for chrome at some point. Also look at Issue 1 for this.

tbx commented 14 years ago

Now it's getting FF specific though: Render page content into a canvas: ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)"); from: https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas Store canvas into a file demo: http://mdn.beonex.com/en/Code_snippets/Canvas AND http://stackoverflow.com/questions/934012/get-image-data-in-javascript

tbx commented 14 years ago

A little library for Canvas to IMG file -> http://www.nihilogic.dk/labs/canvas2image/ ALSO: (via stackoverflow): Firefox and Opera have a toDataURL() method that returns a data-URL formatted PNG. You can assign the result to a form field to submit it to the server.

The data URL is base-64 encoded, so you will have to decode it on the server side. You would also need to strip off the "data:image/png;" part of course.

jamiew commented 14 years ago

Yo I almost forgot that I got this working in canvasplayer a while back. Works great, just need to add upload support on the 000book side http://github.com/jamiew/canvasplayer/tree/savethumbs