Safari de iOS que se bloquea con un formulario de datos de envío grande; envíe

Question

Tengo un elemento Canvas de HTML5. Necesito enviar la imagen del lienzo a mi servidor. Funciona bien en todos los navegadores para PC que he probado, pero iOS Safari falla con un error de falta de memoria en los archivos de registro. La imagen del lienzo es de casi 500 KB porque es 950x323 PNG. Aquí hay una versión simplificada de mi código de confirmación:

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

Safari comienza a presentar, pero se estrella varios segundos en el presente. El servidor obtiene los otros datos con la solicitud, pero el imageData no está completo. Traté de cambiar el formulario enctype a "multipart/form-data" pero eso no ayudó.

Answer 1

¿Has intentado escribir un algo para dividir la imagen del lienzo en trozos? Por ejemplo, en lugar de llamar a DataURL() en todo el lienzo, puede dividir el lienzo en, por ejemplo, 10-20 piezas diferentes. Guarde cada pieza como su propia imagen separada. Cuando cargues el lienzo, simplemente monta cada pieza en el lienzo. Este es un concepto similar a los paquetes de datos o al buffer de video.

Answer 2

Resulta que hay un error de memoria en WebKit para Mac. Envié el error a webkit.org https://bugs.webkit.org/show_bug.cgi?id=84168. Encontré que una solución alternativa es enviar los datos a través de AJAX en lugar del envío del formulario estándar.

$('#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. 
}); 

Funcionó muy bien, pero fue un poco molesto. Uso javascript (código no mostrado) para dirigir el navegador a la página adecuada después del envío del formulario y simula un envío de formulario estándar, pero no es tan fácil para el usuario.