How to take a screenshot of a HTML form? - javascript

I'm working on a project that's basically a web form that the user fills in. Once complete they can save a screenshot of the entire, complete form to use as a sort of pamphlet.
I'm trying to work out the best way to approach this programatically.
I have a simple prototype working using the canvas tag, but the text formatting options aren't good enough for what I need so I'm wondering if there's some other way to generate a screenshot of a HTML element.

If I may suggest, post the result to a webserver and create a nice PDF document from it using some reporting tool available.
In my opinion, this is the best, maintainable solution. No need for hacking it in HTML or Javascript. You can use your own logo, print layout, fonts, etc.

Related

Research for a visual html editor which can export the changes or Finding a method for reapplying the user changes in initial html

I am looking for a visual HTML editor script that works in browser basically. Its initial content will be generated from an existing URL and all the changes which will be done by the user, should be exportable in some kind of format. The aim here is reaching the final look later by applying this exported data.
The user here will be non-technical end user. The editor can be similar to WYSIWYG so user can switch between preview and code. The editor should not rely on some kind of special CSS/JS frameworks, it should be able to read from CSS and JS files directly from URL while generating the page.
There are lots of visual editors out there with lots of cool stuff. Some are using drag-and-drop UI elements, some are meant to work just with Bootstrap etc. But so far I could not find something I can use.
So if existing tools are not enough, I need to find a way of generate same result by comparing the outputs.
Beside taking diff of the contents, is there any method for generating the exportable changes for reapplying to initial HTML later?
using diff may actually work but it may generate lots of bugs while working with js frameworks
If you are looking for what I think then.. https://ckeditor.com/ Check this one. I have used this HTML editor in a website. It changes the initial HTML and works like the way wordpress HTML editor works.

How to post a custom form in WordPress based website?

I've developed a form using raw HTML code as well as referenced inside separate CSS and javascript code files. Now, what I would like to do is to create a custom form in WordPress based on my raw HTML, CSS and javascript files. I am not sure which approach would make the most sense. The form is also supposed to send an email containing user-filled form fields. Is there any standard WordPress approach to achieve it? Should I create a custom plugin or perhaps use the already existing one? I found few which seem to enable certain custom codes (eg. HTML Forms, Insert Html Snippet, Raw HTML) but do they really? The number of options is really overwhelming and I am not convinced to any of them.
I am sure some of you dealt with something like that before, is it personal experience or helping out someone in a similar case. Hopefully, you could point me in the right direction.

Crawler4j, Jsoup and JavaScript: extract attribute values modified with JavaScript

I'm using a Crawler4j and Jsoup to crawl a website and it works fine for the HTML text, but there are some important contents, which default values are hard coded in CSS and then dynamically set with JavaScript.
For example, I have the
and I need the width value, which in CSS is hard coded as 10px, but modified in JavaScript to, let's say, 5px.
Is there a way to get this value without using another crawler? Or a simple alternative?
I have already quite a lot of code, so I don't want to rewrite everything if there is a possibility to do that with the Crawler4j.
I hope my question is clear enough and thank you in advance for your help!
This is not possible with crawler4j nor with jsoup. They both handle only static HTML content.
There are several open issues related dynamic JavaScript execution on the official GitHub Repository: #49, #197 and #220.
To achieve your objectives, you would need to build a stack based on Selenium, CasperJS and/or PhantomJS, which could then be used for advanced crawling including JavaScript execution.

How to make the HTML page view source UNREADABLE?

We have an option of disabling the right click event on the HTML page at same user can click on view menu > source and can get a copy of the content displayed.
How do i make it into unreadable format? Just like when you do a google search and see the source of page very similar to it? How can this be done?
You can't. You can obfuscate the scripting and minify the html (remove all unnecesary whitespace) that's what google does). So, making the readability of the html (by obfuscation, minification) more difficult is the best option (if you must).
You can also go flash ofcourse, like in this website
How do i make it into unreadable format? well you can't change the format, its plaintext, this is how the browser expects AFAIK, when gmail first came out, its source code was sort of hidden, what they did actually is have the entire source of the page rendered using hidden iframes and JS, as such users would right click and get <!DOCTYPE html><html><head></head><body><div></div></body></html> but this is no longer the case.
how does Gmail hide its source
Try to compress the code using this site http://www.textfixer.com/html/compress-html-compression.php
It will remove all the whitespace and compress the code to make it unreadable.

hide html page source

Is there is any way to hide asp.net page view source?
If you mean, can you hide your ASP.NET code: it's not visible in View Source.
If you mean can you hide your HTML: you can discourage casual peeking by creating your HTML on the fly via Javascript or AJAX, but a developer will always be able to see what you are doing, using simple tools like Firebug and Fiddler.
Edited to add:
I wasn't thinking of obfuscation (though that also discourages casual peeking), I was thinking of using javascript to pull down HTML. Doing a View Source will only show a bunch of <SCRIPT> tags.
But it appears his question has been revised to go in a different direction anyway, to can I keep people from downloading my images, and the answer to that is a simple no. Making money from small numbers of images is not a viable business model. (If you have thousands of images, that's another story.)
Edited to add:
The conventional way of making a catalog of photographs is to [a] show low-resolution previews, [b] put a watermark on each image (here's an example), or both.
Are you talking about ASP.NET or the result? Since ASP.NET is server-sided, it simply returns HTML. Basically, your ASP.NET file is processed by the server and variables and functions are converted into HTML. Your users can view the HTML but not the ASP.NET as it resides on server.
No, there is no way to hide the html source of a page. It's just not possible. There are tools that will promise the ability to do this, but don't believe them. Consider that it might not even be a traditional web browser that downloads the html.
What you can do is obfuscate it a bit, but even that is trivial to reverse.
No, you can't hide HTML, and there's no point either. There's nothing of value in the HTML. It would take maybe a couple hours for a skilled developer to replicate the look and feel of a website without even glancing at the HTML. In fact, it would probably be easier for him to do it his way.
The ASP/code-behind, however, already isn't visible. It's processed on the server and outputs HTML. Only the HTML (and CSS etc.) makes it to the client.
Reading the comments, it appears you want to prevent users from downloading your images. You can't really do that either. You can make it a lot more difficult for users to download them by embedding the images in Flash, or a Java applet, or something like that, but a determined thief could still decompile it and nab your image. Easier yet, he could just take a screenshot and save it out.
The best you can do is restrict access to the image to only certain users by making the image source point to a script instead that runs some validation before outputting the image.
This is not true you can hide source code. One way would be to write a loop that puts a 100k /n in the source code at the top. So it will push it so far down with white space that you can see it :-)
Where there is a problem there is a way.
And for all those who dont like this. Amazon used to hide there code somehow until sometime back.

Categories