Problem to display .tiff pictures when they are too large with vueJS-CodePudding

I can display .tiff pictures on my navigator, with this function :

GDAL.gdal_translate(tifDataset, options).then((output) => {
  GDAL.getFileBytes(output).then((bytes) => {
    base64Data = btoa(String.fromCharCode.apply(null, bytes));

    const img = document.createElement("img");
    img.src = "data:image/png;base64,"   base64Data;
    elm.appendChild(img);
    const body = document.querySelector("body");
  });
});

But, if the picture is too voluminous, i have an error in my console :

Uncaught (in promise) RangeError: Maximum call stack size exceeded

I don't know how to resolve it, please help me !

CodePudding user response：

The length of bytes is causing the issue with String.fromCharCode.apply ... you can't have hundreds of thousands of arguments for a function

try this instead

base64Data = btoa(bytes.toString().split(',').map(c => String.fromCharCode(c)).join(''))

or perhaps better

base64Data = btoa([...bytes].map(c => String.fromCharCode(c)).join(''))