0

toDataURLメソッドを使用して、画像を含むキャンバスをどのように保存しますか？テキストと描画はすべて正常に機能しますが、画像の処理方法がわかりません。どんな助けでもいただければ幸いです。ありがとう

私は私の質問を次のように修正しました：

これは、画像が.pngから直接プルされた場合に機能します。ただし、Google Charts APIを呼び出すと、画像がキャンバス上で正しくレンダリングされても、toDataURLが機能しません。GoogleChartsは.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>
4

2 に答える 2

1

まず第一に、私がテストしたとき、あなたのチャートはキャンバス上にレンダリングさえしませんでした。画像が読み込まれるのを待つ必要があります。chart.png画像はキャッシュされているため、おそらく瞬時に読み込まれますが、GoogleChartsAPIによって生成された画像は読み込まれません。これはあなたがすべきことです：

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

それとは別に、SECURITY_ERRブラウザのコンソールでを取得している必要があります。これは、Canvasセキュリティモデルでは、外部URLからの画像をエクスポートできないためです。サーバー側の言語を使用してGoogleCharts画像をサーバーに保存し、そこから読み込む必要があります。

于 2012-12-22T22:45:07.070 に答える
0

HTMLキャンバス要素には、toDataURLキャンバスを表すデータURL画像を返すというメソッドがあります。MDNのドキュメントAPIを確認できます。

具体的には、次のように述べていtoDataURLます。

toDataURL（オプションDOMString型、任意の... args）

戻り値DOMString

データを返します：typeで指定された形式（デフォルトはPNG）で画像の表現を含むURL。

  • キャンバスの高さまたは幅が0の場合、空の文字列を表す「data：」が返されます。

  • 要求されたタイプがimage/pngでなく、戻り値がdata：image / pngで始まる場合、要求されたタイプはサポートされていません。

  • Chromeは画像/ウェブタイプをサポートしています。

  • 要求されたタイプがimage/jpegまたはimage/webpの場合、2番目の引数が0.0から1.0の間であれば、画質を示すものとして扱われます。2番目の引数がそれ以外の場合は、画質のデフォルト値が使用されます。他の引数は無視されます。

そしてそれを使用する方法の例を提供します：

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

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

この例では、img要素のソース属性としてdataURLを使用していますが、任意の操作を実行できます（どこかに保存したり、ajax呼び出しでサーバーに送信したりするなど）。

キャンバスへの描画に関連するほとんどのメソッドは、コンテキストを描画するメソッド（の呼び出しによって取得されるgetContext）ですが、このメソッドは、canvas要素の1つであることに注意してください。

于 2012-12-21T05:12:53.763 に答える