LoginSignup
0

More than 1 year has passed since last update.

pdfに海苔貼りたくなった(Vue 3 + TypeScript + Vite)

Last updated at Posted at 2022-09-08

PDFに海苔貼りたくなる時あるよねぇ

というわけで作ってみました

pdfファイルを選択して

スクリーンショット 2022-09-08 20.53.47.png

PDFが表示されて

スクリーンショット 2022-09-08 20.53.59.png

ドラッグで海苔を貼っていくぅ

スクリーンショット 2022-09-08 20.54.16.png

「to png」を押してpngに変換するぅ

スクリーンショット 2022-09-08 20.54.24.png

あとはDLでもしてもらえれば・・・

ソースとサイト

解説

環境はVue 3 + TypeScript + Vite

pdfjsでcanvasに出力したpdfにお絵描きしています

バグはあるかもしれません

つまった所と解決策

毎フレームawait page.renderしてチラついた

render後の画像を持っておく

canvasを画像化する時にクリックイベントでやると不完全な画像になる

画像化用の変数を用意してcanvasの描画処理の最後で出力する

pdfの日本語が表示されない時がある

cmapsを指定する

本番でcmap読めない

cmapsをコピる

おわり

JSのセミコロン省略したいけどつい書いちゃいますね

Vue3のsetupいいですねぇ

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0