23

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

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

enter image description here

Notes

  1. 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...
  2. The script works thanks to Fabric.JS and jQuery
  3. This script has only been tested on Google Chrome and Firefox - I haven't tested on other browsers!
  4. 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.

5
  • Also, a gif won't hurt :)
    – nicael
    Jun 20, 2015 at 18:40
  • 1
    For what? Demonstrating the script? It might also be worth noting that this will not work GIFs - it can't edit a gifs frame! Jun 20, 2015 at 18:44
  • hey, look at what I did stackapps.com/questions/6216/… :D
    – nicael
    Jun 20, 2015 at 19:01
  • @nicael I've already upvoted before :) But what have you done to that gif!? Jun 20, 2015 at 20:13
  • 2
    Double-gifed :D
    – nicael
    Jun 20, 2015 at 20:13

4 Answers 4

4

:

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


:

As per comment buttons abscure the image:

enter image description here


(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


11
  • 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 :) Jun 21, 2015 at 17:47
  • All 3 disabled, no change. I assume I don't need to restart browser but just reload page (which I did)? Jun 21, 2015 at 17:51
  • 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 :) Jun 21, 2015 at 17:53
  • 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. Jun 26, 2015 at 22:23
  • 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 :) Jun 27, 2015 at 9:28
  • 2 warnings in the console after I click save (and nothing gets saved). See screenshot. Jun 27, 2015 at 9:42
  • OK - I receive that as well, and I don't think I can do anything about that. However, is there a Network tab in Firefox's dev tools? If so, can you go on that, then click save, and look at anything red or that's errorred out? Thanks! Jun 27, 2015 at 9:46
  • Let us continue this discussion in chat. Jun 27, 2015 at 9:48
  • Sorry! I forgot to update you - I looked into SOUP's changes and couldn't find anything that would cause the image to change size... However I just though of another place I might be able to check to see how to fix it - I'll get back to you by tomorrow Jul 16, 2015 at 17:58
  • BTW Would it be possible for you to raise an issue at Github? It's much easier to manage over there! :) Jul 16, 2015 at 17:59
  • Nope sorry - I still can't see which fix causes the bug! Jul 18, 2015 at 9:07
2

!


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.)

5
  • 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 :) Jun 20, 2015 at 21:33
  • How exactly does Chrome break? Jun 20, 2015 at 21:34
  • OK - it works in Firefox and Chrome if I require Fabric.JS and require jQuery... I swear that wasn't working this morning! Jun 20, 2015 at 21:45
  • I've updated the script - please can you update and check if it works now? Thanks :) Jun 20, 2015 at 21:48
  • You can update now to get multiple brush colours and a slider to change the brush thickness :) Jun 28, 2015 at 10:31
2

- fixed in v1.0.7


Now, you can't seem to be able to change it properly if you use the new [![][1]][1] format.

Try it here:

However, if you use the old format, it still works:

3
  • Blech it edited both images because they use the same source? Nov 7, 2015 at 14:02
  • Hmm, I thought this was fixed in v1.0.6 (see the change log), but I'll check to see if it hasn't :/ Bit busy today, so might be tomorrow! :) Nov 7, 2015 at 14:32
  • Fixed in v1.0.7 (was broken for Firefox only) Nov 8, 2015 at 15:10
1

The buttons cover images in tags:
enter image description here
You just can't see the tag or the image.

Here's the tag.

2
  • images in tags!? Didn't know that existed! I'll try to look at it and push an update out in the next few days :) Jul 15, 2015 at 14:10
  • I've updated the script at github Jul 16, 2015 at 11:09

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .