Freehand Circles Drawing Tool

Question

What is it?

A userscript that lets you draw directly onto images on any Stack Exchange site to add freehand circles (or anything else you might like to add).

It has been designed to work like StackExchange™ SuperCollider Freehand Circle™ Editor - [Now supported on EVERY StackExchange site!] which unfortunately the owner doesn't have time to maintain anymore :(

How do I use it?

On every image on every site you will now see 2 buttons added: edit and save.

Clicking edit converts the image to a canvas for you to draw on. A toolbar is added underneath the image where you can change the brush colour or brush *width**. Once you are done, you can click save and the script will upload the new image to imgur, and edit the post for you with the new link in it!

Note: You must have an access token for this to work. Get one at Github

Install

You need to have something like Greasemonkey or Tampermonkey for this to work, as it saves your access token via GM_setValue()!
You need an access token. Get one from here
Install: view source or install

enter image description here

Notes

Images are save under imgur.com and NOT stack.imgur.com (Stack Exchange's own domain for inline images). This shouldn't be a problem because it says here that images are kept forever...
The script works thanks to Fabric.JS and jQuery
This script has only been tested on Google Chrome and Firefox - I haven't tested on other browsers!
Here is a sandbox where you can test the script

Change log

v1.0.6: Fixed the script - it was broken with new images that are now linked to a bigger version automatically.

For what? Demonstrating the script? It might also be worth noting that this will not work GIFs - it can't edit a gifs frame! — ᔕᖺᘎᕊ
– ᔕᖺᘎᕊ, Commented Jun 20, 2015 at 18:44
@nicael I've already upvoted before :) But what have you done to that gif!? — ᔕᖺᘎᕊ
– ᔕᖺᘎᕊ, Commented Jun 20, 2015 at 20:13

DavidPostill · Accepted Answer · 2015-07-16 20:41:16Z

4

status-completed:

Unfortunately for me the buttons appear in the wrong place (at the far right of the screen next to the scrollbar:

enter image description here

Please let me know if you need any more info to help debug this.

OS Windows 7 64 bit.

Firefox 38.0.5

status-completed:

As per comment buttons abscure the image:

enter image description here

status-completed (there was an error with the access token)

When saving (which doesn't work) I get:

enter image description here

Without freehand:

enter image description here

With freehand enabled:

enter image description here

edited Jul 16, 2015 at 20:41

answered Jun 21, 2015 at 17:39

DavidPostill

1718 bronze badges

11 Comments

ᔕᖺᘎᕊ Over a year ago

Those are a lot of userscripts! One last thing before I start checking the code: can you disabling them? The main ones are SOUP, Comment Separator Fix and Threading comments? Those might be conflicting (or it might just be my bad CSS :)

DavidPostill Over a year ago

All 3 disabled, no change. I assume I don't need to restart browser but just reload page (which I did)?

ᔕᖺᘎᕊ Over a year ago

Never mind! I've reproed it in Firefox. I'll see what I can do! When it's fixed, I'll give you a ping :) But till then, you can use the functionality of the script! Just not the design... :( I think it's the right:10px; causing it - but as I said on Meta - I can't update anything today! I will do ASAP though :)

DavidPostill Over a year ago

After a closer look I see a small problem. The edit andsavebuttons are on top of (so obscuring the image) :( Question updated with new screenshot. In addition the save button is often not working ... eventual error along the line of image upoad not working or something.

ᔕᖺᘎᕊ Over a year ago

Hmmm.. I didn't think of that! I'll relocate the buttons ASAP. BTW when it fails, could you please check in the console whether there was an error - that way I can tell you what exactly is the problem! Thanks :)

|

ᔕᖺᘎᕊ · Accepted Answer · 2015-06-27 16:06:40Z

2

status-completed!

This looks really neat! I'm glad to see that someone has brought my original idea back to life and your code looks a lot cleaner and simpler than mine :)

I tried running the script with Greasemonkey in Firefox 38.0 on Ubuntu 15.04 but wasn't able to get it to run out-of-the-box. I was able to make an adjustment to get it running, however.

jQuery (and consequently $) are not available to the script, so it runs into errors as soon as it hits the first line. Although in older versions of Greasemonkey, you could simply do:

var $ = unsafeWindow.jQuery;

...this no longer works and it is far easier to simply include jQuery itself in the script:

// @require http://code.jquery.com/jquery-2.1.4.min.js

(That line should be added right after the @match directives.)

edited Jun 27, 2015 at 16:06

ᔕᖺᘎᕊ

4,3752 gold badges16 silver badges35 bronze badges

answered Jun 20, 2015 at 21:32

Nathan Osman

23.3k11 gold badges61 silver badges107 bronze badges

5 Comments

ᔕᖺᘎᕊ Over a year ago

Whenever I require jQuery, everything breaks in Chrome! Which is why I generally leave it out and let Tampermonkey use SE's jQuery. However, I just installed Firefox, so I will try it out... bear with me :)