[JAVASCRIPT]byte[] omzetten naar image en opslaan

woensdag 9 april 2008 09:10

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Is het mogelijk om een byte array om te zetten naar een image of op te slaan om daarna te kunnen tonen in een image binnen de htmlcode.

het is de bedoeling dat de afbeelding op het scherm getoond wordt.

Grtz Tijl

woensdag 9 april 2008 10:06

Acties:

0 Henk 'm!

Janoz

Moderator Devschuur®

!litemod

Ten eerste kun je in javascript helemaal niks opslaan. Ten tweede heb je binnen javascript afaik helemaal geen byte[] datatype.

Ken Thompson's famous line from V6 UNIX is equaly applicable to this post:
'You are not expected to understand this'

woensdag 9 april 2008 10:11

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Javascript

Je kan gebruik maken van het data: protocol om je image te tonen in een <img>-tag, alleen IE < 8 biedt daar geen ondersteuning voor. Je kan de data natuurlijk wel POSTen naar een serverside script.

In CrispyPaint gebruik ik overigens een serverside workaround voor IE om een vanuit JS gegenereerde image te tonen, nadeel is dat je beperkt bent tot de URL lengte-limiet aangezien dat een GET is.

Janoz schreef op woensdag 09 april 2008 @ 10:06:
Ten eerste kun je in javascript helemaal niks opslaan. Ten tweede heb je binnen javascript afaik helemaal geen byte[] datatype.

Een string kan wel gewoon binaire data bevatten en is in de meeste JS implementaties ook als een byte-array geimplementeerd in die zin dat je gewoon string[index] kan doen

[ Voor 27% gewijzigd door crisp op 09-04-2008 10:17 ]

Intentionally left blank

woensdag 9 april 2008 10:17

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Je kan de data natuurlijk wel POSTen naar een serverside script.

Ja daar had ik ook al aan gedacht, maar raak er niet uit hoe dit juist in zn werking gaat. Heb alles wat ik moet hebben al staan in c#, maar dat POSTen lukt me niet

grtz

woensdag 9 april 2008 10:21

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Javascript

binaire data POSTen zou ik overigens met XHR doen aangezien data in form-velden nog door charset-processing heengehaald wordt.

Je hebt het nu over C#; genereer je je image nu clientside of serverside?

Intentionally left blank

woensdag 9 april 2008 10:30

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

We werken met eid. In javascript halen we alle gegevens van de kaart en plaatsen ze in een form. Dit moet op client-side gebeuren.

Bij het ophalen van de foto gebruiken we de functie getPicture() uit een library. Deze retourneert een byte[]. Dus vanaf dat we de gegevens hebben kunnen de foto eigenlijk op het scherm laten plaatsen serverside, maar dan moet die byte[] kunnen worden doorgegeven in een serversidefunctie.

woensdag 9 april 2008 11:20

Acties:

0 Henk 'm!

Verwijderd

Verwijderd schreef op woensdag 09 april 2008 @ 10:30:
We werken met eid. In javascript halen we alle gegevens van de kaart en plaatsen ze in een form. Dit moet op client-side gebeuren.

Bij het ophalen van de foto gebruiken we de functie getPicture() uit een library. Deze retourneert een byte[]. Dus vanaf dat we de gegevens hebben kunnen de foto eigenlijk op het scherm laten plaatsen serverside, maar dan moet die byte[] kunnen worden doorgegeven in een serversidefunctie.

Ik weet niet of het aan mij ligt maar ik kan echt geen chocola van deze beschrijving maken. Kun je proberen iets duidelijker uit te leggen wat het proces is en even goed aangeven waar (server/client) wat moet gebeuren?

woensdag 9 april 2008 11:23

Acties:

0 Henk 'm!

TeeDee

CQB 241

Volgens mij is jullie setup als volgt:

1. een .jar met de EIDlib met de functie getPicture().
2. getPicture() retourneert een bytearray
3. deze bytearray wil je doorgeven aan .net om serverside een afbeelding te genereren
4. de afbeelding teruggeven op je webform.

Zoals crisp al zei: duik in het XmlHttpRequest: geef de byte[] door aan iets als processimage.aspx en laat processimage.aspx de afbeelding maken.

Je kan eventueel ook kijken naar een constructie als:

HTML:

<html>
//... bla bla
<img src="processimage.aspx?imagedata=[....je byte[]....]"/>
</html>

Vervolgens op je processimage.aspx (of .ashx, een handler dus) de afbeelding in memory (als Stream dus) aanmaken. Je zit alleen nog wel met de max lengte als GET parameter.

Als laatste zou je nog kunnen kijken of je je byte[] om kan zetten naar base64 encoding. Op deze manier kan je het meteen als

HTML:

1	<img src="data:image/jpeg;base64,[data]>

Alleen natuurlijk nog wel even kijken of dit lekker crossbrowser werkt.

[ Voor 14% gewijzigd door TeeDee op 09-04-2008 11:27 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

woensdag 9 april 2008 11:31

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Javascript

TeeDee schreef op woensdag 09 april 2008 @ 11:23:
Volgens mij is jullie setup als volgt:

1. een .jar met de EIDlib met de functie getPicture().

Dan is het dus java en geen javascript?

Intentionally left blank

woensdag 9 april 2008 11:34

Acties:

0 Henk 'm!

TeeDee

CQB 241

Mja, in zijn andere topic gaat het e.e.a. ook al door elkaar met Java en Javascript. In dat topic staat in de TS een JS functie, ik ging er even van uit dat dit uitgebreid is door wat andere JS functies en dat deze de byte[] oppikken uit de EIDlib.

Het is allemaal een beetje onduidelijk inderdaad.

Als het sec alleen JAVA is tip 1: Java != Javascript.
Tip 2: In Java kan je prima een image van een byte[] maken en deze opslaan.

Dus TS: wat is het nou?

[ Voor 25% gewijzigd door TeeDee op 09-04-2008 11:35 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

woensdag 9 april 2008 11:47

Acties:

0 Henk 'm!

Janoz

Moderator Devschuur®

!litemod

Er wordt niks door elkaar gehaald. Er wordt gewerkt met een Java Applet ge-embed op een pagina die benaderd wordt middels javascript. In javascript kunnen methoden van het applet aangeroepen worden, maar ik vraag me af of de byte[] structuur die uit het applet komt uberhaupt werkbaar is voor het javascript (vandaar ook mijn initiele opmerking)

Ken Thompson's famous line from V6 UNIX is equaly applicable to this post:
'You are not expected to understand this'

woensdag 9 april 2008 11:48

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

de eidlib.jar is geschreven in java, maar kan worden gebruikt met javascript.
Ik maak een webform in ASP.NET (c#) om gegevens van de elektronische identiteitskaart op te slaan.

Om de gegevens uit te lezen en op het scherm te tonen moet er echter clientside gewerkt worden, anders worden de gegevens gezocht op de server.
Hiervoor gebruik ik dus javascript. De naam, adres enz zijn geen probleem. Enkel die foto vormt nog het probleem.

Hopelijk is dit wat duidelijker

grtz

woensdag 9 april 2008 12:10

Acties:

0 Henk 'm!

TeeDee

CQB 241

Lijkt mij dat je dus hier voldoende aan kan hebben:

HTML:

<html>
//... bla bla
<img src="processimage.aspx?imagedata=[....je byte[]....]"/>
</html>

Het enige wat dan serverside gedaan wordt is het ombouwen van je byte[] naar een image.

Je ontkomt er niet aan om het e.e.a. serverside te doen. Wil je een <img src="data:image/jpeg;base64,[data]> gebruiken zal je nog een serverside fix voor IE 6, 7 en 8 moeten doen.

Heart..pumps blood.Has nothing to do with emotion! Bored

woensdag 9 april 2008 12:14

Acties:

0 Henk 'm!

robbert

TeeDee schreef op woensdag 09 april 2008 @ 12:10:
Lijkt mij dat je dus hier voldoende aan kan hebben:
HTML:
1
2
3
4
<html>
//... bla bla
<img src="processimage.aspx?imagedata=[....je byte[]....]"/>
</html>

Zo krijg je toch een enorm lange GET? Had IE6 en/of IE7 daar geen problemen mee?

woensdag 9 april 2008 12:16

Acties:

0 Henk 'm!

TeeDee

CQB 241

robbert schreef op woensdag 09 april 2008 @ 12:14:
[...]
Zo krijg je toch een enorm lange GET? Had IE6 en/of IE7 daar geen problemen mee?

De maxlimit weet ik niet uit mijn hoofd, maar dat zou goed kunnen. (ik denk dat je inderdaad een probleem daar mee gaat krijgen.)

Blijft de andere optie nog wel valide. (<img src="data:image/jpg"))

Heart..pumps blood.Has nothing to do with emotion! Bored

woensdag 9 april 2008 12:36

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Javascript

TeeDee schreef op woensdag 09 april 2008 @ 12:16:
[...]

De maxlimit weet ik niet uit mijn hoofd, maar dat zou goed kunnen. (ik denk dat je inderdaad een probleem daar mee gaat krijgen.)

zo'n 4K in IE7, in IE6 2K meen ik.

Blijft de andere optie nog wel valide. (<img src="data:image/jpg"))

Wordt pas ondersteund vanaf IE8 met een limiet van 32KB

Intentionally left blank

woensdag 9 april 2008 12:48

Acties:

0 Henk 'm!

TeeDee

CQB 241

crisp schreef op woensdag 09 april 2008 @ 12:36:
[...]
Wordt pas ondersteund vanaf IE8 met een limiet van 32KB

Ah, vandaar dat mijn test in Fx wel prima ging en in IE8 (ook in IE7 emu modus) de afbeelding halverwege afgekapt wordt.

Heart..pumps blood.Has nothing to do with emotion! Bored

woensdag 9 april 2008 14:41

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Zou het niet nog makkelijker zijn om in de eidlib.jar al een string te maken.
Deze string dan in een textbox te plaatsten en op deze textbox een valuechanged event maken die een functie oproept.

Nu heb dit al zitten proberen, maar vanaf ik de jar aanpas krijg ik de melding applet notinited in mijn browser.

Grtz Tijl

Onderwerpen