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 #88. This shows how the tool should work.

How

• Research and prototype existing tools or code to meet the DML use case in #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 #88 signed off, but this shouldn't block exploring/experimenting. @rocioleon is UX owner
• We are switching to Cloudinary for image management in #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.