jquery.exif.js - Parsing exif data from canvas.toDataURL() - access-control-error

Question

Ok here's the scoop:

ASP.NET application.

I am using the plugin - jquery.exif.js

As well as the plugin - jQuery-File-Upload

When I load a file into the jQueryFileUploader I then need to get its exif data prior to sending this file for upload.

The jQueryFileUpload renders the image into a canvas, which I then convert to an image in order to get it's exif data via the plugin:

$('.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());
    });
});

The image url looks like this:

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

When the plugin runs this method:

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();
        }
    }

The GET fails with the following error in my console:

'XMLHttpRequest cannot load data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA7CAYAAADsIg00AAAgAElEQ…OqEqrkq7RcS3YLfHz3I+/BUMHzeC0Ir2HtuqJC4jFO9/8Bv2hF1W9nFmYAAAAASUVORK5CYII=. Origin http://mysite.com is not allowed by Access-Control-Allow-Origin.'

The network tab of Chrome Dev Tools shows this .

I also have this in my 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();
        }
    }

Generally speaking, that code in the Global.asax has always resolved access-control-origin problems for me. But this time it's something different.

There is always the case I am making this too complex.

Project steps:

user selects image - get exif data
send image to handler, via form submit, for upload to server with some needed params to do with exif

I appreciate any and all help! Thanks a lot! :)

Dave

jquery.exif.js - Parsing exif data from canvas.toDataURL() - access-control-error

0 Answers0