jquery - jquery.exif.js - canvas.toDataURL() からの exif データの解析 - アクセス制御エラー

Question

ここにスクープがあります：

ASP.NET アプリケーション。

私はプラグインを使用しています - jquery.exif.js

プラグインと同様に - jQuery-File-Upload

ファイルを jQueryFileUploader にロードすると、このファイルをアップロード用に送信する前に、exif データを取得する必要があります。

jQueryFileUpload は画像をキャンバスにレンダリングし、それをプラグイン経由で exif データを取得するために画像に変換します。

$('.my-img').live('click', function () {
    var canvas = document.getElementById($(this).attr('id'));
    var img = new Image();
    img.src = canvas.toDataURL();

    $(img).exifLoad(function () {
        alert($(img).exifPretty());
    });
});

画像の URL は次のようになります。

'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA7CAYAAADsIg00AAAgAElEQVR....'

プラグインがこのメソッドを実行すると:

function sendRequest(strURL, fncCallback, fncError, aRange, bAcceptRanges, iFileSize) {
        var oHTTP = createRequest();
        if (oHTTP) {

            var iDataOffset = 0;
            if (aRange && !bAcceptRanges) {
                iDataOffset = aRange[0];
            }
            var iDataLen = 0;
            if (aRange) {
                iDataLen = aRange[1] - aRange[0] + 1;
            }

            if (fncCallback) {
                if (typeof (oHTTP.onload) != "undefined") {
                    oHTTP.onload = function () {

                        if (oHTTP.status == "200" || oHTTP.status == "206" || oHTTP.status == "0") {
                            this.binaryResponse = new BinaryFile(this.responseText, iDataOffset, iDataLen);
                            this.fileSize = iFileSize || this.getResponseHeader("Content-Length");
                            fncCallback(this);
                        } else {
                            if (fncError) fncError();
                        }
                        oHTTP = null;
                    };
                } else {
                    oHTTP.onreadystatechange = function () {
                        if (oHTTP.readyState == 4) {
                            if (oHTTP.status == "200" || oHTTP.status == "206" || oHTTP.status == "0") {
                                this.binaryResponse = new BinaryFile(oHTTP.responseBody, iDataOffset, iDataLen);
                                this.fileSize = iFileSize || this.getResponseHeader("Content-Length");
                                fncCallback(this);
                            } else {
                                if (fncError) fncError();
                            }
                            oHTTP = null;
                        }
                    };
                }
            }
            oHTTP.open("GET", strURL, true);

            if (oHTTP.overrideMimeType) oHTTP.overrideMimeType('text/plain; charset=x-user-defined');

            if (aRange && bAcceptRanges) {
                oHTTP.setRequestHeader("Range", "bytes=" + aRange[0] + "-" + aRange[1]);
            }

            oHTTP.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 1970 00:00:00 GMT");

            oHTTP.send(null);
        } else {
            if (fncError) fncError();
        }
    }

コンソールに次のエラーが表示され、GET が失敗します。

'XMLHttpRequest はデータを読み込めません:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA7CAYAAADsIg00AAAgAElEQ…OqEqrkq7RcS3YLfHz3I+/BUMHzeC0Ir2HtuqJC4jFO9/8Bv2hF1W9nFmYAAAAASUVORK5CYII=. Origin http://mysite.comは Access-Control-Allow-Origin で許可されていません。

Chrome Dev Tools のネットワーク タブには、これが表示されます。

Global.asax にもこれがあります。

private void EnableCrossDomainAjaxCall()
    {
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");

        if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
        {
            HttpContext.Current.Response.AddHeader("_CACHE-Control", "no-_CACHE");
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST");
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
            HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
            HttpContext.Current.Response.End();
        }
    }

一般的に言えば、Global.asax のコードは常に、アクセス制御の起点の問題を解決してくれました。しかし、今回は何かが違う。

これを複雑にしすぎる場合が常にあります。

プロジェクトの手順:

1. ユーザーが画像を選択 - exif データを取得
2. フォーム送信を介して画像をハンドラーに送信し、exif に必要ないくつかのパラメーターを使用してサーバーにアップロードします

すべての助けに感謝します！どうもありがとう！:)

デイブ