通過AJAX崩潰發送畫布ImageData Google Chrome

如果我創建一個大的Canvas並向其添加數據（比如1024x768），那麼嘗試通過AJAX將它的imagedata發佈到PHP文件中（爲了將它保存到文件中），該選項卡在Google Chrome中崩潰。通過AJAX崩潰發送畫布ImageData Google Chrome

在Firefox中，標籤本身不會崩潰，但PHP文件似乎已經被調用，沒有POST變量。

這是一個太大的任務嘗試，或者我做錯了什麼？我意識到涉及到很多數據。

來源

2011-08-24 Jim

你能提供一些代碼嗎？我主要關心你如何將數據傳遞給服務器。 –

我知道這是一個老問題。但我堅持着同樣的問題。這一切都在崩潰，你找到了解決辦法嗎？謝謝。 – saulob

我相信最後我制定了一個替代解決方案，可能涉及將字節保存到FE中的本地FS，然後上載保存的文件。不過這已經有一段時間了，所以我的記憶有些模糊，對不起。 – Jim

有類似的問題，我發現toDataURL（）字符串太長，我的Web服務器無法處理，這是一個suhosin設置，我無法改變。通過測試canvas.toDataURL（）。length，我發現突破點約爲950,000個字符。我做了一個測試toDataURL字符串長度的函數，如果它超過900,000，它會調整大小，直到它達到服務器可以處理的大小。

很明顯，結果是比原來的圖像小一些，但它適用於我的目的。希望它有幫助：

/*Make sure origImg is a global variable, the first parameter 
you are sending to the function is an image object and the first size 
parameter is 100*/ 

var origImg = new Image(); 
origImg.src = canvas.toDataURL(); 

var canvasDataForServer = makeSmallCanvas(origImg,100); 

function makeSmallCanvas(orig,size) { 
    var img = orig; 
    img.width = img.width * (size/100); 
    img.height = img.height * (size/100); 

    var smallCanvas = document.createElement("canvas"); 
    smallCanvas.width = img.width; 
    smallCanvas.height = img.height; 
    sctx = smallCanvas.getContext('2d'); 
    sctx.drawImage(img,0,0,img.width,img.height); 

    var retStr = smallCanvas.toDataURL(); 
    if(retStr.length < 900000) { 
    return retStr; 
    } else { 
    return makeSmallCanvas(origImg,size-1); 
    } 
}

來源

2012-02-16 20:54:54 Drew

這個解決方案對我來說不起作用:(還是會得到很大的圖像，而且如果我減少了長度，那麼這個函數就會停止工作。 – saulob

通過AJAX崩潰發送畫布ImageData Google Chrome

回答

相關問題