Photo editor for new postcard website Wednesday, 9 th November

Overview We want to turn user’s digital images into real, printed postcards that we post to anywhere in the world on their behalf. We are looking to move from our current Flash upload and edit mechanism to a new mechanism that: allow users to upload any image displays how this will appear if printed on the front of a postcard allows users to select which part of the image they wish to use via a combination of zoom, move and flip/rotate. To do this, we will treat the image as a canvas with the front of the postcard-to-be as a window onto this canvas. See the next slide.

Aim We are looking to recreate the photo editing functionality on Touchnote.com (but without add text and captions). More detail is provided in the rest of this presentation. The deadline is We will provide all assets

Image to postcard Image Postcard front

Upload Display image Edit Image editor save Flow

Ideal design

Functions and considerations Main aim of photo editor is to allow user to focus on the area of photo most appropriate for the postcard. Effects are ‘extra’ and in some cases will confuse users. Key functions Zoom so that only a part of a photo is used on the card Move so that the zoomed in on area can be selected Rotate is useful if zoom is available. Considerations Need to resize any edited images to postcard size Need to edit within a frame to indicate what edited postcard will look like

Moonpig (Flash) An excellent example

Aviary

JS alternatives See “With crop preview” to see good representation of canvas with cropping pper.php?demoType=preview&image=castle&fo rmSubmit=Load+demo Preview not working, but sounds interesting