Impossible to modify fetched EMBY images

[VicMoore 560]

I can not modify images fetched from EMBY.  I get the following message:

IIs there a way that I can receive an image from EMBY that I can add to a canvas and make modifications to it and then copy it from the canvas and send it back to EMBY?

Vic

PS I have tried endless CORS work arounds and none worked. 

 

 

[Luke 37100]

I don't have the answer as I haven't tested this before, but you probably need to configure the canvas, or pull down the contents of the image separately using a fetch and then pass teh result to the canvas.

[VicMoore 560]

Yes Luke, I thought that would work also, but it doesn't work.  The canvas is still tainted.   I need a way to tell the EMBY server that I can be trusted.  The signon should be enough authority.  Is this possible through the API?  Or could an addition to the API be made?

Vic

[Luke 37100]

This is nothing related to the Emby Server api. It is about configuring your client-side code properly for cors.

Put it this way, our hosted web app also runs on a different domain (app.emby.media), and it makes cross-origin requests to emby server, so if it can do it, then your code should be able to as well.

[roaku 795]

@VicMoore

Have you looked into the options described here?

Quote

To begin downloading the image, we create a new HTMLImageElement object by using the Image() constructor. The image is then configured to allow cross-origin downloading by setting its crossOrigin attribute to "Anonymous" (that is, allow non-authenticated downloading of the image cross-origin).

https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

 

https://stackoverflow.com/questions/35020259/why-cors-on-images-with-html-canvas

[softworkz 3338]

4 hours ago, VicMoore said:

I can not modify images fetched from EMBY.  I get the following message:

This will always fail as long as your script files are sourced from a file:// URL.

You need to run a local web server for whatever you're developing here.

[Cheesegeezer 3087]

4 hours ago, VicMoore said:

I can not modify images fetched from EMBY.  I get the following message:

IIs there a way that I can receive an image from EMBY that I can add to a canvas and make modifications to it and then copy it from the canvas and send it back to EMBY?

Vic

PS I have tried endless CORS work arounds and none worked. 

 

 

I do this on the fly in JS, but as softworkz says you need to retrieve http:// not file://. Now whether you retrieve the image tag, store it, manipulate and then create a new url for the edited image, thats the only way it will work thru js. As web pages are insecure and access to files create vulnerabilities.

you could use the appstorage facility in the ApiClient and cache them save them etc, this would then allow direct access because of the power of NodeJS which the js client is built on in emby and the security allows for this.

[softworkz 3338]

3 minutes ago, Cheesegeezer said:

because of the power of NodeJS which the js client is built on in emby

The Emby client has nothing to do with NodeJS. 

[VicMoore 560]

Luke, I have written in JS my own Web App for viewing Emby content.  Like your Web App it can fetch and display images from Emby with no problem.  Neither app can modify the contents of these images without getting the tainted canvas error. For example, cropping the image to make another image. I do believe that the problem is CORS related, but I don't know how to change how I fetch images from the Emby API to mitigate the CORS problem. I have tried countless header changes with no success. I know I can resolve the problem by making a simple node.js proxy server. 

Vic

[softworkz 3338]

It might(!) work when accessing the Emby server via https. I have some vague memory that there's a difference between access https (rather than http) resources in a local (file://) context.

Another way you could try is to load the image by fetching it as a Blob and then create a bitmapImage from it. Then draw onto the canvas. Similar to this:

fetch(myRequest)
  .then((response) => response.blob())
  .then((myBlob) => {
    const image = createImageBitmap(myBlob);
    canvasRenderingContext2D.drawImage(image, 0, 0);
  });

 

[VicMoore 560]

Softworkz, we think alike.  I am writing the code now to test your theory.

Vic

[VicMoore 560]

Softworkz, your idea worked. I tested it with the code below.  It extracted data from the canvas without causing a tainted canvas error.  Thanks so much for the help.

Vic

fetchData();

 

        async function fetchData() {

            const res = await fetch(image_url);

            const contentType = res.headers.get('Content-Type');

            const raw = await res.blob();

 

            const image = await createImageBitmap(raw);

           

            ctx.drawImage(image, 0, 0, myCanvas.width, myCanvas.height);

            console.log("===============================================");

 

            let cropImg = ctx.getImageData(0, 0, 100, 100);

        };

[softworkz 3338]

14 minutes ago, VicMoore said:

Thanks so much for the help.

You're welcome!