We Keep Coding

How to capture an iframe as an image

I have an iframe in my webpage where I can load websites dynamically. Is there any way to capture only the iframe and save it as an image? If not possible, is it possible to take an screenshot of the whole page using JavaScript?

Web pages are not the best things to be "screenshoted", because of their nature; they can include async elements, frames or something like that, they are usually responsive etc...
For your purpose the best way is to use external api or an external service, I think is not a good idea to try doing that with JS.
You should try url2png
Or use html canvas to do this
Look at the html2canvas project. Their approach is that they create a representation of the page inside a canvas. They don't make an actual screenshot, but builds it based on the content on the page and the loaded stylesheet. It could be used on the entire body or just a specific element.
It is also really easy to use. Here is an example:
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
You can adapt it to your code relatively easy.
Take a look at their demo. Click on any of the buttons and then scroll to the bottom of the page.

To be able to use html2canvas in your iframe you may need to inject it in and then execute it from inside iframe context. The following may help you to achieve this:
inject a javascript function into an Iframe

Save multiple <img> with all css applied elements from self DOM to jpg/png file

I developed a project on Laravel and Vue Js. In a part of this site, I have made an App in Vue whom allow the user to drags a <img> tag on another <img> tag, both contained in a DIV.
There are many (and the most unsupported) CSS applied to both images, as filters, 3dtransforation, mask, background-source...It works smooth on both Chrome and Firefox.
What I have to do now, is to save in jpg/png the "result" of all the trasformations applied to those two images, or to say it better, the html of the div container have to be converted in a image file and saved on server/rendered on the page after a click.
I didn't realise this will have been the hardest part.. Whatever I tried until now didn't worked. I tried using
Domtoimage -> The problem that I have with this javascript library is that I'm loading 1 image from the server (local currently) and 1 image from an S3disk on the AWS, and there are cross-browser compatibility problems.
Browsershot -> The issue experienced for me here is again about having the files on different storages, but here the problem is on the localhost. Hww, doing a try with both image on S3, some of the CSS properties are not rendered (mask, opacity, transform)
HTML2CANVAS -> Again both issues: cross origin, and not rendering most of the required CSSs.
At this point I really not longer know where to look out for a solution. It seems that for as easy is to set the css for two elements that works, it's impossible to ask java or the server to just "print out" what you see, exactly as you are seeing it.
About "printing": I noticed (trying to find a workaround) that even if by pressing print page, on the preview, some CSS are missing, while they are clearly visible in the page.
I'll be definitively grateful if somebody have any suggestion

As I said in comments, here are some solutions. About the solution that involves wkhtmltoimage in server side, is as follow:
wkhtmltopdf and wkhtmltoimage are open source (LGPLv3) command line
tools to render HTML into PDF and various image formats using the Qt
WebKit rendering engine
Download and install wkhtmltopdf wich includes wkhtmltoimage
Send from client all what you need (more detail below)
In backend create a html file with all what you need, you could include css and javascript
run wkhtmltoimage http://yourHtml.html yourdesiredImage.jpg
You have your page with all rendered like a browser in yourdesiredImage.jpg
As you have to send to backend some behaviors that users perform with css,
you could use window.getComputedStyle(element) to store all properties applied to an element into an object.
You have to send the object created by window.getComputedStyle(element) to the backend with ajax and reapply the rules.
To reapply those styles you could use something like:
var stylesComputed = {}//My object from frontend
var source = document.getElementById("source");
var target = document.getElementById("target");
var copy = document.getElementById("copy");
copy.addEventListener("click", function(){
var styles = "";
for(let i = 0; i<stylesComputed.length-1; i++){
styles += stylesComputed[i]+":"+stylesComputed[stylesComputed[i]]+"; ";
}
target.setAttribute("style", styles);
document.getElementById("t2").innerHTML = "Target (copied)";
});
full example here: https://jsfiddle.net/5c9rhxbn/

Generate PDF of a section of a php page once rendered into HTML and CSS and account for pdf page-breaks

The system I am working on has a questionnaire in it and then shows the responses to the admin in a nice report on screen. I need to create functionality that turns the on screen report into a pdf, similar to how the browser generates a pdf of the page when you select print. Although I need to only turn a section of the page into pdf. And it would be ideal to be able to alter the HTML so that the pdf page breaks don't interfere with the presentation of the report.
You can download a pdf of how the report looks, generated by the browser functionality. This is just an example, I need the pdf to be generated by a link or button and not include the whole page (the top part in this case).
I have tried some php HTML to pdf generators, but it's difficult because the HTML is dynamically generated so I'm not sure how to send all the HTML, once rendered, to the page that creates the pdf.
To overcome the page breaks, I've considered using javascript or jquery to read the height of the div of each question within the report and then write a simple script to calculate if the next div will fit on the page and if not add a margin on top of that div so that it starts on a new page.
What software can I use to generate the pdf, given these requirements? Either php or javascript. Appreciate the help.

Have you considered Snappy for PHP? It makes use of wkhtmltopdf behind the curtains to convert any HTML document into PDF.
We are using it and it works great.
https://github.com/KnpLabs/snappy

You could try mpdf and use the page-break-inside: avoid property which is actually a CSS property. I have not used this, but it might be what you're looking for.
Looks like you can add this property to the <div> and <table> tags (mPDF Supported CSS).

Having same <div> on all my sites

I want to create a site like any other. I want the "thing" at the top (home downloads and stuff) to be on all my pages. Do I need to copy and paste the same code over and over again?

put the common part in your header/some specific file and use ,since you will be using header/some specific file on all pages so the desired content will also be loaded.

Learn Psd to html conversion For batter understanding the divs and styles modification and customization.. your divs and tags can be easily maintained with your stylesheet by giving id and classes you can also give one dive multiple classes and ids,
you are talking about master page i think
that is one in style and in that page you're showing other page, likely we can say one template page and many functionality see this and
see this

As far as I'm concerned pretty much all the intelligent options for solving this problem are mentioned in this question
Use a server-side template (e.g.php), use a client-side template (e.g. handlebars), use javascript, or you could use a static site generator like Jekyll.

Include PDF as an image in HTML

When using LaTeX one can include a PDF as an image (this is usually done, e.g., with scientific papers, in which one can include a graph in PDF, so that it can be shown properly at different scales).
By using some tools like remark and MathJax one can create web pages with some LaTeX insertion.
Now, suppose I am interested in including a PDF as an image, as I usually do with plain LaTeX files.
I have tried to include my PDF using the <img> tag, and everything was working, since I realized that this only works in Safari (since Safari considers PDFs as images too). This consequently does not work in other browsers, as Chrome / Firefox.
So, I tried to include the image with an <embed> tag, as shown here. However, what I obtain is a mini-PDF viewer inside the browser, with a grey frame all around the image I am including. I would instead like to include just the image, with no frames.
Is there a way of reproducing this behavior?
Thank you in advance.

I dont know what type of framework or cms you use for your Homepage. But i guess you have to use sth like "imagemagick" to render your pdf files, like its done in wordpress or other cms systems.