Cookies op Tweakers

Tweakers maakt gebruik van cookies, onder andere om de website te analyseren, het gebruiksgemak te vergroten en advertenties te tonen. Door gebruik te maken van deze website, of door op 'Ga verder' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt, bekijk dan ons cookiebeleid.

Meer informatie
×

Help Tweakers weer winnen!

Tweakers is dit jaar weer genomineerd voor beste prijsvergelijker en beste community. Laten we ervoor zorgen dat heel Nederland weet dat Tweakers de beste website is. Stem op Tweakers!


  • Hertog6
  • Registratie: april 2011
  • Laatst online: 16-10 11:49
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
$('#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:
1
2
document.getElementById("active").toDataURL("image/jpeg");
console.log(halloWereld.miauw);

Maar als ik op regel 39 vervolgens de
JavaScript:
1
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 8)7 )
- Global variabelen
- Object gemaakt

Hertog6 wijzigde deze reactie 14-12-2014 17:27 (0%)
Reden: Typo's

MacBook Pro Mid 2012 16Gb RAM | Xiaomi Mi2S 32 Gb


  • Maximized
  • Registratie: april 2004
  • Laatst online: 18:48

Maximized

En niet minimized

Ziet ernaar uit dat Caman gewoon asynchroon is.

  • R4gnax
  • Registratie: maart 2009
  • Laatst online: 20-10 16:47
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.

R4gnax wijzigde deze reactie 14-12-2014 17:44 (39%)


  • Hertog6
  • Registratie: april 2011
  • Laatst online: 16-10 11:49
quote:
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.
quote:
Maximized schreef op zondag 14 december 2014 @ 17:31:
Ziet ernaar uit dat Caman gewoon asynchroon is.
Ja dat klopt idd... Caman is asynchroon.

MacBook Pro Mid 2012 16Gb RAM | Xiaomi Mi2S 32 Gb


  • .oisyn
  • Registratie: september 2000
  • Laatst online: 16:49

.oisyn

Moderator Devschuur® / Cryptocurrencies

Demotivational Speaker

quote:
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?

.oisyn wijzigde deze reactie 14-12-2014 19:09 (10%)

If we can hit that bullseye, the rest of the dominoes will fall like a house of cards. Checkmate.


  • MarcoC
  • Registratie: september 2003
  • Laatst online: 16:15
quote:
.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
  • Registratie: november 2003
  • Laatst online: 17-10 15:54
Het is inderdaad verreweg het makkelijkste om gewoon onder this.render() verder te gaan met je AJAX call :P

CamanJS vuurt een event af wanneer het renderen klaar is, dat kun je natuurlijk ook gebruiken.
JavaScript:
1
2
3
Caman.Event.listen('renderFinished', function(job) {
    console.log('Klaar: '+job);
});

Pagina: 1


Apple iPhone XS Red Dead Redemption 2 LG W7 Google Pixel 3 XL OnePlus 6T FIFA 19 Samsung Galaxy S10 Google Pixel 3

Tweakers vormt samen met Tweakers Elect, Hardware.Info, Autotrack, Nationale Vacaturebank en Intermediair de Persgroep Online Services B.V.
Alle rechten voorbehouden © 1998 - 2018 Hosting door True