キャンバスをJavaScriptで画像に変換する

Question

キャンバスをJavaScriptで画像に変換したい場合は、canvas.toDataURL("image/png");を入力するとエラーSecurityError: The operation is insecureが返されます。このprobmenを解決するために私を助けてください。

ありがとうございます。

Answer 1

あなたは正しい考えを持っている、そしてそれは、次のような非常に単純な例で動作します：

var can = document.getElementById('canvas1'); 
var ctx = can.getContext('2d'); 

ctx.fillRect(50,50,50,50); 

var img = new Image(); 
img.src = can.toDataURL(); 
document.body.appendChild(img); 

http://jsfiddle.net/simonsarris/vgmFN/

をしかし、あなたはあなたのキャンバスを「汚す」している場合、それが問題となります。これは、キャンバスに異なる原点からのイメージを描画することによって行われます。たとえば、キャンバスがwww.example.comでホストされていて、www.wikipedia.orgの画像を使用している場合、キャンバスのorigin-cleanフラグは内部でfalseに設定されます。原点クリーンフラグがfalseに設定されると

は、あなたは、もはやドメイン、プロトコル、およびポートが一致した場合に技術的には、画像が同じ起源である toDataURLまたは

---

getImageData呼び出すことが許可されていません。

---

ローカルで作業している場合（file：//）、描画されたイメージはフラグをオフにします。これによりデバッグが煩わしいものになりますが、Chromeではフラグ--allow-file-access-from-filesで開始することができます。

Answer 2

これは私のためにこの答えで

//after creating your plot do 
var imgData = $('#chart1').jqplotToImageStr({}); // given the div id of your plot, get the img data 
var imgElem = $('<img/>').attr('src',imgData); // create an img and add the data to it 
$('#imgChart1').append(imgElem);​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ //