3

これは以前によく尋ねられたことを知っていますが、3日間これを修正しようとした後、明らかに助けが必要です.

しばらくの間、問題が発生しました。私はこのようなことをしようとしています(これは単純化されたコードです):

var media = Array();
$(document).ready(function(){
img = new Image();
img.crossOrigin = "*";
img.src = "http://domain.com/pics/picture.svg";
img.width = 200;
img.height = 300;
img.onload = function(){

    media['test'] = img;

    ///var layer = img;
    $.jCanvas({
        fromCenter: false
    });

    $("#collider").drawImage({
        source: media['test'],
        width: 200,
        height: 300,
        x: 0, y: 0,
        click: function(layer){
            alert(layer.eventX);
        }
    });


    var pixelData = document.getElementById("collider").getContext('2d').getImageData(50, 50, 20, 20).data;
    console.log(pixelData);//*/
}

});

問題は、キャンバスが汚染されることです。そのため、ピクセルデータを取得できません。

.htaccess に次のコードを使用して、アクセス制御のオリジン ヘッダーを設定しようとしました。

# with AJAX withCredentials=false (cookies NOT sent)
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, PUT, OPTIONS, PATCH, DELETE"
Header always set Access-Control-Allow-Headers "X-Accept-Charset,X-Accept,Content-Type"

# with AJAX withCredentials=true (cookies sent, SSL allowed...)
SetEnvIfNoCase ORIGIN (.*) ORIGIN=$1
Header always set Access-Control-Allow-Methods "POST, GET, PUT, OPTIONS, PATCH, DELETE"
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Credentials "true"
Header always set Access-Control-Allow-Headers "X-Accept-Charset,X-Accept,Content-Type"

また、画像の URL にアクセスするときにブラウザでヘッダーを確認したところ、機能しているように見えました (すべてのヘッダーは正常に送信されます)。しかし、何らかの形でJavaScriptを介してロードされた場合、そうではありません(ブラウザで検査すると、ヘッダーはまったく送信されません)。そのため、キャンバスが汚染されます

私の質問: 1) 私の .htaccess ファイルで、組織間のデータ共有が許可されないのはなぜですか? 2) HTML、JavaScript、および画像ファイルの両方が同じドメインでホストされているため、クロスオリジン データに問題があるのはなぜですか?

追加情報: サーバー: Ubunthu LTS 12.04、Apache2

EDIT 代わりに、picture.svg を .jpg pic に変更しようとしましたが、すべてが機能するようになったため、含まれている .svg ファイルに問題があるようです。

.svg ファイルでこれを行う方法を知っている人はいますか?

4

2 に答える 2

2

ご指摘の通り。SVG 画像はキャンバスを汚染する可能性があります。SVGファイルに外部リソースがない場合でも（私の場合のように）。

しかし、キャンバスを汚染することなく SVG 形式の機能を引き続き使用できるように、1 つの解決策を見つけました。

canvg ( http://code.google.com/p/canvg/ ) で可能です。そのスクリプトは、CORS を使用して SVG を取得できるとも主張しています (ただし、まだテストしていません)。

これが誰かを助けることを願っています!

コード例

//...prev code
canvg(document.getElementById('collider'), media['test']);

var pixelData = document.getElementById("collider").getContext('2d').getImageData(50, 50, 20, 20).data;
console.log(pixelData);
于 2013-12-15T08:48:02.550 に答える
2

アップデート

SVG ファイルを使用していることを見逃していました。SVG ファイルに外部ソース (CSS、オブジェクト、画像など) への参照が含まれていると、機能しません。SVG 内のすべてをインライン化する必要があります。そうしないと、外部リソースを直接使用するのと同じ状況になりますが、それらは SVG にカプセル化されているため、ブラウザーはより厳密であるため、これらの場合は CORS を使用できません。

これはブラウザのセキュリティ機能であり、SVG に必要なすべてのリソースが確実に組み込まれるようにする以外に、あまり変更することはできません。

于 2013-12-14T15:30:03.973 に答える