Muszę przekonwertować obraz na ciąg Base64, aby móc wysłać mój obraz na serwer.
Czy jest na to plik JavaScript? W przeciwnym razie, jak mogę to przekonwertować?
javascript
base64
Coder_sLaY
źródło
źródło
Odpowiedzi:
Możesz do tego użyć HTML5
<canvas>
:Utwórz płótno, załaduj do niego obraz, a następnie użyj,
toDataURL()
aby uzyskać reprezentację Base64 (tak naprawdę jest todata:
adres URL, ale zawiera obraz zakodowany w Base64).źródło
toDataURL
daje kontrolę nad wywołaniami zwrotnymi, takdone/fail/always
jak w przypadku xhr?Istnieje wiele podejść do wyboru:
1. Podejście: FileReader
Załaduj obraz jako obiekt blob za pomocą XMLHttpRequest i użyj interfejsu API FileReader, aby przekonwertować go na dataURL :
Ten przykład kodu można również zaimplementować przy użyciu interfejsu API pobierania WHATWG :
Te podejścia:
Obsługa przeglądarki:
2. Podejście: płótno
Załaduj obraz do obiektu obrazu, pomaluj go na nieskażonym płótnie i przekonwertuj płótno z powrotem na dataURL.
Szczegółowo
Obsługiwane formaty wejściowe:
image/png
,image/jpeg
,image/jpg
,image/gif
,image/bmp
,image/tiff
,image/x-icon
,image/svg+xml
,image/webp
,image/xxx
Obsługiwane formaty wyjściowe:
image/png
,image/jpeg
,image/webp
(Chrom)Obsługa przeglądarki:
3. Podejście: obrazy z lokalnego systemu plików
Jeśli chcesz przekonwertować obrazy z systemu plików użytkowników, musisz zastosować inne podejście. Użyj interfejsu API FileReader :
źródło
Image from origin **** has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.
Ten fragment kodu może konwertować ciąg, obraz, a nawet plik wideo na dane ciągu Base64.
źródło
Zasadniczo, jeśli twój obraz to
możesz to przekonwertować
źródło
<img id='Img1' src='someurl' crossorigin='anonymous'>
Oto co zrobiłem:
A oto jak go wykorzystujesz
źródło
Odkryłem, że najbardziej bezpiecznym i niezawodnym sposobem na to jest użycie
FileReader()
.Demo: Obraz do Base64
źródło
Jeśli masz obiekt pliku, ta prosta funkcja będzie działać:
Przykład użycia:
źródło
Możesz użyć FileAPI , ale jest on prawie nieobsługiwany.
źródło
O ile mi wiadomo, obraz można przekonwertować na ciąg Base64 za pomocą FileReader () lub przechowywać go w elemencie canvas, a następnie użyć toDataURL (), aby uzyskać obraz. Miałem podobny problem, z którym można się odwołać.
Konwertuj obraz na płótno, które jest już załadowane
źródło
Wypróbuj ten kod:
W przypadku zdarzenia zmiany przesłania pliku wywołaj tę funkcję:
Przechowuj dane Base64 w ukrytych plikach do użycia.
źródło
źródło
Cóż, jeśli używasz pakietu Dojo Toolkit , daje nam to bezpośredni sposób na kodowanie lub dekodowanie w Base64.
Spróbuj tego:
Aby zakodować tablicę bajtów przy użyciu dojox.encoding.base64:
Aby zdekodować ciąg zakodowany w Base64:
źródło