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".
Related
I am working on a website in which I want to load web pages through Jquery's .load function as a part of an overlay type of navigation. I use Brackets to code and its Live Preview function has proven to be very useful.
While developing I already noticed that the load function only worked in the Live Preview mode, and not if I open the page in a regular browser window, so I assumed that Live Preview emulates a server in some way and that's why it worked.
However, when I uploaded my files to the server through the MODx content management system that I use, the function seems to have stopped working.
For the sake of completion, here's the code snippet that I use:
{$( ".div" ).load( "page.html" );
Can anybody tell me why this is happening? I've read some stuff about security protocol issues with .load, but since all files are on the same server I don't think that's the issue. Don't take my word for it, though. I'm a designer first and a developer... third or fourth, probably.
EDIT: The console gives me a 404 error.
Thank you for taking the time to read this!
Kind regards
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.
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.
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.
This may be too obscure a question, but perhaps someone can spot what I'm doing wrong.
Phono (jquery plugin for javascript/flash-based softphone built on top of Tropo/Voxeo) loads a couple of dependencies from the phono.com servers. Namely,
flensed.js
checkplayer.js
swfobject.js
phono.audio.swf
I would very much like to avoid loading these dependencies from an external server (for obvious reasons) and going by this thread on their forums (which I can't register for because it appears every possible username has been "taken") , it should be possible to host them locally.
Here's a prettified source for the main jquery plugin. Maybe I'm just bad at looking, but I could not find a commented, un-minified version either in their full SDK or on github.
So after changing
base_path: "http://s.phono.com/deps/flensed/1.0/"
and
swf: "http://s.phono.com/releases/" + Phono.version + "/plugins/audio/phono.audio.swf"
... all dependencies seem to load just fine, phono successfully grabs a session ID and chats by SIP appear to be working. When I try to dial out or call the session id/SIP, however, I get a javascript error:
Uncaught TypeError: Cannot call method 'start' of null
referring to line 770 : h.start().
this.$flash.play(g, j); appears to return null or undefined. I suck at javascript and can't figure out why.
EDIT - if anyone would be so adventurous as to try this out, you can just grab their "kitchen sink" demo and slap it up on a server without much hassle.
Okay -- this is ridiculous and I'm an idiot for not catching it sooner.
Flash was trying to load the ringtones off my server at the URL that requires authentication. Unfortunately, flash is not a user with a valid session. Hence, flash was grabbing big handful of nothing. Sorry.
You can download the PhonoSDK and all of the samples (including the kitchen sink demo) and run it on your localhost. Here's the link: http://s.phono.com/releases/PhonoSDK-0.2.zip. It's open source, do you can also fork/contribute to the project as well - https://github.com/phono
I just tried it using Apache on my localhost it worked without editing anything.