[JavaScript] scope vraag

[Hertog6]

In het kader van school ben ik bezig met foto bewerking in JavaScript. Hiervoor gebruik ik voornamelijk 2 JS libraries, jQuery en CamanJS. Alleen loop ik tegen een probleem aan waar ik maar niet kan zien wat ik verkeerd doe. Ik weet dat ik in de hoek van scope moet kijken en dat daar mijn fout ligt

De situatie is op dit moment zo; een gebruiker kan uit een <ul> lijst kiezen welke van zijn eigen geuploade fotos hij wil bewerken. Op het moment dat hij deze gekozen heeft wordt deze geplaatst in een <canvas> met de ID genaamd "active", zal de foto geschaald worden afhankelijk van de resolutie van het scherm van de gebruiker (om te voorkomen dat je een foto met een resolutie van 8000x4000 op een scherm laat zien van 1680x1050 en je de hele interface niet meer kan zien) en dit word helemaal afgehandeld door CamanJS. Daarna kan de gebruiker aan de rechter kant van het scherm kiezen voor een aantal filters over de foto heen. Zoals zwart-wit en sepia. Op moment dat de gebruiker klaar is met bewerken, klikt die op de knop "bevestig", word er een AJAX call gedaan naar de PHP zijde waardoor de wijzigingen in de foto opgeslagen word. Deze AJAX call bestaat voornamelijk uit een Base64 string encoding van het <canvas> element.

Alleen wat ik eerst vergeten was, zodra je een <canvas> element andere dimensies meegeeft en je vraagt daar vervolgens de Base64 encoded versie van op heeft die Base64 string ook die verkleinde dimensies. Dus wat er eerst gedaan moet worden is die canvas terug zetten naar de oorspronkelijke dimensies, daar de Base64 string van opvragen en dan weer terug schalen naar de "oude" dimensies.

JavaScript:

    $('#confirm').click(function() {

        window.halloWereld = {
            'miauw':''
        };

        Caman("#active", function() {

            // Gets the original imageHeight + imageWidth
            var orgHeight = Caman("#active").imageHeight();
            var orgWidth = Caman("#active").imageWidth();

            // Gets the current height + width;
            var viewHeight = Caman("#active").height;
            var viewWidth = Caman("#active").width;

            // Now we resize it back to the original dimensions
            this.resize({
                height: orgHeight,
                width: orgWidth
            });

            this.render();

            // Now we fetch the Base64 representation of the canvas element
            window.halloWereld.miauw = document.getElementById("active").toDataURL("image/jpeg");
            console.log(window.halloWereld.miauw);

            // Now we resize back to the viewing dimensions
            this.resize({
                height: viewHeight,
                width: viewWidth
            })

            this.render();

        });

        console.log(window.halloWereld.miauw);

        // Hierna komt de AJAX call
});

Dit is de code waarbij het fout gaat. Op het moment dat als dit uitgevoerd word, dan krijg ik netjes de Base64 string terug.

JavaScript:

document.getElementById("active").toDataURL("image/jpeg");
console.log(halloWereld.miauw);

Maar als ik op regel 39 vervolgens de

JavaScript:

console.log(halloWereld.miauw);

output bekijk dan krijg ik daar alleen maar een empty string terug... Terwijl ik een paar regels daarvoor wel netjes mijn verwachte output kreeg....

Wat ik al geprobeerd heb;

- Andere variabelen namen (misschien toch nog ergens de hoop dat mijn eigen bedachte variabelen misschien er anders gebruikt werden / ook gebruikt werden door de browser )
- Global variabelen
- Object gemaakt

[ Voor 0% gewijzigd door Hertog6 op 14-12-2014 17:27 . Reden: Typo's ]

[Verwijderd]

Ziet ernaar uit dat Caman gewoon asynchroon is.

[R4gnax]

Een HTML canvas wist de getekende inhoud zodra de dimensies gewijzigd worden. Tenzij de Caman library daar iets slim mee doet, gaat dit sowieso niet werken.

[ Voor 39% gewijzigd door R4gnax op 14-12-2014 17:44 ]

[Hertog6]

R4gnax schreef op zondag 14 december 2014 @ 17:43:
Een HTML canvas wist de getekende inhoud zodra de dimensies gewijzigd worden. Tenzij de Caman library daar iets slim mee doet, gaat dit sowieso niet werken.

Daar hoef ik me gelukkig niet mee bezig te houden, dat handeld Caman helemaal voor mij af.

Verwijderd schreef op zondag 14 december 2014 @ 17:31:
Ziet ernaar uit dat Caman gewoon asynchroon is.

Ja dat klopt idd... Caman is asynchroon.

[.oisyn]

Hertog6 schreef op zondag 14 december 2014 @ 17:53:
Ja dat klopt idd... Caman is asynchroon.

Daar zit dan ook de kern van je probleem. De functie die je meegeeft wordt pas op een later moment aangeroepen. Regel 39 komt chronologisch dus eerder dan regel 26.

Waarom zet je de rest van je code ook niet gewoon in die callback functie?

[ Voor 10% gewijzigd door .oisyn op 14-12-2014 19:09 ]

[MarcoC]

.oisyn schreef op zondag 14 december 2014 @ 19:06:
[...]

Waarom zet je de rest van je code ook niet gewoon in die callback functie?

Inderdaad. Problem solved lijkt me toch?

[NNF]

Het is inderdaad verreweg het makkelijkste om gewoon onder this.render() verder te gaan met je AJAX call

CamanJS vuurt een event af wanneer het renderen klaar is, dat kun je natuurlijk ook gebruiken.

JavaScript:

Caman.Event.listen('renderFinished', function(job) {
    console.log('Klaar: '+job);
});