Render images as HTML, PDF, PNG, and JPEG files Leave feedback

GroupDocs.Viewer for Node.js via Java allows you to load images in various formats and convert them to HTML, PDF, PNG, and JPEG. Incorporate this library into your Java application (web or desktop) to build your own image viewer.

To start with the GroupDocs.Viewer API, create a Viewer class instance. Pass an image you want to view to the class constructor. You can load the image from a file or stream. Call one of the Viewer.view method overloads to convert the image to HTML, PDF, PNG, or JPEG format. For multipage images (such as TIFF, CDR, DICOM, WebP, and so on), you can specify the pages to render.

View image files online View demos and examples on GitHub

GroupDocs.Viewer supports the following image file formats:

• .AI (Adobe Illustrator Artwork)
• .APNG (Animated Portable Network Graphic)
• .BMP (Bitmap Image)
• .CDR (CorelDRAW Image File)
• .CGM (Computer Graphics Metafile)
• .CMX (Corel Presentation Exchange Image)
• .DCM (DICOM Image)
• .DIB (Device Independent Bitmap File)
• .DJVU (DjVu Image)
• .DNG (Digital Negative Image)
• .EMF (Enhanced Windows Metafile)
• .EMZ (Windows Compressed Enhanced Metafile)
• .EPS (Encapsulated PostScript File)
• .FODG (OpenDocument Flat XML Graphics)
• .GIF (Graphical Interchange Format)
• .ICO (Icon File)
• .J2C (JPEG 2000 Code Stream)
• .J2K (JPEG 2000 Image)
• .JP2 (JPEG 2000 Core Image File)
• .JPC (JPEG 2000 Code Stream File)
• .JPEG / .JPG (JPEG Image)
• .JPF (JPEG 2000 Image)
• .JPM (JPEG 2000 Multi-layer Image Format)
• .JPX (JPEG 2000 Image File)
• .JLS (JPEG-LS Image)
• .ODG (OpenDocument Graphics File)
• .OTG (OpenDocument Graphic Template)
• .PCL (Printer Command Language Document)
• .PNG (Portable Network Graphics)
• .PS (PostScript File)
• .PSB (Photoshop Large Document Format)
• .PSD (Adobe Photoshop Document)
• .SVG (Scalable Vector Graphics File)
• .SVGZ (Compressed SVG File)
• .TGA (TARGA Graphics)
• .TIF / .TIFF (Tagged Image File Format)
• .WEBP (WebP Image)
• .WMF (Windows Metafile)
• .WMZ (Compressed Windows Metafile)

Create an HtmlViewOptions class instance and pass it to the Viewer.view method to convert an image to HTML. The HtmlViewOptions class properties allow you to control the conversion process. For instance, you can embed all external resources in the generated HTML file, minify the output file, and optimize it for printing. Refer to the following documentation section for details: Rendering to HTML.

To embed an image in an HTML page, call the HtmlViewOptions.forEmbeddedResources method and specify the output file name.

const viewer = new groupdocs.viewer.Viewer("vector-image.svg")
// Specify the HTML file name.
const viewOptions = groupdocs.viewer.HtmlViewOptions.forEmbeddedResources("output.html")
viewer.view(viewOptions)

The following image demonstrates the result:

To save an image to a separate folder, call the HtmlViewOptions.forExternalResources method and pass the following parameters:

• The output file path format
• The path format for the folder with external resources
• The resource URL format

const viewer = new groupdocs.viewer.Viewer("vector-image.svg")
// Specify the HTML file name and location of external resources.
// {0} is replaced with the resource name in the output file name.
const viewOptions = groupdocs.viewer.HtmlViewOptions.forExternalResources("output.html", "output/resource_{0}", "output/resource_{0}")
viewer.view(viewOptions)

The result is shown below. The image is placed in a separate folder.

Create a PdfViewOptions class instance and pass it to the Viewer.view method to convert an image to PDF. The PdfViewOptions class properties allow you to control the conversion process. For instance, you can protect the output PDF file, reorder its pages, and specify the quality of document images. Refer to the following documentation section for details: Rendering to PDF.

const viewer = new groupdocs.viewer.Viewer("vector-image.svg")
// Create a PDF file.
const viewOptions = groupdocs.viewer.PdfViewOptions("output.pdf")
viewer.view(viewOptions)

The following image demonstrates the result:

Create a PngViewOptions class instance and pass it to the Viewer.view method to convert an image to PNG. Use the PngViewOptions.setHeight and PngViewOptions.setWidth methods to specify the output image size in pixels.

const viewer = new groupdocs.viewer.Viewer("vector-image.svg")
// Create a PNG image.
const viewOptions = groupdocs.viewer.PngViewOptions("output.png")
// Set width and height.
viewOptions.setWidth(950)
viewOptions.setHeight(550)
viewer.view(viewOptions)

The following image demonstrates the result:

Create a JpgViewOptions class instance and pass it to the Viewer.view method to convert an image to JPEG. Use the JpgViewOptions.setHeight and JpgViewOptions.setWidth methods to specify the output image size in pixels.

const viewer = new groupdocs.viewer.Viewer("vector-image.svg")
// Create a JPG image for the letter.
const viewOptions = groupdocs.viewer.JpgViewOptions("output.jpg")
// Set width and height.
viewOptions.setWidth(950)
viewOptions.setHeight(550)
viewer.view(viewOptions)

When you render a PSD file with custom fonts, you can specify a folder that contains necessary fonts to prevent font substitution during rendering. To do this, follow the steps below:

1. Create a FolderFontSource class instance and specify a path to the folder that stores custom fonts. Pass a SearchOption enumeration member to the class constructor to define the search scope. The following options are available:

   • TOP_FOLDER_ONLY—Searches for the fonts only in the current folder.
   • ALL_FOLDERS—Searches for the fonts in the current folder and its subfolders.

2. Call the FontSettings.setFontSources static method and pass the specified font source to this method as a parameter. This method allows you to specify multiple font sources.

You can also use the ViewOptions.setDefaultFontName method to specify the default font that should be used when a particular font is not found.

// Create font sources.
// Add custom fonts folder to look for fonts recursively. (look into subfolders too).
const folderFontSource = new FolderFontSource("C:/custom_fonts_folder", SearchOption.ALL_FOLDERS);
// Add custom fonts folder to look for fonts only in this folder (wihout subfolders).
const additionalFontSource = new FolderFontSource("C:/custom_additional_fonts_folder", SearchOption.TOP_FOLDER_ONLY);
// Call SetFontSources method and supply font sources as arguments.
FontSettings.setFontSources(folderFontSource, additionalFontSource);
const viewer = new groupdocs.viewer.Viewer("sample.psd")

// Create a JPG image for the letter.
const viewOptions = groupdocs.viewer.JpgViewOptions("output.jpg")
viewOptions.setDefaultFontName("Arial")
viewer.view(viewOptions)