7

私は Google Chrome 拡張機能に取り組んでおり、拡張機能にバンドルされている画像をキャンバスに読み込もうとしています。

var canvas = document.createElement('canvas');
canvas.width = 470;
canvas.height = 470;
var context = canvas.getContext('2d');
var image = new Image();
image.addEventListener('load', function(){
     //process
});
image.src = chrome.extension.getURL("asset/gotcha.png");

コンテンツ スクリプトでコードを実行すると、次のようになります。

Unable to get image data from canvas because the canvas has been  tainted by 
cross-origin data.

これを回避する方法はありますか？これらの問題なしに、画像、オーディオ、ビデオ、およびフラッシュをターゲット サイトに直接埋め込むことができました。リソースは、マニフェスト ファイルの web_accessible_resources の下にリストされています。

4

3 に答える 3

6

ExpertSystem のアプローチに基づいて、簡単な解決策を得ました。

セキュリティ例外をスローせずにキャンバスを作成できるバックグラウンド ページの JavaScript の最初の部分。

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.message == "convert_image_url_to_data_url") {
      var canvas = document.createElement("canvas");
      var img = new Image();
      img.addEventListener("load", function() {
        canvas.getContext("2d").drawImage(img, 0, 0);
        sendResponse({data: canvas.toDataURL()}); 
      });
      img.src = request.url;
      return true; // Required for async sendResponse()
    }
  }
)

コンテンツ スクリプトの 2 番目の部分:

//@success is the callback
function local_url_to_data_url(url, success) {  
  chrome.runtime.sendMessage(
    {message: "convert_image_url_to_data_url", url: url}, 
    function(response) {success(response.data)}
  );    
}
于 2013-11-11T12:53:00.160 に答える
2

web_accessible_resourcesマニフェスト ファイルの最上位にあるプロパティにアセットを追加してみてください。

    "web_accessible_resources": ["asset/gotcha.png"],

まだ行っていない場合。

于 2013-11-10T20:57:35.133 に答える