信頼性の高い画像プレビューには、Base64 表現のデコードと、結果の画像形式のデコードという 2 つの別々のジョブがあります。ファイルが切り詰められているか、ラベルが間違っているか、ブラウザでサポートされていないため、文字列は最初のステップを通過しても、2 番目のステップで失敗する可能性があります。それらの状態を個別に表示します。
バイト指向のパイプラインを維持する
認識されたデータ URI ラッパーをパーサーを通じて削除し、Base64 を検証して、Uint8Array を取得します。画像バイトをテキスト デコーダ経由でルーティングしないでください。単純なローカル プレビューが必要な場合は、バイトを BLOB でラップし、オブジェクト URL を作成します。これにより、結果を表示するためだけに別の大きな Base64 文字列を組み立てる必要がなくなります。
// bytes is a validated Uint8Array; type comes from checked raster metadata.
async function previewRaster(bytes, type, imageElement) {
const allowed = ['image/png', 'image/jpeg', 'image/webp', 'image/gif'];
if (!allowed.includes(type)) throw new Error('Unsupported raster preview type');
const url = URL.createObjectURL(new Blob([bytes], { type }));
try {
imageElement.src = url;
await imageElement.decode();
return { width: imageElement.naturalWidth, height: imageElement.naturalHeight,
dispose: () => URL.revokeObjectURL(url) };
} catch (error) {
URL.revokeObjectURL(url);
imageElement.removeAttribute('src');
throw error;
}
}オブジェクト URL を必要な期間だけ保持します
プレビューを置換または削除するときに、返された廃棄関数を呼び出します。クリーンアップせずにプレビューを繰り返すと、ブラウザーのリソースが保持されます。イメージがロードされる前に URL を取り消したり、後でダウンロードするために破棄された URL を再利用したりしないでください。ダウンロードを利用可能な状態にしておく必要がある場合は、ダウンロードの有効期間を個別に管理してください。
実際の画像デコーダのフィードバックを使用する
ファイル署名は最初のヒントにすぎません。画像要素のデコード ステップでは、ブラウザが実際に画像要素をロードできるかどうかを確認し、その寸法を公開します。ここでのエラーは、検査またはダウンロードのために元のバイトを保持している間に画像のデコードが失敗したことを示しているはずです。入力を上書きしたり、Base64 アルファベットが無効であると報告したりすることはできません。
可能であれば、負荷の高いレンダリングの前にバイトとサイズの制限を適用します。小さな圧縮ファイルに非常に大きな画像を記述することができます。 SVG を通常のラスター ペイロードとして扱うことは避けてください。これは、セキュリティに関するさまざまな考慮事項を備えた構造化マークアップです。プレビューを機能させるために、未知の SVG または HTML をページに直接挿入しないでください。
最後に、プレビューと変換を区別します。画像要素に JPEG を表示しても、PNG は作成されません。変換するには、デコードされたイメージをキャンバスに描画し、品質と透明度を明示的に選択して、選択した形式でエクスポートする必要があります。 Data URI ラッパーについては、以下で説明されています。 MDN: データ URL;プレビューの成功はブラウザ形式のチェックのままであり、一般的な安全性の認定ではありません。