DF to HTML5 Conversion – Transparency and Images

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.

Comments

 

Published
Categorized as Java

By Mark Stephens

Mark Stephens runs IDRsolutions, developing the JPedal PDF library in Java, and shares his thoughts on Java, PDF, the Business of Software and Mediaeval History at http://www.jpedal.org/PDFblog .