1

Canvas (別のドメインの画像を含む) を Image に変換できるようにしたいと考えています。これには、CORS対応の画像を使用する必要があることを理解しました（キャンバスに.toDataURL（）を使用できるようにするため）。問題は、CORS 対応のイメージを作成する方法です。次のコードは、最初の行でエラーをスローします: Cross-Origin Resource Sharing ポリシーによって拒否された Cross-Origin image load. 

<html>
<body>
<input type="button" id="button" value="convert" onclick="onClick()" /></br>
<img id="output" />

<script>
    var source = "https://www.gravatar.com/avatar/7b67c827ee1671ba3b43f4aebf6794fb?s=128&d=identicon&r=PG";

    onClick = function () {
        var img = document.createElement('img');

        img.onload = function (e) {
            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            var url = canvas.toDataURL();
            var output = document.getElementById("output");
            output.src = url;
        };

        img.crossOrigin = 'anonymous';
        img.src = source;
    };
</script>
</body>
</html>
4

1 に答える 1

3

こんにちは、IEが必要な場合は互換性を確認することをお勧めします。このアプローチがうまくいくかどうかはわかりません。

イメージを有効にする CORS のヘルプについては、こちらを参照してください。 https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

基本的に、CORS ヘッダーは画像の提供元の Web サーバーに追加されるため、これをある程度制御する必要があります。

私はいつもIEを必要としていたので、私が見つけた最も簡単な解決策は、サーバー側のプロキシをセットアップして、画像がドメインから来ているかのように提供することです。

HTH

于 2013-12-23T13:42:06.070 に答える