[DHTML] image manipulation

[g4wx3]

haaj haaj

ik ben nu al een hele nacht op zoek, naar de werking van javascript image manipulation.

check de voorbeelden hier:

http://www.netzgesta.de/lab/
http://www.outcut.de/MooFlow/Moo3DCircle.html
http://demos.mootools.net/Fx.Morph

Welke functie (of weet ik veel wat) word er gebruikt om een afbeelding te bewerken?

Zelf zou ik voor de fun graag een afbeelding in grote stukken willen snijden en dan laten samenkomen. Of zoiets als mootools (maar dan nog meer lijkend op coverflow.)

ik kan echt niet vinden met google, en van hun scripts snap ik niks (te moelijk)..

Hoe kunnen zij een afbeelding omdraaien?
hoe kunnen zij daar een gradient aan toevoegen?
hoe kunnen zij een afbeelding in stukken knippen?
hoe kunnen zij een afbeelding in 3D plaatsen????

hopelijk kunnen jullie me snel antwoorden.
(en hopelijk is niet te moeilijk...)

[ReseTTim]

javascript wordt gebruikt als scripttaal en ik verwacht dat ze iets doen met Active-X..

[g4wx3]

het werkt ook in firefox en safari, ...

Hier heb iets om te tekenen:
http://www.c-point.com/javascript_vector_draw.htm

misschien vind ik nu ook nog iets om te bewerken.


Hier kun je een javasciptje downloaden, als je de code wilt zien
http://www.netzgesta.de/reflex/

ik begin op weg te geraken...
http://developer.mozilla..../Category:Canvas_tutorial

oh, dit word cool...
http://www.abrahamjoffe.com.au/ben/canvascape/

de max:
http://canvaspaint.org/



meteen ook een oplosssing voor ... ronde hoeken
http://www.parkerfox.co.uk/cornerz/
http://greghoustondesign.com/demos/moc
hier zit veel leuks in

En as je goed blijft zoeken dat wind je een library om het ook in ie te renderen
http://sourceforge.net/pr...xcanvas_0002.zip&38108890

Eerst was er VML dan SGM en nu Canvas
De laatste is eigenlijk degene die nu echt populair word

[ Voor 84% gewijzigd door g4wx3 op 29-01-2008 12:54 ]

[RobIII]

De voorbeelden die je geeft zijn nogal uiteenlopend, en de helft heeft niet eens met image manipulation te maken. Wat probeer je nou precies te bereiken en waarom 'spiek' je niet bij je eigen gegeven voorbeelden om te zien hoe het gedaan wordt? Of verwacht je dat wij je gaan vertellen hoe je de volgende photoshop-killer in JS bouwt?

[SchizoDuckie]

Ik heb het idee dat hij denkt dat hij al deze scriptjes op een grote hoop kan gooien, er een toverspreuk overheen kan zeggen, en dat ze dan allemaal naadloos met elkaar samenwerken in om tot een soort 3d picasa for the web photoshop 'enzo' te komen

[ Voor 0% gewijzigd door SchizoDuckie op 29-01-2008 10:34 . Reden: It just occurs to me... Is g4wx3 een manager??? ]

[g4wx3]

Ik heb totaal geen idee hoe het in een zit, maar in mijn beginpost staat aangegeven dat ik inderdaad image manipulations wil.
Nu weet ik dat er enkele ie Filters bestaan, maar de effecten in de starttopic werken crossbrowser, na enige tijd zoeken kan ik alleen maar bedenken dat zij dit voor elkaar krijgen dmv een canvas

om nog eens te herhalen wat ik wil:

Hoe kunnen zij een afbeelding omdraaien?
hoe kunnen zij daar een gradient aan toevoegen?
hoe kunnen zij een afbeelding in stukken knippen?
hoe kunnen zij een afbeelding in 3D plaatsen?

nu heb ik het canvas ontdenkt, en ik denk dat dit inderdaad de crossbrowser oplossing is. In een canvas kun je een image plaatsen en bewerken.
Voor de canvas bestaat er een ie-lib, die het resultaat converteerd naar vml, om ook in ie zichtbaar te zijn.

Het is niet mijn bedoeling om zelf fotoshop te maken ofzo.
Ik wouw weten hoe andere scripters het voor elkaar kregen. En als ik het eenmaal doorheb, kan ik dus mijn eigen scripts in de showcase zetten.

[ Voor 4% gewijzigd door g4wx3 op 29-01-2008 12:53 ]

[curry684]

g4wx3 schreef op dinsdag 29 januari 2008 @ 04:32:
van hun scripts snap ik niks (te moelijk).. hopelijk kunnen jullie me snel antwoorden.
(en hopelijk is niet te moeilijk...)

Feitelijk heb je dus geen idee wat ze doen, en ben je dus een beetje kansloos op zoek naar dingen waar je niets van snapt ondanks dat je de sourcecodes op de site zo kunt lezen. Zou je niet wat simpeler beginnen met een aantal mootools voorbeelden in de praktijk toe te passen voordat je meteen aan overcomplexe dingen voor je kennisniveau gaat beginnen?

[g4wx3]

Van php en mysql snapte ik ook niks totdat ik het zelf begon te maken, daarom dat ik wilde weten hoe ze die dingen maakte. Zodra ik tijd heb ga ik dus zelf ook iets beginnen canvas te bouwen.

Voor echt gebruik is het inderdaad beter, makkelijker, en efficiënter om dergelijke tools te gebruiken.
Toch is het belangrijk om te weten hoe iets werkt vind ik. Dat was voor mij een raadsel want doch ik JS redelijk goed ken, dacht ik dat het toch met JS zou gebeuren. Canvas element was voor mij volledig onbekend. En met dit element heb je weer minder flash nodig.

(ik hou niet van flash /action script, omdat het een duur programma is, en omdat je het niet zomaar als script kan schrijven in eender welke editot)

[Johnny]

g4wx3 schreef op dinsdag 29 januari 2008 @ 12:50:
Ik heb totaal geen idee hoe het in een zit, maar in mijn beginpost staat aangegeven dat ik inderdaad image manipulations wil.
Nu weet ik dat er enkele ie Filters bestaan, maar de effecten in de starttopic werken crossbrowser, na enige tijd zoeken kan ik alleen maar bedenken dat zij dit voor elkaar krijgen dmv een canvas

om nog eens te herhalen wat ik wil:

Hoe kunnen zij een afbeelding omdraaien?

Doormiddel van een canvas in moderne browsers of VML in IE.

hoe kunnen zij daar een gradient aan toevoegen?

Door een semi-transparante PNG-afbeelding er overheen te plaatsen.

hoe kunnen zij een afbeelding in stukken knippen?

Door in twee elementen die samen even groot zijn als het origineel dezelfde afbeelding te zetten met een andere positie.

hoe kunnen zij een afbeelding in 3D plaatsen?

Door afbeeldingen kleiner en groter te maken relatief van elkaar om zo de illusie van perspectief te geven.

[Verwijderd]

Een paar maanden geleden heb ik op mijn weblog een script gepubliceerd wat een '3d reflectie' mogelijk maakt:

http://ajaxorized.com/3d-image-reflection-with-javascript/

De techniek die ik gebruik is een aantal layers onder de image hangen waarbij de image met een varierend top-attribuut als background genomen wordt. Alhoewel het resultaat erg goed is, is het redelijk zwaar voor je browser.

[g4wx3]

Ik ben niet zo voor technieken die superveel div aanmaken, Ik wist wel dat het bestond, en die begrijp ik ook (is niet zo moeilijk), maar als je dan een galerij wilt maken met het effect dan wordt het te zwaar. Ik vind het wel intressant om te lezen, maar met reflets.js 1.7 is het toch efficienter.
Die techniek gebruiken ze ook voor "rounded corners" te maken, maar dat zal je mij nooit zien gebruiken.