[JS] Cirkel, Hartje, Ovaal uit een foto krijgen

[Gynnad]

Hallo,

Wij zijn bezig met een project om een eigen onderneming op te starten, waarbij we een speciale soort foto gaan verkopen. Nu is het de bedoeling dat klanten via onze website deze foto zouden kunnen bestellen. Alleen kun je uit verschillende 'templates' kiezen, bijvoorbeeld: Vierkant, Rechthoek, Cirkel, Ovaal en een Hartje.

Nu ben ik al een aantal dagen aan het zoeken, en heb op verschillende andere fora gevraagd hoe ik dit voor elkaar zou kunnen krijgen. Maar veel verder als een vierkant en rechthoek komen we niet. Zie:

Vierkant er uit snijden:
http://www.webmotionuk.co.uk/jquery/image_upload_crop.php

Rechthoek, Vierkant er uit snijden:
http://deepliquid.com/projects/Jcrop/demos.php

En dan hebben we ook nog gevonden waarbij wij zelf een cirkel uit een afbeelding zouden kunnen snijden maar niet dat de gebruiker dit zelf kan kiezen en over de afbeelding kan slepen zoals bij de bovenstaande voorbeelden:
http://stackoverflow.com/...sk-an-image-into-a-circle

De bedoeling is dus dat je net als bij de eerste twee voorbeelden zelf het punt kunt kiezen wat je wilt selecteren, deze laag ook nog kunt verslepen over de foto en dan de foto kunt opslaan. Het probleem is dus dat wij voor het selecteren van deze laag geen cirkel, hartje en ovaal kunnen vinden.

Wie *snip* heeft nog goede tips?

[Voor 1% gewijzigd door RobIII op 26-05-2011 11:22]

[Bigs]

Als het ondersteunen van alle browsers niet zo belangrijk is kun je met de canvas tag + javascript eenvoudig zoiets maken. Anders wordt het iets ingewikkelder, maar met wat creatief gebruik van img elementen en javascript moet je hier wel uit kunnen komen.

[RobIII]

Gynnad schreef op donderdag 26 mei 2011 @ 11:05:

Wie *snip* heeft nog goede tips?

Hou je even ons beleid omtrent werving dawel Kan iemand even...? even in de gaten? In de Devschuur hebben we het over zélf ontwikkelen; we zitten hier niet om jouw (of andermans) klusjes op te lossen, we wijzen je alleen in de juiste richting en voorzien je van advies

Ik heb tevens de mede-auteur verwijderd van je topic; medeauteurs zijn niet bedoeld om iemand "in het topic te betrekken" (daarvoor kan hij/zij een (nuttige!) post doen in het betreffende topic). Mede-auteurs zijn bedoeld voor het (samen) onderhouden van grote/complexe/vaak wijzigende topicstarts.

[Voor 12% gewijzigd door RobIII op 26-05-2011 11:26]

[EricBruggema]

Uitknippen? waarom niet een overlay leggen met een plaatje met een gedeelte transparant? of denk ik nu te simpel?

[Gynnad]

EricBruggema schreef op donderdag 26 mei 2011 @ 12:36:
Uitknippen? waarom niet een overlay leggen met een plaatje met een gedeelte transparant? of denk ik nu te simpel?

Dat zien we inderdaad het liefste, dat je gewoon met een overlay figuur erover heen gaat, al zul je deze wel aan moeten kunnen passen, gezien niet elke foto even groot is etc, maar dan moet je het plaatje wat je ziet er nog uit kunnen knippen. Maar hoe doe je dat?

[Bigs]

Gynnad schreef op donderdag 26 mei 2011 @ 13:20:
[...]


Dat zien we inderdaad het liefste, dat je gewoon met een overlay figuur erover heen gaat, al zul je deze wel aan moeten kunnen passen, gezien niet elke foto even groot is etc, maar dan moet je het plaatje wat je ziet er nog uit kunnen knippen. Maar hoe doe je dat?

Dit is niet heel moeilijk te maken hoor.. waar loop je vast?

[OkkE]

Een element over de image met een overlay die 100% x 100% in dat element staat? Vergroot/verklein je het element over de image, past ook de overlay zich aan?

[Bosmonster]

We lullen een beetje door elkaar heb ik het idee.

Volgens mij wil hij aan de backend de afbeelding uit kunnen knippen, niet masken aan de frontend.

[Bigs]

Bosmonster schreef op donderdag 26 mei 2011 @ 13:47:
We lullen een beetje door elkaar heb ik het idee.

Volgens mij wil hij aan de backend de afbeelding uit kunnen knippen, niet masken aan de frontend.

Nouja dat is een kwestie van vanuit je frontend de coördinaten door te geven aan de backend zodat die de bewerking op zijn eigen manier kan dupliceren. Ik ben benieuwd waar de TS op vastloopt. Het lijkt me onwaarschijnlijk dat er een kant-en-klaar oplossing is die exact doet wat hij wil.

[Twan V]

Zoek eens op imagemagick, daarmee zijn dit soort dingen (serverside) erg goed te doen.

[Gynnad]

OkkE schreef op donderdag 26 mei 2011 @ 13:46:
Een element over de image met een overlay die 100% x 100% in dat element staat? Vergroot/verklein je het element over de image, past ook de overlay zich aan?

Kijk wat ik zojuist allemaal over overlay heb gelezen is dat je het eigenlijk standaard toepast, maar ik wil eigenlijk dat gebruiker zelf zijn stuk kan selecteren wat hij op de foto wilt, bijvoorbeeld zo:


(hoop dat het een beetje duidelijk is, maar bij de hoofden zie je een rondje, met daarbuiten een transparant deel)

Dus dat de gebruiker nog naar links/rechts/boven/onder zou kunnen schijven met dat rondje, deze groter en kleiner zou kunnen maken. En dat is eigenlijk wat ik zo via google, php scripts etc niet kan vinden. Daar wordt het vooral 'standaard' toegepast en heeft de gebruiker er niets over te zeggen.

[OkkE]

Gaat het nu over front-end (wat de gebruiker op de website ziet) of over back-end (hoe die selectie in de database/jullie systeem) wordt bewaard?

Als het over front-end gaat, dan zou je het zo kunnen doen: Over de image van de gebruiker heen wordt een laag gezet, deze laag is te vervormen (breder, hoger) en te verplaatsen, in die laag zit een image (waar bijv. een rondje 100% transparant is, de rest er om heen 90%) die altijd mee schaalt met de laag.

[Gynnad]

OkkE schreef op donderdag 26 mei 2011 @ 15:02:
Gaat het nu over front-end (wat de gebruiker op de website ziet) of over back-end (hoe die selectie in de database/jullie systeem) wordt bewaard?

Als het over front-end gaat, dan zou je het zo kunnen doen: Over de image van de gebruiker heen wordt een laag gezet, deze laag is te vervormen (breder, hoger) en te verplaatsen, in die laag zit een image (waar bijv. een rondje 100% transparant is, de rest er om heen 90%) die altijd mee schaalt met de laag.

Het gaat over de front-end, de gebruiker moet het inderdaad dus zo kunnen zien en kunnen verschuiven hoe hij/zij het wil.

In de back-end, dus in onze database/map moet alleen de selectie van de gebruiker komen. Ik heb alleen tot nu toe nog niet kunnen vinden hoe je een 'beweegbare' laag over de foto heen kunt zetten. Alleen een vaste laag op een bepaald punt, soort van watermerk/tekst. Maar ik google even verder!

[benoni]

Dat je een plaatje kunt verplaatsen en schalen ken ik al van jaren geleden: Walter Zorn drag-drop library. Inmiddels zijn er wel meer libraries waar zoiets in zit.

[Melmer]

Misschien kun je iets met de Raphaël Javascript Libary. Hiermee zou je een schaalbare (in vector) vorm/mask over de foto heen kunnen plakken. De gebruiker kan dan scalen, verplaatsen etc. Uiteindelijk sla je alles op in vector en kunnen jullie het reproduceren en de foto verkopen.