Chodzi Ci o coś takiego?
https://codepen.io/Tomek_Sochacki/pen/YaGLZN?editors=1010
To tak na szybko, jeśli to jest to to kod wymaga dużego dopracowania (np. teraz nie mamy żadnej informacji o wczytywaniu obrazka itp. ale nie chce mi się tego teraz robić, to tylko pokazowy kod).
Spróbuj sobie wpisać do inputa poniższe ciągi znakowe i kliknąć w button:
- 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
czy coś innego. Pamiętaj też, że nie analizujemy tu poprawności base64, nie ma info co gdy nic nie podano itp. No generalnie to jest jeden z przykładów wczytania obrazka, a nie oczywiście w żadnym razie gotowiec do aplikacji :)