I have spent a lot of time building a dress-up game using KineticJS and I seem to have fallen at the final hurdle.
I have created a 'Snapshot' button which I wanted to allow my users to print the canvas to a window or tab. Here is a snippet of my code:
Camera.prototype.takeSnapshot = function()
{
var backgroundLayer = this.controller.view.getBackgroundLayer();
var backgroundContext = backgroundLayer.getContext();
var manikinLayer = this.controller.view.getManikinLayer();
var manikinCanvas = manikinLayer.getCanvas();
//combine background and 'manikin' layers
backgroundContext.drawImage(manikinCanvas,0 ,0);
//open data URL in new window
var manikinImageUrl = backgroundLayer.getCanvas().toDataURL('image/png');
window.open(manikinImageUrl);
};
Now as im sure you will have guessed already, this works in FF, Chrome, Safari for Win, but not IE or IOS Safari. Having done some research I believe all versions if IE flat out dont support this functionality?
I am just looking for an expert to confirm if this is true or not.
Also could someone please tell me how to fuse the the backgroundLayer and ManikinLayer together before they are printed out? I am getting the errpr 'Value could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement' on the 5th line of code.
Any help much appreciated as I am close to junking the project after having put in so much effort!
In your new window, create an image element with the source set to your dataURL:
var win=window.open();
win.document.write("<img src='"+manikinImageUrl+"'/>");
Related
I have interesting case of what the hell is going on that I cannot seem to solve.
I need to programatically create a form and send it as post request. My request then returns some html layout and draws it to window that posted the request. This is why I create new window at the bottom.
Solution I have is as follows
// Define params
var path = someRequestPath;
var params = {
DOCNAME: 'DocumentName',
FORMAT: 'A4',
ORIENTATION: 'Landscape',
HTML: htmlContent
};
// Create form to submit request
var form = document.createElement('form');
form.method = "POST";
form.action = path;
// Set form params
for (var key in params) {
if (params.hasOwnProperty(key)) {
var hiddenField = document.createElement('input');
//hiddenField.type = 'hidden';
hiddenField.name = key;
hiddenField.value = params[key];
form.appendChild(hiddenField);
}
}
//Create window and submit form
var win = window.open('', 'windowName', 'width=1400,height=1200');
win.document.body.appendChild(form);
form.submit();
win.focus();
Now this solution work perfectly fine in Chrome, but in Edge I get following error
Object doesn't support property or method "Symbol.iterator". It happens on line where I attach the form to the newly opened window via appendChild. Since Edge is running Chromium core, I expected that it would behave the same, but obviously it does not.
Any ideas?
Thanks.
From your below description,
It looks like you are assuming that you are using the Edge Chromium browser but as per my test results, it looks like you are using the Edge legacy browser.
I try to test your sample code in both the Edge Chromium browser and the Edge legacy browser.
Your code works fine in the Edge Chromium browser and giving the same result as the Google Chrome browser.
Test result with the Edge Chromium Version 87.0.664.55:
Your code giving the Below error on the same line in the Microsoft Edge legacy version 44.19041.423.0:
Michel has already provided the suggestion to fix this issue in his comment.
So I suggest you can try to check and confirm that which Edge browser you are using on your side for making this test. If you want to move to the MS Edge Chromium browser then you can download it from this link.
Let me know if I have misunderstood anything from your description, I will try to correct myself.
Thanks for your understanding.
Take a look at this: Edge 15 throws error when using 'for ... of' on a NodeList
It seems to be a problem with Edge not implementing the for ... of/in in NodeList.
Maybe try using for (var key in Array.from(params))
I have written some javascript code that creates a preview in a table. In google chrome, however, the table gets extra padding on the bottom.
Google Chrome:
Internet Explore
I have tried the html tags .
Prints preview text:
var textcontent = document.getElementById('kilo');
textcontent.onkeyup = textcontent.onkeypress = function(){
document.getElementById('showtext').innerHTML = this.value;
}
Prints image:
function showMyImage(fileInput) {
var files = fileInput.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /image.*/;
if (!file.type.match(imageType)) {
continue;
}
var img = document.getElementById("thumbnil");
img.file = file;
var reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
}
}
I expect a result without padding on the bottom.
padding is CSS related, or using default value. If you need to have clear(0) paddings/margins you've to set it/them using CSS. JavaScript is not about padding but can write HTML or CSS and create element who obviously will have theirs default values. Browsers have sometimes differents settings like default or padding/margin size slightly differents, so set the needed value(s) will fix most of the problems like differences in each browser, some will require more browser specifics settings in order to set unify and erase those differences who 're oten difference of 1 or 2 px.
See also polyfil for more specifics comportements differences in browsers and lack of some modernest stuffs who exist in others and/or laters updates.
note: it's well known that IE is the worst for developpers, better use Edge who's better (stick more to W3C reccomandations) and forget about IE and version of browser who're not uptodate. Not updateing application browser is a wrong this for the user so do web sites for good and updated browsers is more likely to have a good website(i mean anyone will see the same). Testing is still needed for me but i do Firefox then Chrome and later Edge because the 2 first one more at the avant-garde of tech. and following what W3C reccomand. Teting on one or 2 not up to date could be a plus but i don't think so it's really needed, better is to display(and test) site on mobile device with mobile version browsers who 're far more in use to see and browse websites.(+ a website has to be 'mobile first' in order to get a good indexation at serach engine like Google).
So iOS 11 Safari was supposed to add support for the Web Audio API, but it still doesn't seem to work with this javascript code:
//called on page load
get_user_media = get_user_media || navigator.webkitGetUserMedia;
get_user_media = get_user_media || navigator.mozGetUserMedia;
get_user_media.call(navigator, { "audio": true }, use_stream, function () { });
function use_stream(stream){
var audio_context = new AudioContext();
var microphone = audio_context.createMediaStreamSource(stream);
window.source = microphone; // Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=934512
var script_processor = audio_context.createScriptProcessor(1024, 1, 1);
script_processor.connect(audio_context.destination);
microphone.connect(script_processor);
//do more stuff which involves processing the data from user's microphone...
}
I copy pasted most of this code, so I only have a cursory understanding of it. I know that it's supposed to (and does, on other browsers) capture the user's microphone for further processing. I know that the code breaks on the var audio_context = new AudioContext(); line (as in, no code after that is run), but don't have any error messages cause I don't have a mac which is required to debug iOS Safari (apple die already >_<) Anyone know what's going on and/or how to fix it?
e: forgot to mention that I looked it up and apparently I need the keyword "webkit" before using Web Audio API in Safari, but making it var audio_context = new webkitAudioContext(); doesn't work either
#TomW was on the right track - basically the webkitAudioContext is suspended unless it's created in direct response to the user's tap (before you get the stream).
See my answer at https://stackoverflow.com/a/46534088/933879 for more details and a working example.
Nothing works on mobile save to home screen apps. I issued a bug report to Apple developer. Got a response that it was a duplicate ( which means they know..no clue if or when they will actually fix it).
I am using Roy Tanck's WP-Cumulus Tag Cloud viewer. It's an SWF file that is used with SWFObject.js to show a spinning sphere of tags. It works fine in Chrome and FireFox, but in Internet Explorer 10 the canvas is blank. If I right-click on the canvas I do see the attribution link to Roy Tanck's web site indicating the movie was loaded, and there are no errors showing in the Debugger's Console tab, but no sphere of tags, just a blank white canvas. I am using SWFObject v2.2 and my Flash player version is 11.8.800.175. I traced my main function (shown below) for creating the tag XML for the SWF and everything checks out fine. Unfortunately, I get nothing but a blank display for the movie and no errors in the console. I did look at the values for the flashvars and they are identical to what they are when I trace the method in Chrome and FireFox. Can anyone give me some things to try that might help fix this problem?:
// Create the tag cloud using the given associative array where the Key is the
// value to display in the tag cloud and the Value is the HREF for the link
// to be associated with the display value.
function createTagCloud(aryDisplayStringsWithLinks, style)
{
if (typeof aryDisplayStringsWithLinks == 'undefined')
return;
// Build tags XML partial for use by the Cumulus Tag Cloud.
var tagCloudXML = "<tags>";
var iCount = 0;
for (var Key in aryDisplayStringsWithLinks)
{
tagCloudXML += createOneTagCloudXMLElement(Key, aryDisplayStringsWithLinks[Key], style);
iCount++;
} // for()
tagCloudXML += "</tags>";
// Must have at least two elements or the tag cloud won't make any sense.
if (iCount < 2)
return;
var params =
{
wmode: "transparent"
};
var flashvars =
{
// TAGS HYPERLINKS ***MUST** HAVE THE STYLE ATTRIBUTE OR YOU WON'T SEE ANYTHING IN THE VIEWPORT! (and you
// will think it is broken when it is not).
tagcloud: tagCloudXML,
// tagcloud: '<tags><a href="http://google.com/" style="font-size:9pt;" >One</a><a href="http://microsoft.com/" style="font-size:9pt;" >Two</a></tags>',
mode: "tags",
distr: "true",
tcolor: "0x3366CC",
hicolor: "0x0000bb"
};
swfobject.embedSWF(
"/Content/flash/tagcloud.swf",
"flashcontent",
"470",
"380",
"9.0.0",
"",
flashvars
);
} // function createTagCloud(aryDisplayStringsWithLins) {
Are you facing the problem on
OS: windows 8
Browser: Internet Explorer 10
open the debugger (F12)
Cache (menu bar) -> select ["Always refresh from server"]
It will work now.
The problem exist when all request are not 200
Debugging further to find the fix without the above tweak
Found this check if it fixes the issue for you
Flash not working on Windows 8 / Internet explorer 10
How can I know, in Xul, if the network is (dis)connected?
--update
Using:
function observe(aSubject, aTopic, aState) {
if (aTopic == "network:offline-status-changed") {
write("STATUS CHANGED!");
}
}
var os = Components.classes["#mozilla.org/observer-service;1"].getService(Components.interfaces.nsIObserverService);
os.addObserver(observe, "network:offline-status-changed", false);
and the preference:
pref("network.manage-offline-status", true);
it's not working.. There's a bug report here, but I don't think it has something to do with it.
--
Actually I think it's not possible to be notified, as even in Firefox we're never notified, and the user need to manually mark "work offline" if he wants the browser to know that it's offline..
--
Screenshot my of Firefox "about:config" filtering for "offline" string, unfortunately, there no "network.manage-offline-status":
You should be able to use navigator.onLine. Here is the help page
https://developer.mozilla.org/en/Online_and_offline_events
navigator.onLine is a property that
maintains a true/false value (true for
online, false for offline). This
property is updated whenever the user
switches into "Offline Mode" by
selecting the corresponding menu item
(File -> Work Offline in Firefox).
Another solution (as commented by #Neil):
Components.classes["#mozilla.org/observer-service;1"]
.getService(Components.interfaces.nsIObserverService)
.addObserver(myFunction, "network:offline-status-changed", false);
The best way I found is to use the following javascript code, that behaves like a ping, and make the test with some big websites, and assume that if none of them answers, so the network must be disconnected.
var ping = {};
ping = {
img:null,
imgPreload:null,
timer:null,
init:function() {
var sess = new Date();
var nocache = sess.getTime();
var imguri = ping.img+"?time="+nocache;
var ping.imgPreload = new Image();
ping.imgPreload.onload = function() {
clearTimeout(ping.timer);
ping.timer = null;
alert("Domain is available");
};
ping.imgPreload.src = imguri;
ping.timer = setTimeout("ping.fail_to_ping()",60000);
},
fail_to_ping:function() {
clearTimeout(ping.timer);
ping.timer = null;
ping.imgPreload = null;
alert("Ping to domain failed!");
}
};
(from http://crynobone.com/ci/index.php/archive/view/852)
--update
But, as it's not a reliable solution (as you can't rely that the image will be in the website forever), the best solution might be to develop a new XPCom component.
Eh... as per HTML5 (read echmascript 5), the on-/offline events are available.
See it here at Mozilla Hacks
Edit 20/4/2011:
I just encountered an update for this answer, when i was watching a podcast from MS MIX11:
http://channel9.msdn.com/Events/MIX/MIX11/HTM14 around time 43:36, the lecturer is actually talking about the window.navigator.onLine property, where he uses it for detecting if the browser (and the computer) is online. Then he uses the online event to do something when he gets online again.
This method is only available in modern browsers, however. So IE 8 and below have to poll for the connection.