Używam więc map google i otrzymuję obraz, który wygląda tak

<img id="staticMap"
        src="http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap
&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318
&markers=color:red%7Ccolor:red%7Clabel:C%7C40.718217,-73.998284&sensor=false">

Muszę to zapisać. Znalazłem to:

function getBase64FromImageUrl(URL) {
    var img = new Image();
    img.src = URL;
    img.onload = function() {

        var canvas = document.createElement("canvas");
        canvas.width = this.width;
        canvas.height = this.height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0);

        var dataURL = canvas.toDataURL("image/png");

        alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));

    };
}

Ale mam ten problem:

Uncaught SecurityError: Nie udało się wykonać „toDataURL” w „HTMLCanvasElement”: skażone płótna nie mogą być eksportowane.

Szukałem poprawek. Znalazłem tutaj próbkęJak korzystać z CORS ale nadal nie mogę połączyć tych dwóch kawałków kodu, aby to działało. Może robię to w niewłaściwy sposób i istnieje prostszy sposób, aby to zrobić? Próbuję zapisać to zdjęcie, aby móc przenieść dane na mój serwer. Więc może ktoś zrobił coś takiego i wie, jak to zrobić.toDataURL() pracuję tak, jak tego potrzebuję?