Using it with Base64 string

[emranashraf]

Hi,

I am getting base64 Tiff string from database. How can I use it with the string.

I tried following

var tiff = new Tiff({ buffer: data.content });
but getting this error
1.tiff: Cannot read TIFF header.

Thanks
Imran

[denisoby]

The question is unclear because of missing environment details. But if you are running it in browser and data.content is base64 function - look at atob function that converts base64 to binary.

In simplest case it may be like

var tiff = new Tiff({ buffer: atob(data.content) });

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/atob

For nodejs you should install package https://www.npmjs.com/package/atob

[gheloperez]

i've tried this

var tiff = new Tiff({ buffer: atob(data.content) });

but getting an error
TypeError: Cannot read property 'slice' of null
at r (webpack-internal:///./node_modules/tiff.js/tiff.min.js:951)
at eval (webpack-internal:///./node_modules/tiff.js/tiff.min.js:1012)
at loadModule (webpack-internal:///./node_modules/tiff.js/tiff.min.js:1049)
at Function.Lb.initialize (webpack-internal:///./node_modules/tiff.js/tiff.min.js:75346)
at new Lb (webpack-internal:///./node_modules/tiff.js/tiff.min.js:75339)
at TransactionDetailsController.detail.download (webpack-internal:///./src/main/webapp/app/transactiondetails/transactionDetailsController.js:30)
at fn (eval at compile (webpack-internal:///./node_modules/angular/angular.js), :4:240)
at callback (webpack-internal:///./node_modules/angular/angular.js:29070)
at Scope.$eval (webpack-internal:///./node_modules/angular/angular.js:19550)
at Scope.$apply (webpack-internal:///./node_modules/angular/angular.js:19653)
at HTMLButtonElement.eval (webpack-internal:///./node_modules/angular/angular.js:29076)
at defaultHandlerWrapper (webpack-internal:///./node_modules/angular/angular.js:3860)
at HTMLButtonElement.eventHandler (webpack-internal:///./node_modules/angular/angular.js:3848)

i've also tried converting the base64 string to an arrayBuffer but same error occurs

[wilcus]

@gheloperez I think the problem is webpack. I use webpack 3.8 and works. But I upgrade to 4 and is broken.

Here the origin of the problem in
var parsed = jsfunc.toString().match(sourceRegex).slice(1);

[mpkelly]

Using the result of atob did not work for me. I was able to convert from base64 using the following function though

function _base64ToArrayBuffer(base64) {
    var binary_string = window.atob(base64);
    var len = binary_string.length;
    var bytes = new Uint8Array(len);
    for (var i = 0; i < len; i++) {
        bytes[i] = binary_string.charCodeAt(i);
    }
    return bytes.buffer;
}

//Usage

const buffer = base64ToArrayBuffer(base64Tiff);
const tiff = new Tiff({ buffer });

[yasertalha]

Using correct read type as follows will work.

const reader = new FileReader();
const imageType = 'your image type'
if ( imageType.toLowerCase()==='image/tiff' || imageType.toLowerCase()==='image/tif')
{
reader.readAsArrayBuffer(file);
}
else {
reader.readAsDataURL(file);
}