Mark Stephens Mark Stephens has been working with Java and PDF since 1999 and has diversified into HTML5, SVG and JavaFX. He also enjoys speaking at conferences and has been a Speaker at user groups, Business of Software, Seybold and JavaOne conferences. He has a very dry sense of humor and an MA in Medieval History for which he has not yet found a practical use.

PDF to HTML5 conversion – transparency and images

44 sec read

One of the powerful features of the PDF file specification is the support for transparency in the Canvas. When an image is drawn on the page, the image can have an alpha setting which defines how transparent the image is. The value is between 0 and 1 (where 0 is totally invisible and 1 has no transparency). Transparency is often used for special effects like adding a watermark – draw an image with a 0.2 transparency setting or less.

In HTML the transparency value can be set as a style value, either in the tag, the CSS, or in Javascript. It uses the same scale of 0 – 1.

Javascript also allows for a default global transparency setting so it can be applied to multiple images. Here is a code snippet showing how to do this.

<script type="application/javascript">
function draw()
{
var pdf_canvas=document.getElementById("pdf");
var pdf_context=pdf_canvas.getContext("2d");
pdf_context.fillStyle="rgb(0, 0, 0)";
pdf_context.drawImage(
           document.getElementById("Im0") ,0,0);
pdf_context.globalAlpha = 0.100006;
pdf_context.drawImage(
           document.getElementById("Fm0_1_Im0") ,134,237);
pdf_canvas.globalAlpha = 1.0;

You can also use Javascript to dynamically adjust the image transparency (ie in response to mouseover event) which is pretty cool.

Click here to see all the articles in the PDF to HTML5 conversion series.

IDRsolutions develop a Java PDF Viewer and SDK, an Adobe forms to HTML5 forms converter, a PDF to HTML5 converter and a Java ImageIO replacement. On the blog our team post anything interesting they learn about.

Mark Stephens Mark Stephens has been working with Java and PDF since 1999 and has diversified into HTML5, SVG and JavaFX. He also enjoys speaking at conferences and has been a Speaker at user groups, Business of Software, Seybold and JavaOne conferences. He has a very dry sense of humor and an MA in Medieval History for which he has not yet found a practical use.

Converting your PDF files to HTML5 with BuildVu 

Recently we announced our updated product range for 2018 and are rebranding some existing products, like JPDF2HTML5 which has been renamed to BuildVu. It...
Georgia Ingham
2 min read

Favourite resources from our HTML development team

As the web progresses and grows, so do the technologies that come along with it. Trying to keep on top of everything you need...
Ovidijus Okinskas
1 min read

How HTML5 Javadocs in Java 9 will make your…

Here at IDRsolutions we are very excited about Java 9 and have written a series of articles explaining some of the main features. In...
Rob
1 min read

Leave a Reply

Your email address will not be published. Required fields are marked *