Research/prototype Rotate & Crop tools for uploaded drawings

[CathMollie]

Blocked by #163

What

• Users uploading drawings via the Upload page may need to rotate the image through 90 deg, or crop out detail at the edge, or crop/enlarge detail for better quality.
• Some UX work has been done in Image Editing: Ability to rotate images #88. This shows how the tool should work.

How

• Research and prototype existing tools or code to meet the DML use case in Image Editing: Ability to rotate images #88
• Some discussion of options and available resources on Stack Overflow.
  http://stackoverflow.com/questions/16794310/rotate-image-with-javascript
• If need to prioritise due to complexity, build/integrate Rotate tool before Crop

Considerations

• Build after Image Editing: Ability to rotate images #88 signed off, but this shouldn't block exploring/experimenting. @rocioleon is UX owner
• We are switching to Cloudinary for image management in Switch to Cloudinary for a fully-featured image service / CDN #163, wait till this is done as Cloudinary have image editing tools built in with loads of helpful guides

To Do

• Create prototype(s) and share with team.

[rocioleon]

Regarding #88 and #89 @EChesters both issues are now merged
Here are the updates
Download Google Material Icons or attached files

https://material.io/icons
ic_crop_black_24dp.zip
ic_crop_rotate_black_24dp.zip
ic_crop_white_24dp.zip
ic_file_upload_black_24dp.zip
ic_flip_black_24dp.zip
ic_mode_edit_black_24dp.zip
ic_person_pin_black_24dp.zip
ic_picture_in_picture_black_24dp.zip
ic_rotate_left_black_24dp.zip
ic_rotate_left_white_24dp.zip
ic_rotate_right_black_24dp.zip
ic_rotate_right_white_24dp.zip

[rocioleon]

Desktop

[rocioleon]

Mobile

[CathMollie]

Look really good @rocioleon and great basis to work from.
Next step is for Dev to pick up and look at actual tools for rotate and crop and play back suggestions to team. Cloudinary (new image & upload service) is a good starting point.