VicMoore 573 Posted January 18, 2023 Share Posted January 18, 2023 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. Link to comment Share on other sites More sharing options...
Luke 37272 Posted January 18, 2023 Share Posted January 18, 2023 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. Link to comment Share on other sites More sharing options...
VicMoore 573 Posted January 18, 2023 Author Share Posted January 18, 2023 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 Link to comment Share on other sites More sharing options...
Luke 37272 Posted January 18, 2023 Share Posted January 18, 2023 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. Link to comment Share on other sites More sharing options...
roaku 797 Posted January 18, 2023 Share Posted January 18, 2023 @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 Link to comment Share on other sites More sharing options...
softworkz 3350 Posted January 18, 2023 Share Posted January 18, 2023 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. 1 Link to comment Share on other sites More sharing options...
Cheesegeezer 3089 Posted January 18, 2023 Share Posted January 18, 2023 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. Link to comment Share on other sites More sharing options...
softworkz 3350 Posted January 18, 2023 Share Posted January 18, 2023 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. Link to comment Share on other sites More sharing options...
VicMoore 573 Posted January 19, 2023 Author Share Posted January 19, 2023 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 Link to comment Share on other sites More sharing options...
Solution softworkz 3350 Posted January 19, 2023 Solution Share Posted January 19, 2023 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); }); Link to comment Share on other sites More sharing options...
VicMoore 573 Posted January 19, 2023 Author Share Posted January 19, 2023 Softworkz, we think alike. I am writing the code now to test your theory. Vic Link to comment Share on other sites More sharing options...
VicMoore 573 Posted January 19, 2023 Author Share Posted January 19, 2023 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); }; 1 Link to comment Share on other sites More sharing options...
softworkz 3350 Posted January 19, 2023 Share Posted January 19, 2023 14 minutes ago, VicMoore said: Thanks so much for the help. You're welcome! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now