I have a page where we're positioning a bunch of elements using CSS, and changing their "top and left" positions using JS.
I've had reports that these things have been misaligned, but a user has the motive to lie about this to "cheat", so I'm not exactly sure whether they're telling the truth. I'm trying to find a way to figure out whether they're lying or not, and to have some "proof".
I know that Canvas has a method to copy image information from an image element, or another canvas element (kind of a BitBlt operation).
Would it be possible to somehow, with Canvas (or with something else, Flash, whatever), take a "picture" of a piece of the page?
Again, I'm not trying to take information from an <image>. I'm trying to copy what the user sees, which is comprised of several HTML elements positioned absolutely (and I care most about those positions) and somehow upload that to the server.
I understand this can't be done, but maybe I'm missing something.
Any ideas?
Somebody asked a question earlier that's somewhat similar to this. Scroll to the bottom of Youtube and click the "Report a Bug" link. Google's Feedback Tool (Javascript driven), essentially does what you described. Judging by what I looked at of its code, it uses canvas and has a JavaScript-based JPEG encoder which builds a JPG image to send off to Google.
It would definitely be a lot of work, but I'm sure you could accomplish something similar.
If a commercial solution is an option, Check out SnapEngage.
Click on the "help" button in top-right to see it in action. Here is a screenshot:-
Setup is pretty straight-forward you just have to copy and paste a few lines of javascript code.
SnapEngage uses a Java Applet to take screenshots, Here is a blog post about how it works.
Yes you can See following demo
In below code I have define table inside body tag but when you run this code then it will display image snapshot.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>test2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src="js/html2canvas.js?rev032"></script>
<script type="text/javascript">
$(document).ready(function() {
var target = $('body');
html2canvas(target, {
onrendered: function(canvas) {
var data = canvas.toDataURL();
alert(data);
document.body.innerHTML="<br/><br/><br/><br/><br/><br/><img src="+data+" />";
}
});
});
</script>
</head>
<body>
<h1>Testing</h1>
<h4>One column:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
</body>
html2canvas official Documentation:- http://html2canvas.hertzen.com/
To download html2canvas.js library you can use also if you unable to find from official link :-
https://github.com/niklasvh/html2canvas/downloads
[I am not responsible for this link :P :P :P]
You can use the element, that currently is only supported by Firefox.
background: -moz-element(#mysite);
Here #mysite is the element whose content is used as background
Open in Firefox: http://jsfiddle.net/qu2kz/3/
(tested on FF 27)
I don't think that you can do that. However, you could recursively fetch clientHeight, clientWidth, offsetTop and offsetLeft to determine the positions of all elements on the page and send it back to the server.
On Firefox, you can create an AddOn that uses canvas.drawWindow to draw web content to a canvas. https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas
I don't think there's a way to do that on WebKit at the moment.
It can be done, with some limitations. There are some techniques, and these are exactly how many extensions do screenshots. From your description it seems that you aren't looking for a generic, client side solution to be deployed, but just something that a user or some users could use and submit, so I guess using an extension would be fine.
Chrome:
I can point you to my opensource Chrome extension, Blipshot, that does exactly that:
https://github.com/folletto/Blipshot
Just to give some background:
You can do that, as far as I know, only from inside an extension, since it uses an internal function.
The function is chrome.tabs.captureVisibleTab and require access to the tabs from the manifest.
The function grabs only the visible part of the active tab, so if you need just that it's fine. If you need something more, than, you should have a look at the whole script, since it's quite tricky to get the full page screenshot until Google fixes Bug #45209.
Firefox:
In Firefox since 1.5 you can build extensions that use a custom extension of canvas, drawWindow, that is more powerful than the chrome.tabs.captureVisibleTab equivalent of Chrome. Some informations are here:
https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas
Related
I've been pulling my hair on a tiny thing: https://numa.co/about/#corporate-innovation
This URL doesn't go to the right anchor, only in Chrome and I can't see why... It works in our development environment. The only difference I can see is that we're behind Cloudflare in production and it's HTTPS. I can't see how this would make a difference though.
This is a workaround to your problem and works fine in all major browsers.
Put this JavaScript code in head section of the page where your anchor is.
<script>
window.onload = function() {
if(window.location.hash) {
elmnt = document.getElementById(window.location.hash.substring(1));
elmnt.scrollIntoView(true);
}
}
</script>
You have two elements with the same id="corporate-innovation". The browser is going to the first of those elements. id's must be unique to one element. Check the spec.
It looks like the a name is empty to me. This needs to be the same as the URL fragment. Take a look at this view of my inspector: http://imgur.com/yy2fjp4
You might need to take a look at the original HTML to see if there's an issue with syntax. The inspector on the image is Chrome on Mac.
I would try to change the HTML to be more like this:
<a name="corporate-innovation"></a>
<h3 style="color:#E50064">Corporate Innovation</h3>
<span style="color:#E50064"><p>NUMA helps corporates innovate in a different way by collaborating with an ecosystem of entrepreneurs and experts. We provide new methodology training, accelerated intrapreneurship projects, and create open innovation programs for large companies and public institutions.</p>
</span>
I'm trying to learn how to use webrtc to allow users to have a 2 way communication via webcam and audio.
I have come across this: LINK
Which i thought was perfect for me to start learning as it seems quite simple and straight to the point unlike other stuff that I found on google.
however, I really cannot make this work on their own demo and on my own server!
I only get my own webcam view in a small window and I cannot find any links to share with someone else!
I thought this: <a id="link" target="_blank">Video Link</a> would be the link to share the chat session with someone else but there is absolutely nothing happening when i click on that link.
the main reason I've chosen to use the code shown in the link above was because it doesn't seem to be using any plugins unlike others.
the question that i have is that am I missing something to make this work?
or Do I need a plugin to make webrtc to work for video/audio P2P chat?
any advise would be appreciated.
WebRTC is used for P2P communication by its nature and I would recommend to use something simple like http://simplewebrtc.com/
See code below which you can use to create simple WebRTC application, just change room name from testing123 to something else.
<!DOCTYPE html>
<html>
<head>
<script src="http://simplewebrtc.com/latest.js"></script>
<style>
#remoteVideos video {
height: 320px;
}
#localVideo {
height: 240px;
}
</style>
<script>
var webrtc = new SimpleWebRTC({
// the id/element dom element that will hold "our" video
localVideoEl: 'localVideo',
// the id/element dom element that will hold remote videos
remoteVideosEl: 'remoteVideos',
// immediately ask for camera access
autoRequestMedia: true,
// url: 'atlas'
});
// we have to wait until it's ready
webrtc.on('readyToCall', function () {
// you can name it anything
webrtc.joinRoom('testing123');
});
</script>
</head>
<body>
<video id="localVideo"></video>
<div id="remoteVideos"></div>
</body>
</html>
You don't need a plugin. You need to be able to write javascript to work with the WebRTC API in the browser (It doesn't sound like you want to write your own native application?), and you need some sort of signalling server to enable two peers (browser clients) to send messages to each other. You don't necessarily need a database, depending on your needs.
I wrote following html file:
<!DOCTYPE html>
<html>
<body>
<img src="thieftitle.wbmp" alt="W3Schools.com" width="104" height="142">
</body>
</html>
thieftitle.wbmp
locates near the my html.
html renders like this.
As you can see resource loads successfully but not render.
I there way to fix it?
I’ve no idea why one would use WBMP nowadays but you might have your reasons—so here we go. As #Clive already pointed out, browsers don’t support this format, so this leaves us with two options:
Convert the image on the server-side and send a GIF or PNG to the client
Decode the image in JavaScript and and write the pixels onto a canvas element
I’ll focus on option 2.
Implementation
Get this library: https://github.com/andreasgal/wbmp.js
(or write your own decoder, it’s no rocket sience)
<body>
<div id="image-container"></div>
<script src="wbmp.js"></script>
<script>
(function () {
var img = document.createElement('img');
WBMP.decode(img, 'test.wbmp');
document.getElementById('image-container').appendChild(img);
}());
</script>
</body>
Result
Caveats
Browser support
This only works in browser that support the canvas element and are able to retrieve binary data. Check http://caniuse.com/#feat=typedarrays and http://caniuse.com/#feat=canvas for details. Spoiler: This works in IE 10 and up. If you need to support older IE versions, pick option 1.
Bandwidth usage
WBMP is uncompressed and wastes bandwidth. Depending on what you’re trying to achieve, it might be cheaper to pick option 1.
I started to program my own Chrome extension today and I'm stuck since hours with one problem.
Right now, I'm sending the current URL from the open website to my server where it's checked against some criterias and then a return value is sent back to the extension. This is working so far. I'm using only a popup.html, no background page.
The request is only sent when the user clicks on the icon in the browser.
How can I realize that the request is automatically sent, when the page is loaded?
If there is a specific return value from the server the user should be given an unannoying warning. Alert boxes and new windows are...well...annoying. Best way should be the little popup under the icon of the extension but that's not possible without a user's click. So I thought of a little -layer at the top of the page.
<html>
<head>
<script>
window.addEventListener("load", sendRequest, false);
function sendRequest() {
var q = "test";
xmlHttp=new XMLHttpRequest();
xmlHttp.open('GET', 'http://www.testurl.com/check.php?q='+q, true);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
document.getElementById("textf").innerText = xmlHttp.responseText;
chrome.tabs.executeScript(null,{code:"<div style='position: absolute; top: 0; left: 0; background-color=blue;layer-background-color: blue;'><p>test </p><p>test2 </p></div>"});
}
}
xmlHttp.send(null);
}
</script>
</head>
<body>
//Just for the popup...
<font color="blue"><p id="textf">Checking...</p></font>
</body>
</html>
If I do
chrome.tabs.executeScript(null,{code:"alert('testalert')"});
it gives me the alert. However, the isn't working and I can't figure out why :(
Do I need a background page for all this since I only want to check the URL when the page is loaded?
Why is the -thing not working but the alert is?
Thank you in advance!
chrome.tabs.executeScript is for JavaScript only. To add content to a Web page, you must write JavaScript that manipulates the DOM. A good place for you to start learning this may be Mozilla's DOM docs. (DOM is a W3C standard and Chrome has implemented it, so yes, Mozilla pages are relevant here.)
If I may say so, it sounds like the best way forward for you is to scrap this and start over with a content script defined in your manifest so that Chrome will execute it for you; check the Content Scripts documentation to learn more. Since you're trying to accomplish your goal with no background page, and would therefore need to use XMLHttpRequest directly from your content script, you should add "minimum_chrome_version": "13" to your manifest, as Chrome 12 and earlier won't let you do that.
By the way, practically no one will understand what you're talking about when you use "-layer" and "-thing" like that. Please be more careful in making sure you are using proper terminology. Ask your peers if you're unsure of the proper term for something.
I'm currently trying to build a new website, nothing special, nice and small, but I'm stuck at the very beginning.
My problems are clean URLs and page navigation. I want to do it "the right way".
What I would like to have:
I use CodeIgniter to get clean URLs like
"www.example.com/hello/world"
jQuery helps me using ajax, so I can
.load() additional content
Now I want to use HTML5 features like pushstate to
get rid of the # in the URL
It should be possible to go back and forth without a page refresh but the page will still display the right content according to the current URL.
It should also be possible to reload a page without getting a 404 error. The site should exist thanks to CodeIgniter. (there is a controller and a view)
For example:
A very basic website. Two links, called "foo" and "bar" and a emtpy div box beneath them.
The basic URL is example.com
When you click on "foo" the URL changes to "example.com/foo" without reloading and the div box gets new content with jQuery .load(). The same goes for the other link, just of course different content and URL.
After clicking "foo" and then "bar" the back button will bring me back to "example.com/foo" with the according content. If I load this link directly or refresh the page, it will look the same. No 404 error or something.
Just think about this page and tell me how you would do this.
I would really love to have this kind of navigation and so I tried several things.
So far...
I know how to use CodeIgniter to get the URLs like this. I know how to use jQuery to load additional content and while I don't fully understand the html5 pushstate stuff, I at least got it to work somehow.
But I can't get it to work all together.
My code right now is a mess, that's the reason I don't really want to post it here. I looked at different tutorials and copy pasted some code together. Would be better to upload my CI folder I guess.
Some of the tutorials I looked at:
Dive into HTML5
HTML5 demos
Mozilla manipulating the browser history
Saner HTML5 history
Github: History.js
(max. number of links reached :/)
I think my main problem is, that everybody tries to make it compatible with all browsers and different versions, adds scripts/jQuery plugins and whatnot and I get confused by all the additional code. There is more code between my script-tags then actual html content.
Could somebody post the most basic method how to use HTML5 for my example page?
My failed attemp:
On my test page, when I go back, the URL changes, but the div box will still show the same content, not the old one. I also don't know how to change the URL in the script according to the href attribute from the link. Is there something like $(this).attr('href'), that changes according to which link I click? Right now I would have to use a script for every link, which of course is bad.
When I refresh the site, CodeIgniter kicks in and loads the view, but really only the view by itself, the one I loaded with ajax, not the whole page. But I guess that should be easy to fix with a layout and the right controller settings. Haven't paid much attention to this yet.
Thanks in advance for any help.
If you have suggestions, ideas, or simple just want to mention something, please let me know.
regards
DiLer
I've put up a successful minimal example of HTML5 history here: http://cairo140.github.com/html5-history-example/one.html
The easiest way to get into HTML5 pushstate in my opinion is to ignore the framework for a while and use the most simplistic state transition possible: a wholesale replacement of the <body> and <title> elements. Outside of those elements, the rest of the markup is probably just boilerplate, although if it varies (e.g., if you change the class on HTML in the backend), you can adapt that.
What a dynamic backend like CI does is essentially fake the existence of data at particular locations (identified by the URL) by generating it dynamically on the fly. We can abstract away from the effect of the framework by literally creating the resources and putting them in locations through which your web server (Apache, probably) will simply identify them and feed them on through. We'll have a very simple file system structure relative to the domain root:
/one.html
/two.html
/assets/application.js
Those are the only three files we're working with.
Here's the code for the two HTML files. If you're at the level when you're dealing with HTML5 features, you should be able to understand the markup, but if I didn't make something clear, just leave a comment, and I'll walk you through it:
one.html
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script src="assets/application.js"></script>
<title>One</title>
</head>
<body>
<div class="container">
<h1>One</h1>
Two
</div>
</body>
</html>
two.html
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script src="assets/application.js"></script>
<title>Two</title>
</head>
<body>
<div class="container">
<h1>Two</h1>
One
</div>
</body>
</html>
You'll notice that if you load one.html through your browser, you can click on the link to two.html, which will load and display a new page. And from two.html, you can do the same back to one.html. Cool.
Now, for the history part:
assets/application.js
$(function(){
var replacePage = function(url) {
$.ajax({
url: url,
type: 'get',
dataType: 'html',
success: function(data){
var dom = $(data);
var title = dom.filter('title').text();
var html = dom.filter('.container').html();
$('title').text(title);
$('.container').html(html);
}
});
}
$('a').live('click', function(e){
history.pushState(null, null, this.href);
replacePage(this.href);
e.preventDefault();
});
$(window).bind('popstate', function(){
replacePage(location.pathname);
});
});
How it works
I define replacePage within the jQuery ready callback to do some straightforward loading of the URL in the argument and to replace the contents of the title and .container elements with those retrieved remotely.
The live call means that any link clicked on the page will trigger the callback, and the callback pushes the state to the href in the link and calls replacePage. It also uses e.preventDefault to prevent the link from being processed the normal way.
Finally, there's a popstate event that fires when a user uses browser-based page navigation (back, forward). We bind a simple callback to that event. Of note is that I couldn't get the version on the Dive Into HTML page to work for some reason in FF for Mac. No clue why.
How to extend it
This extremely basic example can more or less be transplanted onto any site because it does a very uncreative transition: HTML replacement. I suggest you can use this as a foundation and transition into more creative transitions. One example of what you could do would be to emulate what Github does with the directory navigation in its repositories. It's an intermediate manoever that requires floats and overflow management. You could start with a simpler transition like appending the .container in the loaded page to the DOM and then animating the old container to {height: 0}.
Addressing your specific "For example"
You're on the right track for using HTML5 history, but you need to clarify your idea of exactly what /foo and /bar will contain. Basically, you're going to have three pages: /, /foo, and /bar. / will have an empty container div. /foo will be identical to / except in that container div has some foo content in it. /bar will be identical to /foo except in that the container div has some bar content in it. Now, the question comes to how you would extract the contents of the container through Javascript. Assuming that your /foo body tag looked something like this:
<body>
foo
bar
<div class="container">foo</div>
</body>
Then you would extract it from the response data through var html = $(data).filter('.container').html() and then put it back into the parent page through $('.container').html(html). You use filter instead of the much more reasonable find because from some wacky reason, jQuery's DOM parser produces a jQuery object containing every child of the head and every child of the body elements instead of just a jQuery object wrapping the html element. I don't know why.
The rest is just adapting this back into the "vanilla" version above. If you are stuck at any particular stage, let me know, and I can guide you better though it.
Code
https://github.com/cairo140/html5-history-example
Try this in your controller:
if (!$this->input->is_ajax_request())
$this->load->view('header');
$this->load->view('your_view', $data);
if (!$this->input->is_ajax_request())
$this->load->view('footer');