Jump to content
  • 0

Download screen display to image file (jpeg or png)


Muslim
 Share

Question

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.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...