画像付きキャンバスにsvgをレンダリング

Question

キャンバスにsvgをレンダリングしています（後でpngとして保存する）。

<image x="10" y="10" xlink:href="data:image/jpeg;base64, ... 

しかしXLINKとしてURLを使用する場合：

var svg = document.getElementById("mysvg"); 
    var svgData = new XMLSerializer().serializeToString(svg); 
    var canvas = <any>document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 

    var img = document.createElement("img"); 
    img.setAttribute("src", "data:image/svg+xml;base64," + btoa(svgData)); 

    img.onload = function() { 
     ctx.drawImage(img, 0, 0); 
     console.log(canvas.toDataURL("image/png")); 
    }; 

これは、base64エンコードされた画像で動作します（

<image x="10" y="10" xlink:href="assets/myimage.png" /> 

Answer 1

：hrefの値は、それがキャンバスに画像をレンダリングしていません編集:)仕様通りです（ここではGeckoの詳細はありますが、仕様がスクリプトを禁止するにすぎないにもかかわらず、他のエンジンが同じ選択をしたようです） - https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_as_an_Image）

（元の回答:)汚れたキャンバスの問題がある可能性があります。

ブラウザは、CORSヘッダーで明示的に許可されていない限り、起源（つまり、あるドメインの文書）が別の起源のデータにアクセスできないようにデータをカプセル化するという非常に強力なポリシーを持っています。彼らは他のドメインに要求を行うことができますが、決して結果を読み取ることはできません。これは非常に強力なルールであり、我々が知っているすべてのWebセキュリティの基礎となります。

興味深い結果は、キャンバス（またはビデオのようなキャンバスのようなエンティティ）に別のドメイン（プロトコル/ポート）からの画像が含まれている場合、「汚染された」とマークされて読み返すことができないということです。この「汚染された」ステータスは、キャンバスからキャンバスに持ち越されます。汚れたキャンバスのものを純粋なキャンバスにコピーすると、純粋なキャンバスも汚れてしまいます。

ドキュメントがsvg画像と同じプロトコル/ドメイン/ポートから提供されている場合は、何をしようとするとうまくいくはずです。