Điều gì sẽ khiến Canvas canvas toBlob tạo hình ảnh không đầy đủ?

Question

Tôi có javascript sau đây sản xuất hình ảnh từ canvas và tải chúng lên máy chủ.

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

Mỗi thường như vậy, kết quả trông giống như trên, chỉ một phần rút ra. Nhiều khung hình được xử lý và tải lên một cách thẳng thắn, chỉ di chuyển khi hoàn thành phần ajax (trong phần ...), do đó chỉ có một khung hình.

Bạn đã thấy điều này xảy ra chưa? Nếu vậy, ở đâu trong quá trình này tôi nên gỡ lỗi thêm? Có lẽ một thiết lập hoặc một cái gì đó trong đối tượng bối cảnh?

Sửa

Việc tải là một bài ajax với một lời hứa giải quyết chỉ trên chi nhánh thành công. Nó thực sự sử dụng dịch vụ $ http của angular:

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

Answer 1

Chúng tôi đang đối mặt với ngoại trừ một phần với canvas. Bạn có thể gỡ lỗi đơn giản.

1. In các đốm màu cho trang dưới dạng img src để đảm bảo tệp được tạo đúng cách. In cũng có kích thước blob.
2. Mở các công cụ dành cho nhà phát triển của trình duyệt -> Mạng -> Lọc XHR và bắt đầu tải lên
3. Gán yêu cầu ajax hoàn thành (trạng thái 200) và xem Tiêu đề yêu cầu -> Nội dung dài. Nếu số này bằng với kích thước blob trên trang, nó đã được tải lên đúng cách và tìm sự cố ở phía máy chủ. Khác kiểm tra cuộc gọi ajax.
4. Đảm bảo rằng máy chủ đã đặt kích thước yêu cầu ứng dụng khách tối đa phù hợp với hệ thống của bạn. Ví dụ nginx có giá trị mặc định là 1 triệu.

TIP: đặt Loại nội dung theo blob.type trong tiêu đề $ http. Giá trị mặc định cho POST là application/json.

Answer 2

cố gắng để sắp xếp lại logic của bạn một chút ,, bạn đang nhận được tình trạng đua với quá trình tải lên và khi hình ảnh được tạo ra, họ phải được gọi lại trong callback 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'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 
    }; 
}); 

của nếu bạn muốn gửi URL của dữ liệu hình ảnh thử một cái gì đó giống như ,,

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

h, k