I am trying to convert HTML to image using HtmlRenderer. The page contains 2 images, where one image is on the top of the other. I tried following code
Bitmap m_Bitmap = new Bitmap(700, 900);
PointF point = new PointF(0, 0);
SizeF maxSize = new System.Drawing.SizeF(800, 1000);
string html = "<html><head></head><body> Test<div style=\"position: relative; left: 0; top: 0;\"><img style=\"position: relative; top: 0; left: 0;\" src=\"file:///C:/Users/crakhuc/Desktop/HappyBirthday.jpg\"><img style=\"position: absolute; left: 199px; top: 293px;\" src=\"file:///C:/Users/crakhuc/Desktop/Small.jpg\"></div><br></body></html>";
HtmlRenderer.HtmlRender.Render(Graphics.FromImage(m_Bitmap),html,point, maxSize);
m_Bitmap.Save(#"C:\Test.png", ImageFormat.Png);
Problem with this is that second image doesn't come on top of the first but comes at bottom of first image.
HTML Renderer currently doesn't support relative/absolute layout.
Depending on what you want to achieve you can either use one of the images as background image, or split the HTML into 2 parts using the resulted image from part one as the base for part 2 rendering.
You can use this wiki page for reference: Generate image from HTML markup.
I am not sure how complex the html can be using HtmlRenderer so providing an alternative if it helps. If the html is really complex and references external resources, you could use a Html to Pdf renderer then convert the PDF to an image.
Related
I'm currently trying to get a single image (website under construction) to cover the entire Tumblr website I'm working on, temporarily, without losing any of the underlying HTML and CSS code. Additionally, I'm not sure where to put the image itself (head, body, etc) to get it to cover up the menus and other links that are above the content without changing the structure.
There are many ways to do this.
Option 1
The most efficient way would be to have a new page with just the image and put a temporary redirect on your DNS entry if that is accessible to you. If you do not have access you can add a redirect into the head tag. (If you are looking to eventually have good SEO(Search Engine Optimization) you should be wary how you perform this redirect. Hosting the site before its ready may negatively impact rankings.
Option 2
Add the image to a div or the body tag as the background with 100% height and give it a large z-score to raise it above the rest of the content.
I suggest you put a div in the body, then style it with the following rules:
.mask {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: lightgrey;
z-index: 100;
}
Then put the image in this mask div. The mask element will fill the page.
Is it possible to insert a web page into a html file using iframe but showing the this "inserted page" at all browser ?
I need a solution to insert a html with a expansive way.
Your question is a little unclear but I will try my best to answer.
if you want the entire page to be taken up with this <iframe>, you will have two options:
Use jquery's $().load function and "load" your other website
$(function(){
$("body").load("http://yourWebPageHere");
});
Use plain <iframe> tags and use the css top: 0; bottom: 0; left: 0; right: 0; to make it extent to the edges. Note, do not use width: 100%; because that will leave a margin around the edges of the page.
I'd like to be able to layer two (or more) .png images on top of one another while calling each image from its own separate/distinct style.
Using multiple backgrounds in one style does not help me in this case, as I'd like to have the image of a "door" with a transparent background show on top of a variety of "floor tiles" at will. The door is a separate style, each floor tile is a separate style. I wouldn't want to create an additional combo style for every possible combination of door and floor, which is what the multiple background function within one style would force me to do.
I also would like to not employ an img if possible as I will later have additional graphics (characters and monsters) be appearing on top of the floor and door tiles which I will introduce as img.
Thanks in advance.
When applying multiple background images (about 20% of the way down https://css-tricks.com/almanac/properties/b/background-image/), you need to comma-separate images, meaning packing them into the same style. CSS3 doesn't allow you to alter a single image in the stack.
So, there are a couple options open to you:
Use multiple elements that overlay each other. Using absolute positioning allows for overlaying items.
Use pseudo elements (::before, ::after) in order to apply images over the parent image.
Both are essentially the same. Here's some boilerplate code:
<div class="game-window">
<div class="game-background walls"></div>
<div class="game-backgroud tiles"></div>
</div>
Then, you can style the backgrounds accordingly to stretch the window:
.game-window {
position: relative;
width: 640px;
height: 480px; /* Old school */
}
.game-background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.walls {
background: url(/images/walls.png);
}
...
Without z-indexing, the last HTML element will render on the top of your image stack.
I have a program that creates a report in HTML. That HTML file is displayed in a TWebBrowser component (Delphi) and basically prints the page using this code:
WebBrowserComponent.ControlInterface.ExecWB(OLECMDID_PRINT, OLECMDEXECOPT_DONTPROMPTUSER, vIn, vOut) ;
The report needs to match a pre-printed form. In order to place values exactly at the right place, I use CSS code like this:
#date_of_invoice {
position: absolute;
left: 3mm;
top: 90mm;
width: 29mm;
height: 5mm;
text-align: center;
font-weight: bold;
}
This was a working solution. Any new client that wished to use this program could hire a web designer and customize the HTML template for their needs. Today I got a new request, saying that there should be more than one pages printed at once. I can force new pages by adding:
<div style="page-break-after: always;">
content on page...
</div>
However, when absolute positions are used then page-break-after has no effect on the absolutely positioned elements. So here is the question: is it possible somehow to position elements relative to the top left corner of the current page? I know that HTML does not have a "current page" concept. But since we have "page-break-after" CSS property, I was hoping there might be something similar for positioning elements relative to the current page. Maybe there is a trick to place a small invisible element in the top left corner and position other elements relative to that invisible point of reference?
The other option would be to reimplement all reports from scratch and use PDF instead of HTML. Which would be a very bad idea because there are already several reports made with HTML, and I don't want to redesign them by hand, and then I don't want to tell my customers that they won't be able to customize the reports in the future.
I've created a cube and the last step is to put a picture on the "back" side. I can link a regular image and its working using following code:
.cube .back {
position: absolute;
width: 200px;
height: 200px;
background-image: url(pika.svg);
}
But, when I try to link my svg file as an img the whole image is not showing.
I have three separate layers in my svg but only two show. What am I doing wrong?
here's the svg code:
http://pastebin.com/H6tnHk0p
SVGs that are included as an image (eg. via <img> or background-image) cannot reference other external objects. That includes images, CSS etc. Your SVG references an external PNG file.
What you can do is include the PNG by embedding it as a base64 data URL.
This restriction is a deliberate browser security measure.