javascript - JavaScript を使用してキャンバスを画像に変換する

Question

キャンバスを JavaScript で画像に変換したいのですが、実行しようとするcanvas.toDataURL("image/png"); と次のエラーが表示されます。

SecurityError: 操作は安全ではありません

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内部的に設定されます。

origin-clean フラグが に設定されると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);​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ //