的drawImage使用HTML5畫布的toDataURL

我現在正在做的是以下幾點：的drawImage使用HTML5畫布的toDataURL

我使用toDataURL方法存儲畫布的狀態，我也想畫它使用的drawImage方法在畫布上。

這裏是一個片段：

var lastState = states[10]; //states is an array that saves all the toDataURL of the canvas 
var permCtx = canvas.getContext('2d'); 
var img = new Image(); 
img.onload=function(){ 
    permCtx.drawImage(img,0,0); 
} 
img.src=lastState;

我收到以下錯誤控制檯：

414（請求URI太大）

有沒有一種方法來繪製圖像在畫布上只使用toDataURL方法？

來源

2011-04-18 fogy

「drawImage」行或另一行出錯了嗎？ – 2011-04-18 02:29:07

（或者你可以給我們國家的內容[10]，所以我們可以看到自己？） – 2011-04-18 02:30:52

我的猜測：也許這是IE8，它有一個已知的32kB的限制。相關：http://stackoverflow.com/questions/695151/data-protocol-url-size-limitations – Phrogz 2011-04-18 02:35:58

您使用的機制應該有效;什麼操作系統/瀏覽器/版本你看到這個錯誤？

無論如何，儘管這應該起作用，但如果您正在構建數據URL並將它們恢復到同一會話中，它並不是最有效的。相反，我會建議創建一個新的非DOM模式來存儲你的狀態，並用它來繪製主畫布：

var states = []; 
function saveState(ctx){ 
    var c = document.createElement('canvas'); 
    c.width = ctx.canvas.width; 
    c.height = ctx.canvas.height; 
    c.getContext('2d').drawImage(ctx.canvas,0,0); 
    states.push(c); 
    return c; 
} 

function restoreState(ctx,idx){ 
    var off = idx==null ? states.pop() : states[idx]; 
    ctx.drawImage(off,0,0); 
}

來源

2011-04-18 02:30:12 Phrogz

的drawImage使用HTML5畫布的toDataURL

回答

相關問題