Sorry by this dummy question! :D
I´m trying to make a clickable map with html5 canvas element, I find this good example: http://www.rubydesigner.com/blog/click-map-using-html5-canvas
But when a download it (CTRL+S) from Chrome it doesnt work. It download the html page and files folder with the JS a images, I checked the path to the images, but still the map doesnt appear. What is the problem?
UPDATE
Initial assumption about CORS turns out to not be the case here.
The code seemed to work in Chrome and although CORS typically is the cause when downloading files and using canvas with local (file://) file references. As localhost is used here via XAMMP this won't be the cause and it turns out there are more than one bugs in the online code.
Specifically the way it calculates the coordinates for the mouse:
var datapos = ((e.offsetY-2) * 300 * 4) + ((e.offsetX-1) * 4);
This will result in a NaN value due to offsetX/Y which of course cannot be used for any index.
The more appropriate way is something like this, here also compensating for canvas offset:
var rect = map_wrapper.getBoundingClientRect();
var datapos = ((e.clientY - (rect.top |0)) * 300 * 4) +
((e.clientX - (rect.left|0)) * 4);
However, I have never came across a floating point position for an element which seem to be case here (rect.top shows a float value in my browser, another little surprise) and therefor I am forcing the value to integer here (normally not necessarily.. I didn't dig deep into this). As debugging the whole code is a bit out of the scope here I will leave it with that and to OP to locate other bugs.
Correcting the position will at least give a usable index for the pixel array which in turn will return a valid (not necessarily correct it turns out, which leave checking of image, tolerane in case gamma/color correction is applied....) value for the red component (still issues when testing but as said, it's a bit out of the scope to do a full debug and correction).
Hopefully this can lead you to where the other errors are. I did not go through the html etc.
Related
I'm trying to reliably load the same GIF, but have it play at different times.
Overall, I expected to find a spec that would tell me what the rules were for rendering (i.e. what's in sync what's out of sync), but I haven't been able to find any such standard. Is there any spec for how GIFs are rendered with respect to timing?
Consider these examples:
https://i.stack.imgur.com/LwWBD.gif
https://i.stack.imgur.com/LwWBD.gif?blah=1
https://i.stack.imgur.com/3As1l.gif
Safari, seems to keep everything in sync regardless of the URL. Chrome on the initial load has the timings separate by URL, but eventually has them in sync. Firefox seems to depend solely on the URL without any parameters to determine syncing.
Any insight would be appreciated.
Tested on Chrome, abney317's answer works for me. I was able to get staggered start times by adding a query string to the end of the URL.
const image = document.querySelector('img');
img.src = imgUrl + '?id=' + Math.floor(Math.random() * 100);
I have a basic three.js scene in which I am attempting to get objects exported from Blender (as JSON files with embedded morphs) to function and update their shapes with user input.
Here is a test scene
http://onthez.com/temphosting/three-js-morph-test/morph-test.html
The slab is being resized without morphs by simply scaling a box, which is working just fine.
I must be missing something fundamental with the little monument on top. It has 3 morphs (width, depth, height) that are intended to allow it to resize.
I am using this code to implement the morph based on users dat.gui input.
folder1.add( params, 'width', 12, 100 ).step(1).name("Width").onChange( function () {
updateFoundation();
building.morphTargetInfluences['width'] = params.width/100;
roofL.morphTargetInfluences['width'] = params.width/100;
roofR.morphTargetInfluences['width'] = params.width/100;
building.updateMorphs();
});
The materials for building, roofL, and roofR each have morphTargets set as true.
I've been going over the three.js examples here:
http://threejs.org/examples/?q=morph#webgl_morphtargets_human
as well as #webgl_morphtargets and #webgl_morphtargets_horse
Any thoughts or input would be much appreciated!
I believe I've reached a solution for my question I was under the impression that the JSON loader was preserving the morph target names to be used in place of an index number with morphTargetInfluences
something like morphTargetInfluences['myMorphTargetName']
but, after closer inspection in the console it seems like they should be referred to by number like morphTargetInfluences[0]
Not the most intuitive, but I can work with it.
If I create an image using HTML SVG element, can I then offer this as an SVG file download to the user. For example I may want to load an SVG image, apply some basic transformations to it, add some text, then let the user download the result as a vector image.
Is that possible? I have been doing something similar with Canvas but have been struggling creating a vector image. I wasn't aware that SVG elements were so versatile when I cam across them this morning but if I can do the above it would be great.
Simple solution using a data URI:
var svg_root = document.getElementById('your_svg_root_element_here');
var svg_source = svg_root.outerHTML;
var svg_data_uri = 'data:image/svg+xml;base64,' + btoa(svg_source);
var link = document.getElementById('anchor_element');
link.setAttribute('href', svg_data_uri);
Although it worked, when clicking on the link, the browser stalled for a few seconds.
This seems to be the simplest solution and should be compatible with all modern browsers. However, it has some noticeable overhead. If someone else knows a different solution (maybe using blobs or something similar), please add here as another answer!
I have been playing around with a very simple HTML5/Canvas based drawing app, just for the browser. I am setting it up as a proof of concept to play around with different programmatic drawing effects and such. However, I running into an issue, namely a SecurityError, when I try to grab the ImageData from the canvas 2d context.
Now, I know all about the security issues with cross-browser content and running on a webserver with local content and all that. This is not my issue. I am using no images. And the weirder thing is that I can grab the ImageData in some places in my code, but not others. Specifically, not within a function, which is where I want to.
Here is a fork of my code:
http://jsfiddle.net/grimertop90/77Z42/
Feel free to play around, and try drawing on the canvas.
(Note: I have been developing in Chrome and it works fine, but I just tried running it in Firefox and it seems to have issues. For my purposes, please just check it out in Chrome.)
If you look though the JavaScript, you should see three points marked "Case 1", "Case 2", and "Case 3". These are the three points in my code where I have attempted to grab the canvas's ImageData. Cases 1 and 3 work; Case 2, the important one, does not. Case 1 is during initialization. Case 3 is upon a user's button click. Case 2, the broken one, is fired when a certain number of points have been drawn on the canvas.
I have no clue what the issue might be, especially since it work in 2 out of 3 places.
Your code works fine, your only problem are the missing arguments in the arcSketch call. Currently you have:
if (points.length >= 100) { arcSketch(); }
Just change it for
if (points.length >= 100) { arcSketch(x,y); }
You were trying to call ctx.getImageData(Nan, Nan, 200, 200) which was throwing the error.
You can see it working here
I'm experiencing a possible bug with the path element in Chrome. I have copy/pasted what RaphaelJS has rendered here: http://petesaia.com/work/svg-chrome-bug/
In Safari & Firefox
(source: petesaia.com)
In Chrome (19.0.1084.46)
(source: petesaia.com)
Obviously there are very many points in this file which is why I limited 50 points per path element. As you can see, 2 paths are missing from the right side and 2 very small paths are missing from the left side. I found one of the paths that is not displaying and singled it out. You can see that here: http://petesaia.com/work/svg-chrome-bug/singled.html
You will notice that even when the path is singled out it still doesn't show. So Chrome must dislike something with that path.
I also noticed that sometimes it displays correctly, usually when I open and close the javascript console. It's very flimsy. I've experimented with changing stroke and weight and also no luck.
Has anyone experienced anything like this?
New discovery: These x/y values are the coordinates that break the single.html sample: 620.3536711111101,232.16932207146056 I know this because when you truncate the path up to that point it works perfectly. However, I still have no idea as to why they would break it.
Thanks,
Pete
PS: I do plan on simplifying the shape(s) but this has caught my attention first.