什麼會導致HTML5畫布toBlob創建不完整的圖像？

我有以下JavaScript從畫布產生圖像並將其上傳到服務器。什麼會導致HTML5畫布toBlob創建不完整的圖像？

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（在...部分）時纔會繼續，因此一次只能有一個。

你見過這種情況嗎？如果是這樣，那麼在這個過程中我應該進一步調試？可能是上下文對象中的設置或其他東西？

編輯

上傳是一個Ajax後，只有在成功解決分公司承諾。它實際上使用角度的$ http服務：

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

來源

2017-06-01 Ryan Calhoun

對我來說，它看起來像圖片上傳被中斷，並且只有圖像的一部分。我從來沒有見過toBlob或toDataURL這樣做的圖像，但我已經看到了很多不完整的jpegs，當由於連接失敗而下載和上傳時，看起來像是這樣。 – Blindman67

你可以顯示上傳的代碼嗎？ – adam0101

如果服務器沒有讀取整個請求，那麼JavaScript有可能看到成功路徑？......我想不是，但也許這是一個有問題的問題。也許在服務器上的一個簡單的緩衝問題......也許我可以通過blob大小作爲另一個表單參數，並檢查它對服務器上收到的文件大小。 –

我們正面臨類似的情況，除了與畫布部分。你可以簡單地調試它。

打印給定的blob到頁面作爲img src以確保該文件已正確創建。打印也blob大小。
打開瀏覽器的開發工具 - >網絡 - >過濾器XHR並開始上傳
分配完成（狀態200）ajax請求並查看請求標頭 - >內容長度。如果此數字與頁面上的blob大小相同，則會正確上載，並在服務器端發現問題。否則檢查阿賈克斯呼叫。
確保服務器已經設置了適合您的用例的最大客戶端請求大小。例如，nginx具有默認值1M。

提示：在$ http標題中通過blob.type設置Content-Type。 POST的默認值是application/json。

來源

2017-06-06 17:47:39 bigless

甚至更好，不要通過devtools做，但讓服務器響應與上傳文件的大小進行比較，並在客戶端進行比較以檢查其是否正常。 – Bergi

你有什麼問題，你知道嗎？客戶沒有發送圖像，或者服務器沒有收到圖像？ –

是的。我們做到了。但我使用https://github.com/danialfarid/ng-file-upload。它爲諸如調整大小，進度等媒體文件提供了一些有用的功能。我們還將大視頻文件分塊爲10M部分，因此第一次是nginx的max_request_body_size降低了我們的請求。然後在後端讀取器（python）的邏輯中出現一個錯誤。但是我們也執行了諸如暫停和恢復之類的事情，所以情況並不是這樣。上面的調試步驟對於所有這些問題都應該是通用的+雙方的日誌總是顯示出什麼問題。 – bigless

嘗試重新安排你的邏輯有點,,你所得到的賽車條件與上傳程序並創建圖像時，他們必須在回調八九不離十回調..

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

的

，如果你想提交的圖像數據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 
    } 
});

心連心，K

來源

2017-06-07 09:40:38

什麼會導致HTML5畫布toBlob創建不完整的圖像？

回答

相關問題