I have a Detail page the displays an image(image 1) and superimposed on it another image(image 2) and text. I used HTML Block that contain CSS and HTML codes. Image 1 is a background in a div. Image 2 and text are from data fields. The resulting display is fine and I can download the complete image to PDF. However I need to download to JPEG or PNG instead. From my reading it says I need to screenshot the canvas and download as JPEG or PNG. Tried the codes but didn't work. Is there a simpler way to download the combined image just like downloading to PDF?
The following are my codes to create the display:
<Head>
<style>
.plaque
{
position: relative;
top: 20;
width: 803px;
height: 505px;
border: 0px solid black;
padding: 0px 5px 0px 0px;
}
.house
{
border: 0px solid gray;
position: absolute;
top: 50px;
left: 500px;
display: block;
max-width: 100%;
height: auto;
border: 3px solid gray;
border-radius: 20px;
padding: 5px;
background-color: white;
}
div.a
{
border: 0px solid gray;
position: absolute;
top: 230px;
left: 200px;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
font-weight: bold;
z-index: 5;
}
</style>
</Head>
<Body >
<div id="newplaque" style="position: relative; left: 0; top: 0;">
<img src="[@app:plaque4/]" class="plaque">
<img src="[@authfield:mh_picture/]" width = "260"; height = ""230" class="house">
<div class="a">[@authfield:plaquetext]</div>
</div>
</Body>
