Katastrofa iOS Safari z dużym formularzem danych pocztowych przesyła

Question

Mam element Canvas HTML5. Muszę przesłać obraz na mój serwer. Działa dobrze we wszystkich przeglądarkach komputerowych, które wypróbowałem, ale Safari na iOS zawiesza się z błędem braku pamięci w plikach dziennika. Obraz na płótnie ma prawie 500 KB, ponieważ ma rozmiar 950 x 323 PNG. Oto uproszczona wersja mojego kodu do przesłania:

$('#imageJSON').val(JSON.stringify(myCanvas)); //I wrote other JSON stringify code. It works 
var d = myCanvas.toDataURL(); 
$('#imageData').val(d); 
$('#myForm').submit(); 

Safari rozpoczyna przesyłanie, ale ulega awarii przez kilka sekund. Serwer otrzymuje inne dane wraz z żądaniem, ale dane obrazu nie są kompletne. Próbowałem zmienić typ encji na "multipart/form-data", ale to nie pomogło.

Answer 1

Czy próbowałeś napisać algo, aby podzielić płótno na kawałki? Na przykład zamiast wywoływać metodęDataURL() na całym obszarze roboczym, można podzielić płótno na 10-20 różnych elementów. Zapisz każdy element jako oddzielny obraz. Po załadowaniu płótna, po prostu zmontuj każdy element na płótnie. Jest to koncepcja podobna do pakietów danych lub buforowania wideo.

Answer 2

Okazuje się, że w WebKit na Macu występuje błąd pamięci. Złożyłem błąd na webkit.org https://bugs.webkit.org/show_bug.cgi?id=84168. Znalazłem alternatywne rozwiązanie to wysyłanie danych za pośrednictwem AJAX zamiast standardowego przesyłania formularzy.

$('#imageJSON').val(JSON.stringify(myCanvas)); 
var d = myCanvas.toDataURL(); 
$('#imageData').val(d); 
var data = $(form).serialize(); 
$.post(ajaxurl, data, function(r) { 
    // done. handle response. remove loading overlay. 
}); 

Pracował świetnie, ale był to rodzaj bólu. Używam javascript (kod nie jest wyświetlany), aby skierować przeglądarkę na odpowiednią stronę po przesłaniu formularza, a to trochę symuluje standardowe przesyłanie formularzy, ale nie jest tak płynne dla użytkownika.