Failure of CORS when trying to convert an image

Asked

Viewed 39 times

2

I have a variable that returns a url image:

   var imagem = $scope.authentication.user.imagem.toString();

I pass this variable to another method, where I intend to encode for Base64:

 getDataUri(imagem, function (dataUri) {
            logo = dataUri;
            console.log("logo=" + logo);
        });

   function getDataUri(url, cb)
    {
        var image = new Image();
        //image.crossOrigin = 'anonymous';
        image.setAttribute('crossOrigin', 'anonymous');

        image.onload = function () {
            var canvas = document.createElement('canvas');
            canvas.width = this.naturalWidth;
            canvas.height = this.naturalHeight;

            var ctx = canvas.getContext('2d');
            ctx.fillStyle = '#fff'; 
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            canvas.getContext('2d').drawImage(this, 0, 0);

            cb(canvas.toDataURL('image/jpeg'));
        };

        image.src = url;
    }

Only this function returns me the following error:

Access to Image at 'https://URL-DA-VARIAVEL/7367506d-9615-4131-8e13-9c13e549e48d.jpeg' from origin 'http://localhost:15495' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:15495' is therefore not allowed access.

A CORS error. But in my job getDataUri, I’m defining: image.setAttribute('crossOrigin', 'anonymous');

I need to hash the converted image in order to insert it into a PDF.

  • Very strange behavior. Maybe it’s cache?

  • @Neither is Andrewribeiro. I even considered this hypothesis. =\

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.