Include tiff documents

rdoekes

We have a requirement that we need to provide the capability for users to dynamically include scanned images into templates. Mostly the images are in TIFF format. The links to these images come from the data-source file (like { "scan1" : "https://site.com/scan.tiff"})

Rendering the TIFF file in an <img> does not seem to work. I don't get any errors, but the tiff renders as a broken image.

Is it possible to add TIFF files to templates and if so, what code is required for this?

Thanks!

jan_blaha

Unfortunately, Chrome doesn't support tiff images, so you need to implement a conversion.
I'm a bit busy now to write down the whole example, but here is the idea...
We have an example on how to implement an async helper that resizes the image
https://jsreport.net/learn/templating-engines#asynchronous-helpers

You could do the same, but instead of the resize do a conversion from tiff to a supported image format, like png.
For this task, you can pick a library from the npm. Like this one (may not be a best choice, I just took the first one)
https://github.com/RickCraig/node-tiff-to-png

rdoekes

Hi Jan,

Thank you for your quick response. That looks like the way to go. I know that with jimp you can pretty much do anything related to images, so it does not surprise me that tiff->png conversion is possible as well.

I mocked up the following script:

const Jimp = require('jimp');

async function convert(url) {
    const newImage = await Jimp.read(url);
    const dataUrl = await newImage.getBase64Async(Jimp.MIME_PNG);
    return dataUrl;
}

and I invoke it as such in the template

<img src="data:image/png;base64,{{convert scan1}}" height="1024" width="764"/>

However, this gives me a broken image and a stern warning in the log file:
Page request failed: GET (image) data:image/png;base64,data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACaAAAAywCAYAAAA09DFHAANYHklEQVR4..., failure: net::ERR_INVALID_URL

Any ideas on what this means?

Thanks!

bjrmatos

hi!

it seems the convert helper is already generating the prefix data:image/png;base64 for you, so you don't need to add it, try to change your image to just this

<img src="{{convert scan1}}" height="1024" width="764"/>

rdoekes

I did try that; however that is not working since the original image is a TIFF.

bjrmatos

try another module, it looks to me that the jimp only does image manipulation but does not convert images to different format.

rdoekes

Comination of axios and sharp did the trick:

const axios= require('axios');
const Sharp = require('sharp');

async function convert( url) {
    try {
        const imageResponse = await axios({url: url, responseType: 'arraybuffer'});
        const imageBuffer = Buffer.from(imageResponse.data, 'binary');

        const src = new Sharp(imageBuffer);
        await src.png();
        const buffer = await src.toBuffer();
        return buffer.toString('base64');
    } catch (e) {
        console.log(e);
    }
}