<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.10.111/pdf.js"></script>

<script>
// pdf.js 從性能考慮，使用了 WebWorker, 在瀏覽器子線程解析圖片等資源，不阻塞頁(yè)面UI和交互。
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@3.10.111/build/pdf.worker.js';
</script>

<input type="file" id="fileInput" name="avatar" title ="選擇 pdf 文件"/>

<script>
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener(
  "change",
  () => {
    const file = fileInput.files[0];
    console.log('fileInput file: ', file);
    // 上傳文件時(shí)，使用 FileReader 對(duì)象讀取
    var fileReader = new FileReader();
    fileReader.onload = function() {
          // 將文件對(duì)象轉(zhuǎn)化為 Uint8Array 
          var typedarray = new Uint8Array(this.result);
          // 返回 PDF 加載任務(wù) PDFDocumentLoadingTask
          const loadingTask = pdfjsLib.getDocument(typedarray);
          // 開始加載 PDF，這里封裝了一個(gè)函數(shù)
          loadPDFFile(loadingTask);
    };

    fileReader.readAsArrayBuffer(file);
  },
  false
);
</script>

async function loadPDFFile(loadingTask) {
  // PDF 加載任務(wù)
  const pdf = await loadingTask.promise;
  // 獲取 PDF 頁(yè)數(shù)
  const numPages = pdf.numPages;
  for (let curPage = 1; curPage <= numPages; curPage++) {
    // 返回當(dāng)前頁(yè)
    console.log('loadingServerFile curPage: ', curPage);
    const page = await pdf.getPage(curPage);

    const scale = 1.5;
    // 獲取渲染視角尺寸
    const viewport = page.getViewport({ scale });
    // Support HiDPI-screens.
    const outputScale = window.devicePixelRatio || 1;
    // 傳入離屏 Canvas
    const canvas = new OffscreenCanvas(200, 200);
    // 獲取 Canvas 上下文
    const context = canvas.getContext("2d");
    // 轉(zhuǎn)換尺寸
    const transform = outputScale !== 1 
      ? [outputScale, 0, 0, outputScale, 0, 0] 
      : null;

    const renderContext = {
      canvasContext: context,
      transform,
      viewport,
    };
    // 調(diào)用 page.render 觸發(fā)渲染
    const renderTask = page.render(renderContext);
    // 等待 renderTask 渲染任務(wù)
    // await delay(500); // 如果渲染過快，可能導(dǎo)致 CPU 飆升、電腦可用內(nèi)存不夠，可以加延遲減慢速度
    await renderTask.promise;
  }
}

async function loadPDFFile(loadingTask) {
    // ...接上一步
    const renderTask = page.render(renderContext);
    // 等待當(dāng)前頁(yè)渲染任務(wù)執(zhí)行
    await renderTask.promise;
    // 獲取操作列表
    const ops = await page.getOperatorList();

    // 提取圖片
    const imageNames = ops.fnArray.reduce((acc, curr, i) => {
      if ([pdfjsLib.OPS.paintImageXObject, pdfjsLib.OPS.paintJpegXObject].includes(curr)) {
        acc.push(ops.argsArray[i][0]);
      }
      return acc;
    }, []);
    for (const imageName of imageNames) {
      console.log('imageName: ', imageName);
      page.objs.get(imageName, (image) => {
        // console.log('image: ', image);
        (async function() {          
          const bmp = image.bitmap;
          // create a canvas
          console.log('bmp: ', bmp);
        })();      
      });
    }
}

async function loadPDFFile(loadingTask) {
    // ...接上一步，拿到了每頁(yè) PDF 的 image.bitmap 對(duì)象
    for (const imageName of imageNames) {
      console.log('imageName: ', imageName);
      page.objs.get(imageName, (image) => {
        // console.log('image: ', image);
        (async function() {          
            const bmp = image.bitmap;
            console.log('bmp: ', bmp);
            // OffscreenCanvas
            const resizeScale = 1/4; // 這個(gè)可以控制轉(zhuǎn)換后的圖片大小
            const width = bmp.width * resizeScale;
            const height = bmp.height * resizeScale;
            const canvas = new OffscreenCanvas(width, height);
            // 獲取 canvas bitmaprenderer 上下文
            const ctx = canvas.getContext('bitmaprenderer');
            // 把 ImageBitmap 渲染到 OffscreenCanvas
            ctx.transferFromImageBitmap(bmp);
            // 把 canvas 畫布轉(zhuǎn)化為 Blob 對(duì)象
            // https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas/convertToBlob
            const blob = await canvas.convertToBlob();
            console.log('blob: ', blob); // blob
            // 最后使用 Blob 作為 URL.createObjectURL 的參數(shù)，渲染出 img 圖片
            // 如果不需要渲染，則可以講 Blob 數(shù)據(jù)上傳到云存儲(chǔ)
            const img = document.body.appendChild(new Image());
            img.width = width;
            img.height = height;
            img.src = URL.createObjectURL(blob);
        })();      
      });
    }
}