i am trying to use a local image for loadTexture in Three.js but i get the following error:
Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at .... may not be loaded.
I have a java application running on apache tomcat (locally) which serves my image with the following url: http://localhost:8084/sve/img/wood-texture.jpg.
Here is my javascript code where i try to load the image:
var woodTexture = new THREE.ImageUtils.loadTexture('http://localhost:8084/sve/img/wood-texture.jpg');
I am using Google Chrome (Version 40.0.2214.111 m) to run my Three.js program. I also try to start chrome like this: chrome.exe --allow-file-access-from-files. But i get the same error.
Does anyone have any solution for this?
It's probably easiest to make sure the texture is served by the same server as your three.js app.
If you still need it to come from another server (the Java app on the other port in your example) you need to make the Java app set some CORS headers.
For example: "Access-Control-Allow-Origin: *"
See https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS for more info.
Related
I'm developing a Progressive Web App which uses a .manifest file to cache all files on the client. I modified the socket.io chat example which is found here:
https://github.com/socketio/chat-example
my modifications can be found here:
https://github.com/TennisVisuals/socket.io.manifest.errors
The first change in the client code is:
external resources (jquery and socket.io client libraries) are accessed locally rather than via remote URLs.
Everything works as expected.
But with the second change:
<html> is replaced with <html manifest="index.manifest">
The application fails, giving this error in the Javascript console:
http://localhost:3000/socket.io/?EIO=3&transport=polling&t=Lij1LRo net::ERR_FAILED
Initial Fix
I've been able to make it work locally by adding the following lines:
enter var connectionOptions = {
"force new connection" : true,
"reconnectionAttempts": "Infinity",
"timeout" : 10000,
};
var socket = io(connectionOptions);
Cloudflare and Nginx
But I'm now seeing stranger behavior when I run with Cloudflare and Nginx.
Without the manifest declaration I get an error, but everything still works!
socket.io-1.7.2.js:7370 WebSocket connection to 'wss://hiveeye.net/socket.io/?EIO=3&transport=websocket&sid=rM2LKvCGJwaFx7RrAAAf' failed: Error during WebSocket handshake: Unexpected response code: 400
after adding the manifest declaration it works exactly once and then fails with the following errors:
socket.io-1.7.2.js:4948 GET https://hiveeye.net/socket.io/?EIO=3&transport=polling&t=Lik5SC5&sid=rM2LKvCGJwaFx7RrAAAf net::ERR_FAILED
GET https://hiveeye.net/socket.io/?EIO=3&transport=polling&t=Lik5STN net::ERR_FAILED
GET https://hiveeye.net/socket.io/?EIO=3&transport=polling&t=Lik5STN net::ERR_FAILED
I suspect that if I can get the initial error to go away when running without the manifest, that may do the trick... but I've been unable to find anything to help me resolve that issue...
Ok, this was really simple once I found out how to ask the right question
Adding:
NETWORK:
*
at the bottom of the manifest file made everything work.
Yes, the "Application Cache" is deprecated:
https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache
but I still wanted to make it work!!
I am rather familiar with making games using the HTML5 <canvas> tag. When I try to run my games from Komodo Edit 9 it works perfectly.
However, when I try to upload my game to ANY web hosting service, it never works properly. Like the following garridpunching.neocities.org.
The problem is that once the canvas renders, everything appears for a split second before disappearing instantly, leaving only a blank black canvas.
Google debugger returns the following error for all five hostings I tried: Uncaught InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.
The error is thrown on the line ctx.drawImage(sprite.cursor, cursor.x, cursor.y, 40, 40);, which works perfectly when I run the html file directly from localhost.
What does this mean and how do I fix it? Thanks in advance.
This could be related to an img not loading properly. Check the paths to your images, maybe you didn't copy some of them when deploying to the hosting service of you have a path somewhere that works on your local computer but not on the remote site.
Also: Do you load all your images from the same domain as the js? If this isn't the case it could also be triggered by a Cross-Origin Resource Sharing (CORS) issue.
This could be because you are calling step, i.e. beginning the 'game' before all the images have loaded. The solution would be to wait for sprite's images to be loaded before calling step.
load();
window.onload = step; // may need inline .onload() calls on sprite's imgs
The reason this wouldn't be happening locally is because it will load the requested images instantly, as it doesn't have to download them or anything like that.
This is driving me nuts. I am trying to get a skybox working with images I got from the internet. My code:
As global variables:
var path = "file:///C:/Users/Tyler/Desktop/ComS_336_workspace/";
var imageNames = [
path + "meadow_bk.jpg",
path + "meadow_ft.jpg",
path + "meadow_up.jpg",
path + "meadow_dn.jpg",
path + "meadow_rt.jpg",
path + "meadow_lf.jpg"
];
In the main function:
// load the six images
//THREE.ImageUtils.crossOrigin = "Anonymous";
var ourCubeMap = THREE.ImageUtils.loadTextureCube(imageNames);
But get this error:
DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:///C:/Users/Tyler/Desktop/ComS_336_workspace/meadow_ft.jpg may not be loaded.
And when I add the THREE.ImageUtils.crossOrigin = "Anonymous"; I get this error:
Image from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy: Invalid response. Origin 'null' is therefore not allowed access.
I saw some posts saying to run chrome with --allow-files-access-from-files or whatever, but don't want to risk any security issues. Then I saw others say to put images on webserver? This I had absolutely no idea how to do and why must this be that complicated??
My html and js files are in the same folder (ComS_336_workspace) as my images.
I am just really needing help on what to do and if I must do a webserver, how do I put my images on them and set the path to my images? That I don't get.
To solve this problem you need either save remote files to your site or use some proxy script from your site (PHP in example) to get images through your site.
Anyway you need a fully qualified domain name to get rid of CORS-compliant errors. Loading webgl and images from file:/// will not work.
What are you using to edit your code? If you are trying to run the page from your desktop for testing purposes then I would recommend brackets.io.
Its great, free, and will get you around the CORS issue as you build your code up.
I have two Kineticjs canvases and when trying to create an image in one canvas from the other canvas I get this error after calling toImage() on the canvas with the new image:
Kinetic warning: Unable to get data URL. Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported
I am pretty sure the reason why I am getting this error is because the "toImage()
method requires that the image is hosted on a web server with the same domain as the code executing it." How can I get around this warning so that I can create objects from one canvas and add them to another?
The app I am creating will run locally and will never run online so I don't have to worry about security issues. Also I read around that I can enable cross origin resource sharing but that seems a little complex and over the top since they require the setting up of a web server I think.
So is there any trick I can do to make one canvas able to create an image in another canvas for a Chrome kineticjs web app? And then being able to successfully call toImage()?
Here is how I am creating the image in the canvas:
var folderImage = new Image();
//folderImage.crossOrigin="anonymous"; // gives me file error if unchecked
folderImage.onload = function() {
var folderPic = new Kinetic.Image({
x: 0,
y: 0,
image: folderImage,
width: sideLen,
height: sideLen
});
subFolderGroup.add(folderPic);
subTextGroup.moveToTop();
mainBody4Dynamic.draw();
};
folderImage.src = 'assets/images/folder.png';
And when I call toImage() in the other layer all I am calling is the layer.toImage()
The browser treats the user's local drive as other-domain. That's good because you don't want your browser "getting friendly" with your banking records on your hard drive.
This means running locally with local images will taint the canvas (a CORS violation).
The simplest workaround is to install a web-server on your local machine and host the web-page plus images on a single domain. (=== automatic CORS compliance). PHP and IIS both work well on a dev machine.
Another workaround is complying with CORS restrictions by hosting your images on an internet imaging host that has configured its server to deliver images in a CORS compliant manor. Then all you have to do is add myImage.crossOrigin="anonymous". I believe dropbox.com does this--or they used to.
While in development, it sometimes works to put both your .html and your images on the desktop.
Basically, this plugin is responsible for this really neat effect:
http://www.blurjs.com/
But when I try to implement it on my site in chrome I get this error message in my console:
Unable to get image data from canvas because the canvas has been tainted by cross-origin
data. demo.html:1
Uncaught Error: unable to access image data: Error: unable to access local image data:
ReferenceError: netscape is not defined
Implementation below:
$('.navbar').blurjs({
source: 'body',
overlay: 'rgba(0,100,100,0.1)'
});
What's really annoying is the same error pops up in his example file! So what's going on? Tested in chrome and opera and firefox. Exactly the same errors in his example file.
Same error in a jsfiddle:
http://jsfiddle.net/8QeAQ/7/
I even downloaded his whole site, and though it works online, locally the identical files get this error. Very strange. Very disappointing, looked like a great library. Be very grateful if someone could find a fix.
This images below show the untouched files, forked straight from github, so what's going on?
Try uploading it to a remote computer. It sounds like the error is to do with mixing origins (specifically, the image is from a different origin than the html/javascript). That can be a problem when testing locally also, because browsers often don't trust local stuff either.
I think this is because the Cross-domain issues on your page with the image files.
Blur.js use the getImageData() method to get image data. getImageData() method requires that the image is hosted on a web server with the same domain as the code executing it.
For example, the page from a.example.com, will not be allowed to use getImageData() method to get the data of image which references from other domain such as b.example.com, even they pointed to the same web server;
Just before tempImg.src = formattedSource; add tempImg.crossOrigin = '';///=anonymous this will solve the problem!
tempImg.crossOrigin = '';///=anonymous
tempImg.src = formattedSource;
Blur.js is written in a way which does not allow it to access local files on your system if you launch your JavaScript locally (file//:). It only works if your script and image files are on a web server (http//:).
You can use WampServer to create a localhost server and test your website on your machine. Just install it, place your files into its www directory, and open http//:localhost/"yourFile".