Что привело бы к созданию HTML5 canvas для создания неполного изображения?

У меня есть следующий javascript, который создает изображения с холста и загружает их на сервер.

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

введите описание изображения здесь

Каждый так часто результат выглядит как выше, только частично нарисован. Несколько холстов обрабатываются и загружаются последовательно, только движутся в завершении ajax (в... части), поэтому только по одному.

Вы видели, как это произошло? Если да, то где в этом процессе я должен отлаживать дальше? Может быть, настройка или что-то в объекте контекста?

Edit

Загрузка - это пост ajax с обещанием, разрешенным только в ветке успеха. Он фактически использует службу angular $http:

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

Ответы

Ответ 1

Мы столкнулись с подобными, за исключением части с холстом. Вы можете легко отладить его.

  • Распечатайте данный blob на странице как img src, чтобы убедиться, что файл был создан правильно. Распечатайте также размер капли.
  • Откройте инструменты разработчика для разработчиков → Сеть → Фильтр XHR и начните загрузку
  • Назначьте запрос ajax завершенного состояния (статус 200) и просмотрите заголовки запроса → Content-Length. Если это число равно размеру блоба на странице, оно было загружено правильно и найти проблему на стороне сервера. Еще раз проверьте вызов ajax.
  • Убедитесь, что сервер задал максимальный размер запроса клиента, соответствующий вашей учетной записи. Например, nginx имеет значение по умолчанию 1M.

СОВЕТ: установите Content-Type по blob.type в заголовках $http. Значение по умолчанию для POST - application/json.

Ответ 2

попытайтесь немного изменить свою логику, вы получаете условия гонок с процессом загрузки и когда изображение создается, они должны быть обратными в обратном вызове sorta..

// ...
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 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
    };
});

если вы хотите отправить URL-адрес данных изображения, попробуйте что-то вроде:

// ...
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