can any one tell me how to convert html markup to an image and save it. i tried researching on google but i did not find anything. it would be great if you could provide me any resource or article to achieve the functionality. OR is it possible to take a screen shot of the rendered html on the browser and save it as an image? please let me know
You could achieve that using an JavaScript library called html2canvas. This library will allow you to take screenshots of a webpage.
The screenshots are usually saved as a canvas element, which you can easily convert to an image later on.
Refer here to learn more about the library and the use cases.
Related
Currently I have placed sprites and I have the events as in the example on the page: https://forge.autodesk.com/en/docs/dataviz/v1/developers_guide/examples/handling_sprite_events/.
But I don't know how to add information with a pop up as seen on the web.
How to do this with the information and displaying it in Forge: Objective
I have not found any information on how to do it and the example on Github https://github.com/Autodesk-Forge/forge-dataviz-iot-reference-app/tree/main/client/pages I don't quite understand it, already that many things are mixed. If someone could help me. I am starting on this.
Basically what you want to achieve is to display an html div on hover and hide it when not hovering.
You can inspire from this post Placing custom markup which is pretty close to what you want to achieve.
However, the examples you mention are using the Data Visualization extension and the React component called CustomTooltip. If you are using React in your project you can definitly take a look at the Hyperion's reference app.
Can anyone know convert PSD files to HTML and CSS code via any open source software's, Plugins or Frameworks are available to convert it...?
Kindly assist me on this.
You need to have at least basic knowledge on using adobe Photoshop.
a. You need to know how to deal with layers so you can extract the website carefully.
b. Use slicing tool. after you carefully slice each part. then you can now press and hold Ctrl+Shift+Alt+s (all at the same time) then choose save
At the bottom option you can see "Format:" choose html and images then save it on your pc.
Second option is
you can convert you psd to html by going to this site.
http://psdtoweb.de/index.php
I personally don't recommend you to use these methods because the codes in html is not good. I recommend you is study bootstrap instead.
I need to embed both pdf-files and images in my html-page, however, due to the fact that my html contains a form and the user has to be able to decide whether he would like to upload a pdf-file or an image, I need a flexible solution regarding how to embed either a pdf-file or an image with the same code.
I read that I could possibly use the <object/> tag, however, I also read that that's not a very "elegant" and possibly slow solution.
I also considered to use <embed/> which, as of right now, is the best solution I could come up with. Unfortunately I couldn't find out about if it's a very conventional solution or not.
I can't seem to find very much resources regarding this topic online, hence why I'm asking here. Are there any other/better ways to embed a pdf- or image-file in an html page?
Edit: I want top display the pdf kind of like a file. Also, I don't want the user to be able to resize the pdf in the viewer
I'm sure this is better suited to a comment, however I'm new and am working on unlocking that feature.
...however,
due to the fact that my html contains a form and the user has to be
able to decide whether he would like to upload a pdf-file or an image...
What are you using for the form (query language & database management)?
(PHP, Django, MySQL, MongoDB, etc)
Are there any other/better ways to embed a
pdf- or image-file in an html page?
I would recommend using embed or iframes. You are correct in thinking that the object tag is not an elegant solution, since you are dealing with images.
Edit: I want top display the pdf kind of like a file. Also, I don't
want the user to be able to resize the pdf in the viewer
Easy to do with iframes. There's a lot of hate when it comes to iframes. As you seem to plan on using it as a tool to display a file within a page, then I believe using an iframe here is just fine.
Check out this link on iframes. (will also tell you how to keep the user from resizing it)
I want to create a user guide in HTML format which contains screenshot images.
OK so far.
Then I want to add annotations to those images (which are screenshots of forms with some controls).
The annotations are describing those controls.
This will be done more than once (each time the form is changed,...)
There are no dynamic effects necessary, the annotations should be displayed statically.
What would be a simple, easily maintainable way to to this?
Instead of using pure HTML I have had good success with strapdown.js so far, only the annotations are a missing feature.
Any hints are welcome, maybe "annotation" is not a good description of what I am doing...
edit: the annotations should be displayed on top of the image (as would be done with a image editor and drawing a textbox directly in the image).
K.I.S.S. - keep it simple, stupid
<img>
<br>Annotation
I know something like this is possible, I'm pretty sure I'm just wording it wrong as I've been searching online for hours to no avail.
The same way an HTML page refers to the CSS file for a menu design, how can the HTML page also refer to a file (or the same CSS file if possible) to get the links information? So when I change the link information in that one file, it changes links on all HTML pages referring to it. Is this possible?
There is no simple way to do this. In general this happens server-side and is drawn from a database.
You CAN draw this data from a JavaScript file, using HTML templating without having to depend on a server. This may help.
http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-an-introduction-to-jquery-templating/