Step 15 - images
1 min czytania
Implement the 'image' element type.
Upload: toolbar image button + paste-from-clipboard + drag-and-drop onto the canvas. Client-side validation: file.type must start with image/, max 5 MB. Upload to Storage at boards/{boardId}/{uid}-{timestamp}.{ext}; storage rules allow writes for signed-in org members only (guests cannot upload), images only, under 5 MB. Store the download URL in el.src and size the element to the natural aspect ratio scaled into the current view.
Rendering:
maintain a decoded-image cache (Map from src to HTMLImageElement) so the render loop never re-decodes; load with crossOrigin='anonymous' so future canvas exports stay untainted; schedule a render when a load completes. Draw honoring el.rotation (degrees) around the element center.
Manipulation:
- Selection frame that rotates with the image: corner resize handles + a rotate knob above the top edge.
- Map pointer coords into the image's un-rotated local frame for handle hit-testing (toImageLocal helper in the util module, with a spec).
- Corner resize preserves aspect ratio; rotation snaps to 15-degree steps while shift is held.
Acceptance: upload, paste and drop all work; a rotated image resizes correctly from its corners; a guest sees uploads live but cannot upload; images survive reload via their Storage URLs.
Dyskusja
Komentarze: 0Brak komentarzy. Rozpocznij dyskusję.