存儲包含圖像的HTML5畫布

如何使用toDataURL方法存儲包含圖像的畫布？一切工作正常的文字和繪圖，但我不知道如何處理圖像。任何幫助，將不勝感激。由於存儲包含圖像的HTML5畫布

我已經修改了我的問題如下：

當圖像從.png文件直接拉到這工作。但是，當我調用Google Charts API時，即使圖像在畫布上正確呈現，toDataURL也不起作用。 Google Charts正在返回一個.png。有人有主意嗎？謝謝。

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<script type="text/javascript" charset="utf-8"> 

function test() { 
var c = document.getElementById("drawing-canvas"); 
var cxt = c.getContext("2d"); 

// This doesn't work. 
//var imgsrc = 'http://chart.apis.google.com/chart?cht=tx&chf=bg,s,ffffff&chco=000000& 
chl=a'; 

// This works 
var imgsrc = 'chart.png'; 


var img = new Image(); 
img.src = imgsrc; 
cxt.drawImage(img,0,0); 

} 

function wr() { 
var cc = document.getElementById("drawing-canvas"); 
var url = cc.toDataURL(); 
var newImg = document.createElement("img"); 
newImg.src = url; 
document.body.appendChild(newImg); 
} 
</script> 

</head> 
<body onload = "test();"> 
<canvas id="drawing-canvas" width = "500px" height = "500px" style="background-color: 
#ffffff; border: 2px solid #000000;"> 
Your browser does not support the canvas element. 
</canvas> 
<input type = "button" value = "go" onclick = "wr();"> 
</body> 
</html>

來源

2012-12-21 user1884367

當我在畫布上使用drawImage並且源代碼是.png時，一切正常。當我使用從Google Charts API獲取的圖像時，它會在畫布中正確呈現，但我無法使用toDataURL保存它。 – user1884367

是的，謝謝，這在我將圖像保存在服務器上時起作用。儘管如此，我仍然遇到了緩存問題。我試過img.src =「chart.png'+'？' + Math.random（）;但是drawImage（img，x，y）不起作用，但是當我構造img.src ='chart.png？12345'時它可以工作。 – user1884367

首先，當我測試它時，您的圖表甚至沒有在畫布上呈現。您需要等待圖像加載。您的chart.png圖片可能會在緩存後立即加載，但Google Charts API生成的圖片不會。這是你應該做的：

var img = new Image(); 
img.onload = function() 
{ 
    cxt.drawImage(img,0,0); 
} 
img.src = imgsrc;

除此之外，您必須在瀏覽器的控制檯得到一個SECURITY_ERR。這是因爲the Canvas security model doesn't allow you to export images coming from an external URL。您應該使用服務器端語言將Google圖表圖像保存到您的服務器，然後從那裏加載它。

來源

2012-12-22 22:45:07 jSepia

的HTML 畫布元件有一個稱爲toDataURL方法，即將返回一個表示帆布數據URL的圖像。您可以查看文檔API on the MDN。

具體來說，它說，大約toDataURL：

toDataURL（在可選DOMString類型，在任何參數... args）

回報DOMString

返回一個數據：URL以類型指定的格式包含圖像的表示（默認爲PNG）。

如果畫布的高度或寬度爲0，則返回表示空字符串的「data：」，並返回。

如果請求的類型不是image/png，並且返回的值以data：image/png開頭，則不支持請求的類型。

Chrome支持圖片/網頁類型。

如果請求的類型是image/jpeg或image/webp，則第二個參數（如果在0.0到1.0之間）被視爲指示圖像質量;如果第二個參數是其他參數，則使用圖像質量的默認值。其他參數被忽略。

並提供與例如如何使用它：

function test() { 
    var canvas = document.getElementById("canvas"); 
    var url = canvas.toDataURL(); 

    var newImg = document.createElement("img"); 
    newImg.src = url; 
    document.body.appendChild(newImg); 
}

在這個例子中，我們使用dataURL作爲img元素的來源屬性，但你可以做任何你想要的你它（像存儲在某個地方，或通過ajax調用將它發送到服務器）。

注意大部分涉及在畫布上繪製方法是描繪上下文（通過向getContext呼叫獲得）的方法，而這種方法是最畫布元件之一。

來源

2012-12-21 05:12:53 TonioElGringo

存儲包含圖像的HTML5畫布

回答

相關問題