Uwaga: Działa to tylko wtedy, gdy obraz pochodzi z tej samej domeny co strona lub ma crossOrigin="anonymous"
atrybut, a serwer obsługuje CORS. Nie da ci również oryginalnego pliku, ale wersję ponownie zakodowaną. Jeśli chcesz, aby wynik był identyczny z oryginałem, zobacz odpowiedź Kaiido .
Musisz utworzyć element canvas o odpowiednich wymiarach i skopiować dane obrazu za pomocą drawImage
funkcji. Następnie możesz użyć tej toDataURL
funkcji, aby uzyskać dane: adres URL zawierający obraz zakodowany w standardzie 64. Pamiętaj, że obraz musi być w pełni załadowany, w przeciwnym razie otrzymasz tylko pusty (czarny, przezroczysty) obraz.
To byłoby coś takiego. Nigdy nie napisałem skryptu Greasemonkey, więc może być konieczne dostosowanie kodu, aby działał w tym środowisku.
function getBase64Image(img) {
// Create an empty canvas element
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
// Copy the image contents to the canvas
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
// Get the data-URL formatted image
// Firefox supports PNG and JPEG. You could check img.src to
// guess the original format, but be aware the using "image/jpg"
// will re-encode the image.
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
Pobieranie obrazu w formacie JPEG nie działa na starszych wersjach przeglądarki Firefox (około 3.5), więc jeśli chcesz to obsługiwać, musisz sprawdzić kompatybilność. Jeśli kodowanie nie jest obsługiwane, domyślnie będzie to „image / png”.
drawImage
zrobi nic, a skończysz na pustym płótnie i obrazie wynikowym.Ta funkcja pobiera adres URL, a następnie zwraca obraz BASE64
Nazwij to tak:
getBase64FromImageUrl("images/slbltxt.png")
źródło
img.src =
późniejimg.onload =
, ponieważ w niektórych przeglądarkach, takich jak Opera, wydarzenie się nie wydarzy.getBase64FromImageUrl(url)
iimg.onload = function ()
opuszczeniu funkcji img jest nieosiągalny, a śmieci są gromadzone. Inne niż IE 6/7 i jest w porządku.Wkrótce potem, ale żadna z odpowiedzi tutaj nie jest całkowicie poprawna.
Po narysowaniu na płótnie przekazany obraz jest nieskompresowany + wszystkie wstępnie pomnożone.
Po wyeksportowaniu jest nieskompresowany lub ponownie skompresowany przy użyciu innego algorytmu i niezmnożony.
Wszystkie przeglądarki i urządzenia będą miały różne błędy zaokrąglania występujące w tym procesie
(patrz Odcisk palca na płótnie ).
Więc jeśli ktoś chce plik obrazu w wersji base64, musi poprosić go ponownie (przez większość czasu będzie pochodził z pamięci podręcznej), ale tym razem jako obiekt Blob.
Następnie można użyć czytnika plików, aby odczytać go jako ArrayBuffer lub jako dataURL.
źródło
XMLHttpRequest cannot load data:image/jpeg;base64,/9j/4AA ... /2Q==. Invalid response. Origin 'https://example.com' is therefore not allowed access.
Nowocześniejszą wersją odpowiedzi kaiido z użyciem funkcji pobierania byłoby:
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
Edycja: Jak wskazano w komentarzach, zwróci adres URL obiektu, który wskazuje plik w twoim systemie lokalnym zamiast rzeczywistej DataURL, więc w zależności od przypadku użycia może nie być to, czego potrzebujesz.
Możesz spojrzeć na następującą odpowiedź, aby użyć funkcji pobierania i rzeczywistych danychURL: https://stackoverflow.com/a/50463054/599602
źródło
URL.revokeObjectURL()
jeśli masz długo działającą aplikację korzystającą z tej metody, w przeciwnym razie pamięć się zapełni.Shiv / Shim / Sham
Jeśli twoje obrazy są już załadowane (lub nie), to „narzędzie” może się przydać:
.. ale dlaczego?
Ma to tę zaletę, że wykorzystuje „już załadowane” dane obrazu, więc nie jest wymagane dodatkowe żądanie. Aditionally że pozwala użytkownikowi końcowemu (programista jak ty) decyduje się CORS i / lub
mime-type
iquality
-LUB- można pominąć te argumenty / parametry opisane w MDN specyfikacji tutaj .Jeśli masz ten JS załadowany (przed, kiedy jest potrzebny), wówczas konwersja do
dataURL
jest tak prosta, jak:przykłady
HTML
JS
Odcisk cyfrowy GPU
Jeśli obawiasz się o „dokładność” bitów, możesz zmienić to narzędzie, aby dostosować je do swoich potrzeb, zgodnie z odpowiedzią @ Kaiido.
źródło
Użyj
onload
zdarzenia do konwersji obrazu po załadowaniuPokaż fragment kodu
źródło
W HTML5 lepiej użyj tego:
źródło