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?
You can post now and register later.
If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.
Question
Muslim
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>
Link to comment
Share on other sites
1 answer to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.