I'm working on this webapp here http://dogeify.me/ and I have completely redone it as Flask app (not hosted at that URL, yet).
Essentially, you drag the text that you create using jQuery in order to make the doge meme.
I am trying to figure out the best python solution for taking a screenshot within the web app so that the user will be able to save their picture. Is a screenshot even the best option, or is there any way to select all of the DOM elements and save them as a file? Maybe it isn't even a python solution, as I had previously tried http://html2canvas.hertzen.com/ but I wasn't too happy with the results.
If I had to summarize my question: How can I save an image that has draggable jQuery text overlayed onto it so that the saved image contains both the background and the draggable text?
As discussed in this answer, you can render the html (you can create a page with just your doge and jQuery-overlaid text) to image using QtWebKit. You would need to install Qt (PyQt4 or PySide) on your server in that case.
Related
I am designing and developing a product designer for a client where can create the product design interactively. Any guest can design the product but only those users who have bought it can save it as PDF or image.
In order to prevent theft/misuse I applied watermark on the currently designed product using CSS so that if users take the screenshot of the the page then the watermark on the render page makes it useless for them.
But unfortunately a tech savvy user can easily edit the source and remove CSS style for that watermark.
Is there a way I can have immutable CSS property applied to the page for water?
Or is there any way to prevent theft/screenshot without purchase?
Thanks
No, you cannot have a CSS property that the tech-savvy end-user can't override or remove.
If what you're sending the user's browser can render the thing you don't want them grabbing without the watermark, no, there's nothing you can do about that.
You'd have to have the client send the rendering information to your server and have the server generate an image of the result, with watermark baked in, and send that back to the client. (With sufficient image editing expertise that can still be defeated, of course.)
Check this answer. Basically put, you cannot prevent the user from taking a screenshot with an outside application from within the browser.
In order to accomplish what you need, you will have to intentionally worsen the preview for non-premium users: make the whole thing low-quality or add artefacts to design elements that make it pretty much unusable in production.
Basically, make the preview functionality enough to design a mock-up for the product but not enough to put the image into production.
Css can be modified from browser and there is no way to have immutable css. What you can do is that, you can put watermark in the pdf or image while generating it.
This way there will be no escape.
Update
Put an image in the background. so if the user tries to remove watermark, he removes the whole background, without which the thing he designed is useless, plus you can put a small script which observe the img tag. if the img is removed or source is changed, you can reload or stop it in whatever way you want.
No you can't. You need to apply the watermark programmatically before preview.
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.
I have a webpage with an interactive paged grid rendered using javascript. i.e. it's a grid that pulls in a number of rows at a time through MVC ajax call and have controls for going forward, backwards or jumping to a particular page. It is a fairly large grid (potentially millions of rows) and can display a number of different datasets. I would like to be able to generate a PDF containing a snapshot of each and every page from this dynamic grid. All the libraries I have looked at transfering html to pdf have all been static, anybody know of a good fast library to transfer interactive/dynamic javascript generated html to pdf? I am willing to do this at the server layer as well, if it is possible to import the .css skins used to create the grid on the webpage, to make the look similar.
I am not sure if that fits your needs, but I used
http://www.tcpdf.org/
some time ago, and it worked quite good. But no idea how good it works with javascript and stuff.
For the record I ended up using LocalReport From Microsoft.Reporting.WebForms.
I have a div in which the user creates a simple diagram by dragging and dropping other divs into it, i've accomplished this by using javascript.
I am looking for a way to save this div to an image and save it as a file on my server (IIS/ASP.NET).
I've seen countless of methods but i am confused on which method will work.
It has to work in the following browsers : IE7+, Chrome,Safari, Firefox.
That's why i'm thinking of doing it server side, but i have no idea how i can accomplish something like that. I've found different ways to make a screenshot from an URL in ASP.NET. But it's not just an URL , its the current page on which the user is. And it depends on logindata etc.
tldr:
Would it be possible to create an image from a div in Javascript? if so, will this method work in IE7+? if not, Is something like that possible serverside (asp.net) ?
What you're creating isn't an "image" - it's just a collection of HTML elements (presumably styled with CSS) that exist in a visually-recognisable pattern.
To generate a binary image from this you'll need to serialize this collection of elements (i.e. a view-graph), pass that to the server, then the server interprets the serialized view-graph as a series of drawing commands into a new bitmap, then returns the bitmap to the user.
The actual implementation of this is an exercise left up to the reader. I cannot be more precise because you've provided almost zero technical details (such as how your Javascript-based drawing tool actully works).
I've learned here, on stack overflow, that what I need is called "flow-chart". I need to allow user to draw in a browser (using his mouse) a flow-chart that would represent a flow of a process or an algorithm. This flow-chart should contain decisions (yes/no diamonds), tasks (rectangles), arrows, labels etc.
Flow-chart editor should be a part of a Form on a web page, should be written in JavaScript and important is, that it must produce a text output (XML?) that will be storable in DB and when this page is opened again, chart will be rendered based on the previously save text.
No other outputs wil be necessary. Essentially, what I need is just a graphical XML editor/creator.
It would be perfect if it worked as same as CkEditor:
http://ckeditor.com/demo
This CkEditor is a JS Html editor that covers a textarea (in a form) and when you write something in this editor, it is (on the background) converted into HTML and written into the textarea. When you send the whole form using a button, the content of textarea can be processed and saved.
I read following thread, but nothing was suitable for my purposes
stackoverflow.com/questions/363592/javascript-library-for-hierarchical-flowchart
Very close to my idea was this project, but it is a Java program that is run outside of browser and output can not be stored in DB.
www.jgraph.com/jgraph.html
Did anyone use something like I just described?
Update 1: This could be what i was loking for. Does anybody know something similar and/or free?
origramy.com/origramy.html
You will find this thread useful. It talks about generating flowchart from BPMN which is in XML.