Cropper.js でアップロードした画像をリサイズしたファイルをダウンロードする

const fileUpload = document.querySelector('#fileUpload');
let cropper, img; //変数追加fileUpload.addEventListener('change', (e) => {
  //ファイルを選んでいないときのCropperJS発火防止
  if (e.target.files[0] === undefined) {    return false;  }  const file = e.target.files[0];
  const blobUrl = window.URL.createObjectURL(file);

  if (cropper === undefined) { //インスタンス化されていないときの処理    //パスを格納する要素を作成
    const img = document.createElement('img')
    img.src = blobUrl
    fileUpload.parentNode.insertBefore(img, fileUpload.nextElementSibling);
    cropper = new Cropper(img, {      aspectRatio: 1 / 1,      scalable: false,      zoomable: false,    });  } else { //インスタンス化されており画像の変更があったときの処理    cropper.replace(blobUrl);  }})

const fileUpload = document.querySelector('#fileUpload');
let cropper, img, trimBtn, base64Data;//trimBtn, base64Data追加fileUpload.addEventListener('change', (e) => {
  //省略
  if (cropper === undefined) {
    // トリムボタンを作成
    trimBtn = document.createElement('button')    trimBtn.type = 'button';    trimBtn.textContent = 'トリム'    // トリムボタンをimgタグの下に挿入
    img.parentNode.insertBefore(trimBtn, img.nextElementSibling);
    cropper = new Cropper(img, {
      aspectRatio: 1 / 1,
      scalable: false,
      zoomable: false,
    });
  } else {
    cropper.replace(blobUrl);
  }
  //トリムボタンをクリックしたらデータ取得  trimBtn.addEventListener('click', () => {    const croppedCanvas = cropper.getCroppedCanvas({ width: 300, height: 300 });    base64Data = croppedCanvas.toDataURL("image/jpeg");    console.log(base64Data);//データ出力を確認  })})

//省略
trimBtn.addEventListener('click', () => {
  //省略
  base64Data = croppedCanvas.toDataURL("image/jpeg");  const bin = atob(base64Data.replace(/^.*,/, ''));  const buffer = new Uint8Array(bin.length);  for (let i = 0; i < bin.length; i++) {    buffer[i] = bin.charCodeAt(i);  }  //バイナリファイル化  const blob = new Blob([buffer.buffer], { type: "image/jpeg" })})
//省略

//省略
  trimBtn.addEventListener('click', () => {
    //省略

    //バイナリファイル化
    const blob = new Blob([buffer.buffer], { type: "image/jpeg" })    //ダウンロード用のaタグを生成    const linkTag = document.createElement('a');    const link = URL.createObjectURL(blob)    linkTag.href = link;    //ファイル名用    const now = new Date();    linkTag.download = `resize-${now.getTime()}.jpg`;    linkTag.textContent = "ダウンロードする";    trimBtn.parentNode.insertBefore(linkTag, trimBtn.nextElementSibling);    //強制的にクリックしてダウンロード    linkTag.click();  })
//省略