Fork me on GitHub
#clojurescript
<
2023-06-01
>
Harry10:06:19

I am trying to read a pdf and convert to an image, but I am struggling creating a js/File to pass into my reader. Running into undeclared var blob

(js/console.log (readFileData (new js/File [blob] "test.pdf")))

delaguardo10:06:30

what is [blob]? is it declared somewhere?

Harry10:06:02

the js to declare a js/File

new File([blob], "filename")

Harry10:06:47

I have the following code to do the conversion:

(defn readFileData
  [file]
  (js/Promise.
    (fn [resolve reject]
      (let [reader (new js/FileReader)]
        (set! (.-onload reader) (fn [e] (resolve (.. e -target -result))))
        (set! (.-onerror reader) (fn [err] (reject err)))
        (js/console.log "Converted")
        (.readAsDataURL reader file)))))

(defn convertPDFToImages
  [file]
  (let [images []
        data (<p! (readFileData "test.pdf"))
        pdf (<p! (.-promise (.getDocument pdfjs data)))
        canvas (.createElement js/document "canvas")
        pages (.numPages pdf)]
    (loop [i 0]
      (if (< i pages)
        (let [page (<p! (.getPage pdf (+ i 1)))
              viewport (.getViewport page {:scale 1})
              context (.getContext canvas "2d")]
          (set! (.-height canvas) (.-height viewport))
          (set! (.-width canvas) (.-width viewport))
          (<p! (.-promise (.render page #js {:canvasContext context, :viewport viewport})))
          (conj images (.toDataURL canvas))
          (.remove canvas)
          (recur (inc i)))
        images))))
Which is converted from: https://stackoverflow.com/questions/61637191/how-to-convert-pdf-to-image-in-reactjs

Harry10:06:47

reader.readAsDataURL(file); or in cljs

(.readAsDataURL reader file)
requires a Blob

delaguardo10:06:03

(new js/File [blob] "test.pdf") this expression expects to have blob clojurescript var defined somewhere.

delaguardo10:06:58

this blob should contain the content of your pdf file

Harry11:06:10

Well I am at a loss. What came first the Blob or the file reader hahah. I'll keep searching, thanks for the help

p-himik12:06:50

If you're in a browser, the only way to get reference to an external file is via <input type="file" ...>.

Harry12:06:48

Yeah that is what I am discovering ;( I found a npm package but it is out of date. Basically I want the user to select a local pdf and convert it to an img to display it locally, but right now I am just trying to get the pdf to img conversion working. If I were to select the file using an input, would I be able to pass it into the reader?

Harry12:06:43

Ok perfect, thanks!

Steph Crown21:06:16

Hi guys. I recently learnt how to generate ClojureScript build report with shadow-cljs. The build report that is written to an HTML file has an Optimized column. What does the Optimized mean?

thheller21:06:01

it is the size of the code that remains after :advanced optimizations/minification are applied

Steph Crown21:06:13

I included the hook so it generates this report when a release is run.

:build-hooks [(shadow.cljs.build-report/hook
                       {:output-to "tmp/report.html"})]
But the issue is that I run this release in a GitHub workflow. How can I preview the generated report in this case?

thheller21:06:24

sorry no clue, never used github workflows.

isak22:06:18

Never used it myself, but maybe look into github action artifacts: https://docs.github.com/en/actions/using-workflows/storing-workflow-data-as-artifacts

🙏 2