javascript - not - ¿Qué causaría que un lienzo HTML5 toBlob creara una imagen incompleta?

canvas to file

Question

Tengo las siguientes javascript producen imágenes desde un lienzo y las cargas a un servidor.

var can = document.createElement(''canvas'');
can.width = 600;
can.height = 600;
var ctx = can.getContext(''2d'');
ctx.fillRect(0, 0, can.width, can.height);
ctx.fillText("Julia", can.width/2, can.height/2);
can.toBlob(uploadImage, "image/jpg", 0.9);

function uploadImage(jpeg) {
  var data = new FormData();
  data.append(''image'', jpeg, ''image.jpg'');
  ...
}

De vez en cuando, el resultado se parece al anterior, solo parcialmente dibujado. Múltiples lienzos son procesados ​​y cargados en serie, solo avanzan en la finalización del ajax (en la parte ...), por lo que solo uno a la vez.

¿Has visto esto suceder? De ser así, ¿en qué parte de este proceso debo depurar más? Tal vez una configuración o algo en el objeto de contexto?

Editar

La carga es una publicación de Ajax con una promesa resuelta solo en la rama de éxito. En realidad usa el servicio $ http de angular:

$http({method: ''POST'', url: ''...'', data: data}).then(function(response) {
    // callback that processes and uploads the next image
});

Answer 1

Nos enfrentamos con una parte similar excepto con lienzo. Puedes depurarlo simplemente.

1. Imprima el blob dado en la página como img src para asegurarse de que el archivo se haya creado correctamente. Imprimir también tamaño de blob.
2. Abra las herramientas del desarrollador del navegador -> Red -> Filtro XHR y comience a cargar
3. Asigne la solicitud ajax terminada (estado 200) y mire Encabezados de solicitud -> Contenido-Longitud. Si este número es igual al tamaño de blob en la página, se cargó correctamente y encuentra problemas en el lado del servidor. Si no, revisa la llamada ajax.
4. Asegúrese de que el servidor haya establecido el tamaño máximo de solicitud del cliente adecuado para su uso. Por ejemplo, nginx tiene un valor predeterminado de 1M.

SUGERENCIA: configure Content-Type por blob.type en $ http headers. El valor predeterminado para POST es application / json.

Answer 2

Trate de reorganizar su lógica un poco, está obteniendo condiciones de carrera con el proceso de carga y cuando se crea la imagen, tienen que ser devueltos a la devolución de llamada.

// ...
ctx.fillText("Julia", can.width / 2, can.height / 2);
can.toBlob(function(blob) {
    var newImg = document.createElement(''img''),
        url = URL.createObjectURL(blob);
    newImg.onload = function() {
        // no longer need to read the blob so it''s revoked
        URL.revokeObjectURL(url);
        newImg.src = url;
        // we have image out of canvas and now do the upload of newImg
        // $http || $.ajax call goes here
    };
});

de si quieres enviar URL de datos de imagen prueba algo como ,,

// ...
ctx.fillText("Julia", can.width / 2, can.height / 2);
can.toBlob(function(blob) {
    var reader = new window.FileReader();
    reader.readAsDataURL(blob); 
    reader.onloadend = function() {
                base64data = reader.result;
        // we have image in base64 and now do the upload of base64data
        // $http || $.ajax call goes here
    }
});

hth, k