-
Notifications
You must be signed in to change notification settings - Fork 192
Z Intern Image Editor Research
placeholder for UX research for webcompat.com image editor feature (items in reverse chronological order)
-
https://stackoverflow.com/questions/6042202/how-to-distinguish-mouse-click-and-drag
- detecting mouse click and drag
- https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
- http://html5doctor.com/an-introduction-to-the-canvas-2d-api/
- https://ihatetomatoes.net/guide-to-html5-canvas-javascript-libraries/
- http://www.html5canvastutorials.com/
- https://joshondesign.com/p/books/canvasdeepdive/chapter01.html#simple_drawing
- will change based on requirements and tech limits questions (TBD) but attempts high level capture of features and user flow https://docs.google.com/document/d/11KZICiXwfU8znYtkDzK3y7MFYyEznWKKQXzknLwrb1k/edit?usp=sharing
target applications to review: Preview (mac os), Photoshop, Inkscape, Gimp, Paint (win)
- if most bug reports are coming from Win, maybe Paint should get extra focus
1 Preview and Kami (pdf editor) screens and notes: https://docs.google.com/document/d/1bQwmFTjLTbaclN3NLRI_yNreZ3aG8RVK9-pTfP6WrMo/edit?usp=sharing
2 Inkscape screens and notes: https://docs.google.com/document/d/13Yz2Q_04qR7b2BxY8YtETCbJ5vyAC9GUky6s141qXFc/edit?usp=sharing
3 Photoshop screens and notes: https://docs.google.com/document/d/1hdimEW96zS1mQTnRgj3ov_ZGvoxvKnS-KcnGYigIFH8/edit?usp=sharing
thinking: look at extensions for ff, ie, chrome: if all 3 support image editor extensions then maybe the image editor is not really necessary
072417: only looked at FF add-ons for image editors b/c skimmed the first 25 prod bugs for webcompat and in that group the main browser was FF on Win10 (2nd, was FF on Android)
1 https://addons.mozilla.org/en-US/firefox/addon/screenshot-capture-annotate/
- awesome screenshot addon
- free; you can take a screencapture
- you can draw a colored rect (yellow no fill)
- they have highlight and blur but no fill
-
take screenshot
-
annotate (highlight, blur, arrow, text)
-
missing fill capability
-
blur is not super blurry
- probably the easiest editing process
2 xpaint image editor painter
- super clunky but does highlight and redact (filled rect)
- you have to get screenshot, upload it to their server, make edits, then download to your local folder and upload it to webcompat.com
3 gimp online image editor
- this actually does the highlight and redact
- but it's a fairly complex set of steps (much like photoshop); you draw and then have to choose menu options to either set stroke or fill color
- also it has the long process (file upload/edit/download/upload) as in xpaint where you need to grab screenshot, upload to their server, edit the file/save, download to local machine and upload then to webcompat.com
4 lunapic
- also feels clunky
- need to capture screenshot
- upload
- edit
- save
- download
- upload webcompat
- also just regular features of drawing and filling colors feels very clunky
5 https://addons.mozilla.org/en-US/firefox/tag/photo%20editor
- polarr plugin
- giving error in cur ff (but this seems the most popular photo editor for addons)
(low priority) do mobile browsers support image editor extensions