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.
Related
I pretty sure this is a easy fix, but I can't put a finger on the error. I'm loading a local JSON file into d3, my application works just fine other than the fact that it won't render my images in my JSON. This only happens when I'm using Chrome. I have set headers server side, I'm currently trying to set the headers on the Image attribute. I think that is where the problem is. Look at the Second Image. If you take a look at the second image you will notice that crossorigin is set to nothing, right? I think thats part of the issue. Let me know if I need to put up any more info. I really want fix this error it's driving me crazy.
I have gone ahead and tried to set the images origin headers, but I'm still having no luck running my application on chrome. setting img cross origin docs
Photo of error in chrome debugger tool
Crossorigin is set to nothing!?
Photo of code block that I think might be the colporate
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".
I have a page that is being continually reloaded, about every 45 seconds. If I disable javascript in the browser, the page stops reloading - so I suspect that some javascript is the culprit. But there's a large amount of it scattered across various .js files, some of them compressed. So I'm having a hard time poring thru the JS source trying to find the culprit.
I'm looking for ideas on how to find the cause - without reading (and understanding) all of the JS source.
I've tried using Break on Next in Firebug. It always breaks inside of jquery.min.js - but there's no history in the stack, so I can't tell who called jQuery.
The web page is http://www.sarasotasailingsquadron.org/
Other ideas?
Alright, so I have found part of your problem. I can't quite find where it originates, but maybe this will help you.
I haven't been able to completely reproduce your issue under Chrome, but every minute or so, I do see a request for your home page. According to Chrome's developer tools, that request is initiating within jQuery. (That doesn't mean jQuery is the culprit... that just means that whatever code is making the request is using jQuery to do it.)
In the console, there is a suspicious error message:
Resource interpreted as Image but transferred with MIME type text/html: "http://www.sarasotasailingsquadron.org/".
The call stack drops it down to $.transition. It seems that this has to do with your image transition header, "coin slider".
I've skimmed your code and don't see the reference, but somewhere I suspect you are trying to load your home page as an image in that header. Maybe you have some invalid HTML or a null URL to the image keeping it from populating the full request URL or something. In any case, this should help you track down the exact source.
I am trying to save a couple of images that are linked to by a webpage to offline storage. I'm using IndexedDB on Firefox and FileSystem API on Chrome. My code is actually an extension, so on Firefox I'm running on Greasemonkey, and on Chrome as a content script. I want this to be automated.
I am running into problem when I retrieve the image file. I'm using example code from the article titled Storing images and files in IndexedDB, but I get an error: the images I'm trying to download are on a different subdomain and the XHR fails.
XMLHttpRequest cannot load http://...uxgk.JPG. Origin http://subdomain.domain.com is not allowed by Access-Control-Allow-Origin.
On Firefox I could probably use GM_xmlhttpRequest and it'd work (the code works on both browsers when I'm in same-origin URLs), but I still need to solve the problem for Chrome, in which other constraints (namely, needing to interact with frames on the host page) require me to incorporate my script in the page and forfeit my privileges.
So it comes back to that I'm trying to figure out a way to save images that are linked to (and may appear in) the page to IndexedDB and/or FileSystem API. I either need to realize how to solve the cross-origin problem in Chrome (and if it requires privileges, then I need to fix the way I'm interacting with jQuery) or some kind of reverse createObjectURL. At the end of the day I need a blob (File object, as far as I understand) to put into the IndexedDB (Firefox) or to write to FileSystem API (Chrome)
Help, anyone?
Edit: my question may actually really come down to how I can use jQuery the way I want without losing my content script privileges on Chrome. If I do, I could use cross-origin XHRs on Chrome as well. Though I'd much rather get a solution that doesn't rely on that. Specifically since I'd like this solution if I get the script incorporated into the webpage, and not require it to be a content script/userscript.
Edit: I realized that the question is only about cross-site requests. Right now I have one of three ways to get the image blob, with the help of #chris-sobolewski, these questions and some other pages (like this), which can be seen in this fiddle. However, all of these require special privileges in order to run. Alas, since I'm running on a page with frames, because of a known defect in Chrome, I can't access the frames. So I can load a script into each frame by using all_frames: true, but I really want to avoid loading the script with every frame load. Otherwise, according to this article, I need to escape the sandbox, but then it comes back to privileges.
Since you are running on Chrome and Firefox, your answer is fortunately, yes (kind of).
function base64img(i){
var canvas = document.createElement('canvas');
canvas.width = i.width;
canvas.height = i.height;
var context = canvas.getContext("2d");
context.drawImage(i, 0, 0);
var blob = canvas.toDataURL("image/png");
return blob.replace(/^data:image\/(png|jpg);base64,/, "");
}
this will return the base64 encoded image.
from there you just call the function something along these lines:
image = document.getElementById('foo')
imgBlob = base64img(image);
Then go ahead and store imgBlob.
Edit: As file size is a concern, you can also store the data as a canvasPixelArray, which is width*height*4 bytes in size.
imageArray = context.getImageData( 0, 0 ,context.canvas.width,canvasContext.canvas.height );
Then JSONify the array and save that?