

よろしくお願い致します。  
基本はタイトルの通りとなっております。

詳細に書くと、  
ブラウザ上でzipファイルを受け取り、JS上でzipを解凍後、中に入っている画像データをlocalStorageに保存し次の画面に遷移させ利用したい。といった目的があります。  
重要なのは、画像データを一旦サーバーなどにおかずクライアント内で完結させたい、という所です。  
なので、質問の答えにはなっていなくても、例えばlocalStorageを使わずこういうことをやると目的を満たせるよ、というのがもしあれば、そういったのもお待ちしております。

試したことは

[code]

    // blobには画像データが入っています。
    
    const str = await blob.text();
    
    const reBlob = new Blob([str], {type: 'image/png'});
    
    const fileReader = new FileReader();
    fileReader.readAsDataURL(reBlob);
    fileReader.onload = () => {
        document.getElementById('imageElement').src = this.result;
    }
    
[/code]

というコードを書いてみましたが、返ってくるdataUrlはどうやら正しくないようで、imgタグの画像が存在しないときに表示されるアイコンが表示されています。

このような書き方では上手く行かないのでしょうか。

いくつかのサイトを見てみましたが、私のような状況に陥っている方を見つけられず、質問させていただきます。


CC BY-SA 4.0
2021-05-04T17:22:14.773
75673
2022-05-05T02:07:10.713
45126
question
javascript
JavaScript Blob.text()から得られた文字列を再度Blobへ変換し、DataURLを作成したい。


自己解決致しました。

一度strに変換しているのは、その時点でFileReaderを用いて非同期処理を入れるとコードが複雑になるため行っておりましたが、FileReaderを継承した独自FileReaderクラスを作成することで解決できました。

[code]

    export class MyFileReader extends FileReader {
        constructor() {
            super();
        }
    
        public readAsDataURL(blob: Blob): Promise<string|ArrayBuffer|null> {
            return this.readAs(blob, 'readAsDataURL');
        }
    
        private readAs(blob: Blob, callback: string): Promise<string|ArrayBuffer|null> {
            return new Promise((resolve, reject) => {
                super.addEventListener('load', ({target}) => {
                    resolve(target!.result);
                });
                super.addEventListener('error', ({target}) => {
                    reject(target!.error);
                });
                // @ts-ignore
                super[callback](blob);
            });
        }
    }
    
    const str = await new MyFileReader().readAsDataURL(blob) as string;
    
    document.getElementById('imageElement').src = str;
    
[/code]


CC BY-SA 4.0
2021-05-06T08:30:27.450
75695
2021-05-06T08:30:27.450
45126
75673
answer