CORS Permissions - Picasa API

Question

I'm trying to get photos using Picasa API, to use them in a HTML5 canvas element.

After I receive this photo, I realize that the header does not have the Access-Control-Allow-Origin. Because of that, I cannot paint the image in a canvas element by using the function toDataURL.

It is some way that I can configure the Picasa API to return the CORS permissions?

var picasaScope = 'https://photos.googleapis.com/data';
var picasatoken = '';
var inc = 0;

$(window).load(function() {
 checkPicasaStatus();
}); 

function checkPicasaStatus() {
    gapi.auth.authorize({ client_id: "132235104364-ivqhbbo6bsiq6pbp5n441rulqncittr9.apps.googleusercontent.com", scope: picasaScope, immediate: true, cookie_policy: 'single_host_origin' }, picasaAuthResult);
}

function loginPicasa() {
    picasatoken = '';
    gapi.auth.authorize({ client_id: "132235104364-ivqhbbo6bsiq6pbp5n441rulqncittr9.apps.googleusercontent.com", scope: picasaScope, immediate: false, cookie_policy: 'single_host_origin' }, picasaAuthResult);
}

function picasaAuthResult(authResult) {
    if (authResult && !authResult.error) {
        picasatoken = authResult.access_token;
        getPicasaAlbums();
    }
    else
        loginPicasa();
}

function getPicasaAlbums() {
    $.ajax({
        url: 'https://photos.googleapis.com/data/feed/api/user/default?alt=json&access=all',
        data: {
            access_token: picasatoken
        },
        type: 'GET',
        crossDomain: true,
        dataType: 'jsonp',
        error: function (textStatus, errorThrown) {
            console.log("error 1");
        },
        success: function (data) {
            if (data && data.feed) {
                if (data.feed.entry && (data.feed.entry.length > 0)) {
                    var values = "";
                    for (var i = 0; i < data.feed.entry.length; i++) {
                        var entry = data.feed.entry[i],
       albumid = entry.gphoto$id.$t,
       title = entry.title.$t,
       link = entry.link[0].href;

                        values += "<option data-id='" + albumid + "' data-link='" + link + "'>" + title + "</option>";
                    }
     
     $("#options").append("<select onchange = 'getPicasaPhotosAlbum()'>" + values + " </select>");

                    getPicasaPhotosAlbum();
                }
                else 
     console.log("error 2");
            }
            else 
    console.log("error 3");
        }
    });
}

function getPicasaPhotosAlbum() {
    var album = $("#options").find('option:selected').data();

    $.ajax({
        url: album.link,
        data: {
            access_token: picasatoken,
            imgmax: 'd',
            'max-results': 10000
        },
        type: 'GET',
        crossDomain: true,
        dataType: 'jsonp',
        error: function (textStatus, errorThrown) {
            console.log('get Picasa Photos Album Error');
        },
        success: function (result) {
            if (result && result.feed) {
                if (result.feed.entry && (result.feed.entry.length > 0))
                    createPicasaPhotosAlbums(result.feed.entry);
                else
                    createPicasaPhotosAlbums([]);
            }
            else 
    console.log('get Picasa Photos Album Error');
        }
    });
}

function createPicasaPhotosAlbums(images) {
    var i = 0;

    for (i = 0; i < images.length; i++) {
        var pictures = images[i].media$group.media$content;
        var thumbnails = images[i].media$group.media$thumbnail;

        var maxSize = 0;
        var thumbSize = 500;
        var j = 0;
        var t = 0;

        var _thumb = thumbnails[0].url;
        var _url = pictures[0].url;
        var _width = pictures[0].width;
        var _height = pictures[0].height;
        var _id = images[i].gphoto$id.$t;

        if (pictures.length > 1) {
            for (j = 0; j < pictures.length; j++) {
                var obj = pictures[j];
                if (obj.width > maxSize) {
                    _url = obj.url;
                    _width = obj.width;
                    _height = obj.height;
                    maxSize = obj.width;
                }
            }
        }

        if (thumbnails.length > 1) {
            for (t = 0; t < thumbnails.length; t++) {
                var obj = thumbnails[t];
                if (obj.width > 100 && obj.width < thumbSize) {
                    _thumb = obj.url;
                    thumbSize = obj.width;
                }
            }
        }

        console.log("break");
  
  var image = new Image();
  image.onload = function() {
   $("#back").append('<div style="background-image: url(' + image.src + ')" />');
   var c = document.getElementById("myCanvas");
   var ctx = c.getContext("2d");
   ctx.drawImage(image, inc, inc);
   inc += 10;
   var a = c.toDataURL();
   console.log("success");
  };
  image.src = pictures[0].url;
  image.crossOrigin="anonymous";
    }
}

#back {
    float: left;
    width: 200px;
    height: 200px;
}

#back div {
 float: left;
    width: 200px;
    height: 200px;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script>
<script src="https://apis.google.com/js/client.js" type="text/javascript"></script>

<div id="options"></div>
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<div id="back">

</div>

---

*You can try in the following link: http://sunpics.demo.adigitalbook.com/picasa.html

If you want you can try with this credentials: stack.over.demo@gmail.com demodemo

---

Related Posts:

POST request to Picasa API - In my case, I don't even receive the Access-Control-Allow-Origin in the photos.

Does Picasa api allow CORS Post? - In my case, I don't even receive the Access-Control-Allow-Origin in the photos.

---

Thank you.