Vue3 读取Hdr 文件转Image显示-526互联

import { decodeRGBE } from '@derschmale/io-rgbe'; //引入io-rgbe
//读取Hdr文件
const ReadHdrFile = (buffer: ArrayBufferLike & { BYTES_PER_ELEMENT?: undefined; }) => {

    const hdri = decodeRGBE(new DataView(buffer))
    const data = hdri.data;
    const tgt = new Uint8ClampedArray(data.length / 3 * 4);
    const gamma = 1.0 / 2.2;
    let exposure = 1;
    for (let i = 0, j = 0; i < data.length; i += 3) {
        tgt[j] = Math.pow(data[i] * exposure, gamma) * 0xff;
        tgt[j + 1] = Math.pow(data[i + 1] * exposure, gamma) * 0xff;
        tgt[j + 2] = Math.pow(data[i + 2] * exposure, gamma) * 0xff;
        tgt[j + 3] = 0xff;
        j += 4;
    }

    const imageData = new ImageData(tgt, hdri.width, hdri.height);
    function imgDataToImage(imagedata: ImageData) {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = imagedata.width;
        canvas.height = imagedata.height;
        ctx?.putImageData(imagedata, 0, 0);


        canvas.remove();
        return canvas.toDataURL();
    }
    return imgDataToImage(imageData);

}


 const reader = new FileReader(); 

    reader.onload = (event: any) => {

        const buffer = event.target.result;

        var img = ReadHdrFile(buffer);
      
    };

    reader.readAsArrayBuffer(file);