要件

1. 画像をBase64形式に変換する
2. Base64データをバイナリ配列に変換する
3. バイナリデータをファイルとしてダウンロードする

実装方法

1. 画像をBase64形式に変換

FileReader APIを使用して、アップロードされた画像ファイルをBase64エンコードされたデータURLに変換します。

convertToBase64(targetFile) {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.readAsDataURL(targetFile);
    
    fileReader.onload = () => {
      resolve(fileReader.result);
    };
    
    fileReader.onerror = (error) => {
      reject(error);
    };
  });
}

アップロード処理：

beforeUploadHandler(file) {
  this.convertToBase64(file).then(base64String => {
    console.log('Base64データ:', base64String);
  }).catch(error => {
    console.error('変換エラー:', error);
  });
}

2. Base64データをバイナリ配列に変換

Base64文字列からMIMEヘッダー部分を除去し、window.atob()でデコードしてバイナリ文字列に変換します。その後、Uint8Array形式に変換します。

convertBase64ToBinary(base64String) {
  const base64Content = base64String.split(',')[1];
  const binaryString = window.atob(base64Content);
  
  const byteArray = new Uint8Array(binaryString.length);
  for (let i = 0; i < binaryString.length; i++) {
    byteArray[i] = binaryString.charCodeAt(i);
  }
  
  return byteArray;
}

使用例：

beforeUploadHandler(file) {
  this.convertToBase64(file).then(base64String => {
    const binaryArray = this.convertBase64ToBinary(base64String);
    console.log('バイナリ配列:', binaryArray);
  });
}

3. バイナリデータをファイルとしてダウンロード

Blobオブジェクトを使用してバイナリデータをファイルとして保存します。ダウンロードリンクを動的に生成してクリックイベントをトリガーします。

downloadBinaryData(dataArray, filename, mimeType = 'application/octet-stream') {
  const binaryBlob = new Blob([dataArray], { type: mimeType });
  const downloadLink = document.createElement('a');
  downloadLink.href = URL.createObjectURL(binaryBlob);
  downloadLink.download = filename;
  downloadLink.style.display = 'none';
  
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
  URL.revokeObjectURL(downloadLink.href);
}

統合した使用例：

beforeUploadHandler(file) {
  this.convertToBase64(file).then(base64String => {
    const binaryArray = this.convertBase64ToBinary(base64String);
    const fileName = `${Date.now()}.bin`;
    
    this.downloadBinaryData(binaryArray, fileName);
  });
}