Angular 13实现J2K转PNG：Base64格式图片转换方案

浏览器原生不支持解析JPEG2000格式，需借助第三方解码库实现转换，以下是具体实现方案：

步骤1：安装JPEG2000解码库 #

使用轻量库openjpeg.js处理解码，通过npm安装：

npm install openjpeg.js

步骤2：修改组件实现转换逻辑 #

更新my-component.component.ts，集成解码与格式转换逻辑：

import { Component, OnInit } from '@angular/core';
import { decode } from 'openjpeg.js';

@Component({
    selector: 'dha-my-component',
    templateUrl: './my-component.component.html',
    styleUrls: ['./my-component.component.scss']
})
export class MyComponentComponent implements OnInit {
    imageData: string;

    constructor() {}

    ngOnInit(): void {
        const testJ2KImage = '/0//UQA...'; // 你的JPEG2000 Base64纯数据
        this.convertJ2kToPng(testJ2KImage).then(pngBase64 => {
            this.imageData = pngBase64;
        });
    }

    async convertJ2kToPng(base64Data: string): Promise<string> {
        try {
            // 将Base64转为ArrayBuffer
            const binaryStr = atob(base64Data);
            const buffer = new ArrayBuffer(binaryStr.length);
            const view = new Uint8Array(buffer);
            for (let i = 0; i < binaryStr.length; i++) {
                view[i] = binaryStr.charCodeAt(i);
            }

            // 解码JPEG2000数据
            const decodedImage = decode(buffer);
            const { width, height, data } = decodedImage;

            // 绘制到Canvas并转换为PNG
            const canvas = document.createElement('canvas');
            canvas.width = width;
            canvas.height = height;
            const ctx = canvas.getContext('2d');
            const imageData = ctx.createImageData(width, height);
            imageData.data.set(data);
            ctx.putImageData(imageData, 0, 0);

            // 返回去除前缀的PNG Base64
            return canvas.toDataURL('image/png').replace('data:image/png;base64,', '');
        } catch (error) {
            console.error('JPEG2000转PNG失败:', error);
            throw error;
        }
    }
}

步骤3：模板保持原有绑定 #

my-component.component.html无需修改，继续使用原有img标签逻辑：

<img [src]="'data:image/png;base64,' + imageData" class="img img-responsive" />

注意事项 #

• 确保传入的JPEG2000 Base64是纯数据部分（无data:image/jp2;base64,前缀），若有前缀需先移除。
• 若解码失败，可检查数据完整性或尝试其他解码库（如jpeg2000.js）。

内容的提问来源于stack exchange，提问作者Lukho Mdingi