I want to create an image or pdf from a html. The html consist of images with css filters like sepia, gray-scale etc. So it would be better if anyone have worked on that.
<img class="dj_rot" src="/940/images/photos.png" style="filter: sepia(1);">
<img class="dj_rot" src="/940/images/photos.png" style="filter: grayscale(1);">
Thanks
Deepak
You could use "html2canvas" is a opensource script that allows you to take "screenshots" of webpages or parts of it
https://html2canvas.hertzen.com/
You will see many examples of how to use in the same webpage
If you want to create a PDF you could use a jsPDF is another option based on Javascript
http://rawgit.com/MrRio/jsPDF/master/
Also you will find the documentation with examples and source code
If it is not enough you could use and API that allow that, You only need to establish a URL and then you receive the image
https://screenshotlayer.com/
Screenshotlayer (Free, Powerful Screenshot API)
url2png (Screenshots as a Service)
urlbox.io (Website Screenshot as a Service API urlbox)
screenshotmachine (Screenshot machine)
Browshot (Service for real time website screenshots)
You could review a link with more information
What's the best website screenshot capture API?
https://www.quora.com/Whats-the-best-website-screenshot-capture-API
Have you tried taking a screenshot of the HTML? To take a screenshot you should hit command+shift+4. The number 3 takes a screenshot of the entire screen, while the number 4 allows you to select what it will take a screenshot of.
You might want to use pdf converting tools like html2pdf of mPDF for PHP.
I have used html2pdf successfully in the past, but I am pretty sure both of them have a good support for CSS.
I have a rather tricky problem. I work with a client who are restricted to only use HTML, CSS and JavaScript. We have build a form using PHP and Javascript - and currently we only find it possible to embed the form using an iFrame. We have no FTP-access, so the iFrame is loaded from a different domain.
While the form use JavaScript to load new questions and results, this makes it difficult for the height to fit the screen. If the frame fits some of the screens, it will cut off some elements on other screens.
While I am unable to upload any files to the FTP that contains the iFrame, it is not possible to use the helper-file solution, as described here.
So, my question is: is it possible to add a JavaScript action that change the css of the iFrame height, when a specific div id is loaded / action executed?
Thanks in advance! :)
EDIT: I decided to solve this differently. But in case anyone else will stumble across this post, I think the solution offered here might work (if the code is updated to fit the latest jQuery). The main problem in my case seemed to be the limited access to the client domain.
You can't control the parent window document property if the iframe is from different domain. How ever you can try busting out of the iframe.
https://css-tricks.com/snippets/javascript/break-out-of-iframe/
Is there a way to change a website's actual media queries through javascript ?
I'm developping an app contained in an iframe on my client's websites who recalculate body's width to place a panel in the right side. When the browser is resized, the client's media queries are called and act without taking my iframe into consideration resulting in a messed up layout.
Do you see a way for me to change the clients media queries with javascript so that I can keep the layout clean ?
Thanks for your help !
In this question there's an example of how load css files dynamicly with javascript. You could combine this with removing the original stylesheet via jquery, like:
$("link[rel='stylesheet']").remove()
and reload the same css file but with another media (your new media query).
I found the answer here : https://stackoverflow.com/a/19593526/1324357 We can go to css with document.styleSheets.
I think this option is not avaiable, but maybe you know some strategies for doing it!
I'm on http://www.mydomain.com, and I put an iframe with jquery of another domain :
<div id="myContent"></div>
$('#myContent').html('<iframe id="myFrame" src="www.anotherdomain.com"></iframe>');
Well, the page that I load, www.anotherdomain.com, it's mine, so I can add any kind of code!
What I'd like to do is set the height of myFrame regard the real size of the loaded page (which I can't know, it can changes during the time).
Is there a method where I can comunicate to the parent DOM (mydomain.com) the size of the inserted page (anotherdomain.com)?
I don't know it, I dubt so, but why don't ask.
You can send messages (such as the height of the frame) between iframes on different domains using postMessage: https://developer.mozilla.org/en/DOM/window.postMessage
The only solution I found for that was to pass iframe height via url. You can find my test here :
http://jsfiddle.net/Grsmto/nBWrJ/2/ (updated)
This solution works cross browsers (chrome, ff, ie all versions, mobile etc.) and cross domain.
You MUST have access to the iframe code itself AND the iframe host.
You can refresh the iframe height when you want (even if content change) just by calling the publishHeight() function inside your iframe.
This should work without jquery (mostly writen in pure javascript...).
The only inconvenient is that you will have the height in the url like :
http://www.yourdomain.com/index.html#1458px
But you should easily remove it or change it to something less ugly.
EDIT : It seems that Disqus and Twitter use this library to do that : http://easyxdm.net/wp/
EDIT 2 : On your page you put the code on the first jsfiddle page. In your iframe you put the code of the iframe (the red div "myiframe" in bottom right). Hope it's clear...
But check my link below it should be a better and easier solution.
Cross-domain communications are very limited, and impossible depending on the on the remote host. http://www.ibm.com/developerworks/library/wa-aj-jsonp1/ You can use JSONP to try and retrieve information from the remote site, but its very trying and not for beginners.
The work around that I found that worked for me was I used a server side language instead to include the remote file. so instead of < iframe >
I did a PHP server-side include like:
<?php include 'http://www.example.com/file.txt?foo=1&bar=2'; ?>
This of course only applies if you are using PHP. Once I included it that way I was able to manipulate the DOM elements.
I have developed a small component which can be put in to any website. Now, I want to develop a code that could demonstrate how would my component look like on any website.
So, the person would come to my page and put in his URL and then my code should embed my custom JS/CSS in to the downloaded HTML and display it. Something like this.
Here, like the feedback tab, I want to show my component any where on that page.
Try a bookmarklet.
Create a piece of javascript that adds your code into the page such as the following:
javascript:(function(){var%20script=document.createElement('script');script.src='http://www.example.org/js/example.js';document.getElementsByTagName('head')[0].appendChild(script);})()
Add it as the href of a link like so:
Link Text Here
Tell your users to drag the link to their bookmark toolbar and click on it on different websites to try your code out.
Some examples: http://www.reclaimprivacy.org/, http://www.readability.com/bookmarklets
In the example you linked, they are requesting the page specified in the url querystring parameter on the server, and then doing more or less the following steps:
In the <head> tag they are adding a <base href="url" /> tag to the document. The base tag will make any relative links in the document treat the value in the href attribute as their root. This is how they are getting around broken css / images. (The base tag is supported by all browsers)
At the end of the document (IE the </body> tag) they are injecting the javascript that runs their demos.
They serve the modified HTML requested to the browser.
All of this is pretty straight forward in implementation. You could use regular expressions to match the <head> and </body> tags for steps 1 and 2 respectively. Depending on the server platform how you actually request the page will vary, but here are some links to get you started:
C# - HttpWebRequest object documentation
PHP - HttpRequest::send
Nathan's answer is the closest to how we have done the demo feature at WebEngage. To make such a demo functional, you'll need to create a Javascript widget that can be embedded on third party sites. syserr0r's answer on creating a bookmarklet is the simplest approach to do so. Our's is a JAVA backend and we use HttpClient to fetch the responses. As Nathan suggested, we parse the response, sanitize it and add our widget Javascript to the response. The widget JS code takes it on from there to render the Feedback tab and load a demo short survey.
Disclosure: I am a co-founder and ceo at WebEngage.
You can not do this with JQuery due to cross site scripting restrictions.
I suggest you write a PHP script that downloads the URL specified by the user and includes your widget code and then echo it back to the user.
I recommend using bookmarklets. I've made a bookmarklet generator for adding jQuery-enabled bookmarklets to a page to make development easier.
There's a caliper bookmarklet on the page that you can mess around with just to show an example of it working.
Full disclosure, this is something I've made, I'm not trying to be spammy as I think it's relevant: zbooks
You could make an iframe page, which loads their page in the iframe, and uses javascript to inject your code into the iframe.
Here is my approach...
http://jsfiddle.net/L2kEf/
html
<iframe src="http://www.bing.com"></iframe>
<div>I am div</div>
css
div { background: red; position: absolute; top: 20px; width: 100px; left:20px;}
iframe{width: 100%; height: 500px;}
you can add javascript/jquery too, so you could do something like,
jQuery //not 100% sure it would work coz of cross browser thingy, but you know, worth a try.
$('div').click(function (){
$('iframe').contents().html('changed');///
});
if this can't change any of the contents, you can display a dialog, to say it would normally work if it was in your website, then use #syserr0r approach for bookmarked users, for better results, since you are offering this kinda services, to developers, im sure they would know about bookmarking, my approach would be rarely used :) so hope it helps.
I had a problem of a similiar nature, and the main obstacle is the cross-domain policy.
You have to ask the user to put your code in a <script src="..."> or create a proxy solution that would add your code for them.
I went for the proxy and here are my observations:
it's easy to create a basic proxy in php - there are some php proxies on sourceforge and Ben Alman has created a simple php proxy for AJAX. Based on those I was able to create a php proxy altering the content properly in one day.
after that I spent a lot of time making it work with more and more sites with issues. You can never create a perfect proxy.
As an alternative (sa long as you are non-commercial) you can use http://www.jmarshall.com/tools/cgiproxy/ and put the site in an iframe and then do whatever you want to do with the iframes document, as it's in your domain thanks to the proxy. You can access iframeDOMnode.contentWindow.document then, etc.
You can create a Crossrider extension which your users can download.
Then simply add this to your App/Extension code:
appAPI.dom.addRemoteJS("http://yourdomain.com/file.js")
Your users can then download the extension (it works cross-browser for Internet Explorer, Chrome and Firefox) and it will load your JS code on every page load.
You can get an approximation of what it will look like using a iframe. Take a look at that link for an example.
http://jsfiddle.net/jzaun/5PjRy/
The issue with this appoch is that you can't move your DIV(s) when the page scrolls, they are in effect just floating over the iframe. There is no way around this as cross-domain scripting wont let you access the iframe's document to monitor scroll events.
The only other option you have for a better fitting example would be to load the page from the server side in whatever scripting language you are using and load that into the iframe (or into a div, etc.) and you can use javascript all you want as the page is coming from your domain.
For your example of what will your widget look like I imagine floating your DIV(s) over an iframe would give enough of an idea.
Please note the example you gave is using the server side method, not the iframe method.
I agree with the bookmarklet strategy.
I'm a fan of http://bookmarklets.heroku.com/, which lets you generate bookmarklets easily, inject jQuery, etc.