/ci7lus/pdfの全てのページをGyazoにアップロードしてScrapboxに貼り付けるUserScript

generated at 11/17/2024, 11:03:31 PM
pdfの全てのページをGyazoにアップロードしてScrapboxに貼り付けるUserScript

ページメニューからpdfファイルを選択すると、全てのページをGyazoにアップロードして現在のカーソル位置に貼り付けます。

参考: PDF を全部 Gyazo に展開して Scrapbox のページにする

導入
usage.jsimport('/api/code/ci7lus/pdfの全てのページをGyazoにアップロードしてScrapboxに貼り付けるUserScript/script.js');
コード中importにトップレベルawaitを使用しているため読み込みに失敗し、iOS Safariなどでは後述のimportに影響するかもしれません、 import() を用いてください

コツ
pdf選択後、貼り付けに入る前にカーソル | を貼り付けたい部分においておいてください

既知の不具合
貼り付け完了後にカーソルが固まる（エンターで抜けられる）
多分EnterのEventをうまく出せてないんだと思います、直し方知ってる人いたら教えてください
pdfjs@2.2.228
最新Vだと謎のエラーで失敗するのであえて少し古いバージョンを採用しています
prototype汚染をごまかしたところ、解消
cspのworker: self縛りのためFake workerが使われ、一部文字が描画されない
助けて〜
少なくとも\omega \thetaについては描画されるようになった

Changelog
2021/10/1
Gyazo連携アップロード（3rd party cookie廃止対策）に対応
チームで使ったときの挙動がよくわかんないので、GyazoTeams使ってる人いたらうまく動くか教えて下さい、alert消すので
2021/9/17
pdfjsのバージョンを上げたところ、pdfから一部文字が抜け落ちるのが直った気がする
2021/7/21
 import 構文とか使って若干整理
参考: /takker/PDFをGyazoにあげてScrapboxに取り込むUserScript
2021/7/6
 Font Awesome 5 Free 
2020/11/26
画像サイズ大きめ貼り付けは window.pdfscrap_big === true のときだけになりました
2020/10/8
 [[]] で画像を貼り付けるかどうかConfirmするようになりました
2020/10/3
promise-parallel-throttleを導入、5枚づつ上がるようになりました
登録順序は保証されます
スクリプト名変えた
検索に全然引っかからんかったので
2020/9/24
devicePixelRatioを展開サイズに考慮、取得できなかったら1.5

依存
pdfjs
promise-parallel-throttle

ライセンス
このコードはMIT Licenseにて提供されます。
> MIT License Copyright (c) 2020 ci7lus

script.js/* MIT License Copyright (c) 2020 ci7lus */

import { importExternalJs } from "/api/code/ci7lus/userscript-utils/import-external-js.js"
import { importStyle } from "/api/code/ci7lus/userscript-utils/import-style.js"
await importExternalJs(
  "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"
)
await importExternalJs(
  "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js"
)
await importStyle(
  "https://scrapbox.io/api/code/ci7lus/pdfの全てのページをGyazoにアップロードしてScrapboxに貼り付けるUserScript/style.css"
)
import "/api/code/ci7lus/pdfの全てのページをGyazoにアップロードしてScrapboxに貼り付けるUserScript/throttle.js"
import { insertText } from "/api/code/customize/scrapbox-insert-text/script.js"

scrapbox.PageMenu.addMenu({
  title: "upload-pdf",
  image: "/assets/img/logo_cut.svg",
  onClick: async () => {
    const input = document.createElement("input")
    input.type = "file"
    input.accept = "application/pdf,.pdf"
    input.addEventListener("change", async () => {
      if (input.files.length === 0) return
      const file = input.files[0]
      const filename = file.name
      console.log(file)
      // 進捗表示エリア
      const progressArea = document.createElement("div")
      progressArea.style =
        "position: fixed; top: 0; right: 0; margin: 1rem; padding: 1rem; background: #FFF; color: 000; z-index: 9999;"
      progressArea.innerText = "reading..."
      document.body.appendChild(progressArea)
      // "Error: The `Array.prototype` contains unexpected enumerable properties: getIndexByTitleLc; thus breaking e.g. `for...in` iteration of `Array`s."
      // Array.prototype に変なプロパティが付いてると落ちる謎仕様になっていたのでアップロード中は削除する
      const getIndexByTitleLc = Array.prototype.getIndexByTitleLc
      delete Array.prototype.getIndexByTitleLc
      try {
        // File/BlobをArrayBufferに変換
        const pdfObj = await new Promise((res, rej) => {
          const reader = new FileReader()
          reader.onerror = rej
          reader.onload = () => {
            res(reader.result)
          }
          reader.readAsArrayBuffer(file)
        })
        // cors制限のためcmapsはstorage.googleapis.comに上げたものを用いる
        const pdf = await pdfjsLib.getDocument({
          data: pdfObj,
          cMapUrl:
            "https://storage.googleapis.com/chrono-lexica/ci7lus-assets/pdfjs/cmaps/",
          cMapPacked: true,
        }).promise
        const metadata = await pdf.getMetadata()
        console.log(metadata)
        const isBigImage = window.pdfscrap_big || false
        progressArea.innerText = "pdf file loaded. Uploading to gyazo..."
        let progress = 0
        const updateProgressText = () => {
          progressArea.innerText = `Uploading... (${progress++}/${
            pdf.numPages
          })`
        }

        const project = await fetch(
          `https://scrapbox.io/api/projects/${scrapbox.Project.name}`
        )
        const { gyazoTeamsName } = await project.json()

        if (gyazoTeamsName) {
          alert(
            "Gyazo Teamsを使ったことがないのでアップロードがおかしくなるかもしれません(可能であればTwitter@ci7lusまで動作確認報告お願いします)"
          )
        }

        const gyazoOAuthToken = await fetch(
          `https://scrapbox.io/api/login/gyazo/oauth-upload/token?gyazoTeamsName=${
            gyazoTeamsName || ""
          }`,
          {
            headers: {
              accept: "application/json, text/plain, */*",
            },
            method: "GET",
          }
        )
        const { token } = await gyazoOAuthToken.json()
        const uploadPage = async (page) => {
          const pdfPage = await pdf.getPage(page)
          const viewport = pdfPage.getViewport({
            scale: window.devicePixelRatio || 1.5,
          })
          const canvas = document.createElement("canvas")
          const ctx = canvas.getContext("2d")
          const renderContext = {
            canvasContext: ctx,
            viewport: viewport,
          }

          canvas.height = viewport.height
          canvas.width = viewport.width

          await pdfPage.render(renderContext).promise

          /** @type {string} */
          let imageUrl
          if (token) {
            console.info("Gyazo OAuth 経由でアップロードします")

            const imageBlob = await new Promise((res) =>
              canvas.toBlob(res, "image/jpeg", 0.95)
            )

            const formData = new FormData()
            formData.append("imagedata", imageBlob)
            formData.append("access_token", token)
            formData.append("referer_url", location.href)
            formData.append("title", filename)

            while (true) {
              // 登録順序を保証する
              if (page - 1 <= progress) {
                break
              }
              await new Promise((res) => setTimeout(() => res(), 100))
            }

            const upload = await fetch("https://upload.gyazo.com/api/upload", {
              headers: {
                accept: "application/json, text/plain, */*",
              },
              referrerPolicy: "same-origin",
              body: formData,
              method: "POST",
              mode: "cors",
              credentials: "omit",
            })
            const { permalink_url } = await upload.json()
            imageUrl = permalink_url
          } else {
            console.info("Gyazo Easy_Auth 経由でアップロードします")

            const dataUrl = canvas.toDataURL("image/jpeg")

            const formData = new FormData()
            formData.append("image_url", dataUrl)
            formData.append(
              "client_id",
              "5a56f659c139358389c8c4838555135907d7edfbb98b9465aa6c51200e11dec5"
            )
            formData.append("referer_url", location.href)
            formData.append("title", filename)

            const easyAuth = await fetch(
              `https://upload.gyazo.com/api/upload/easy_auth`,
              {
                method: "POST",
                mode: "cors",
                credentials: "include",
                body: formData,
              }
            )
            const uploadResult = await easyAuth.json()

            while (true) {
              // 登録順序を保証する
              if (page - 1 <= progress) {
                break
              }
              await new Promise((res) => setTimeout(() => res(), 100))
            }

            const getImage = await fetch(uploadResult.get_image_url, {
              mode: "cors",
              credentials: "include",
            })
            imageUrl = getImage.url
          }

          updateProgressText()
          console.log(`page${page} -> ${imageUrl}`)
          return imageUrl
        }
        const pages = await throttle.all(
          [...Array(pdf.numPages).keys()]
            .map((i) => i + 1)
            .map((page) => () => uploadPage(page))
        )
        progressArea.innerText = "done"
        const urls = pages.map((url) =>
          isBigImage ? `[[${url}]]` : `[${url}]`
        )
        urls.unshift(file.name)
        insertText({
          text: urls.join("\n") + "\n",
        })
      } catch (e) {
        console.log("failed", file, e)
        alert(`failed to load: ${filename}`)
      } finally {
        document.body.removeChild(progressArea)
        Array.prototype.getIndexByTitleLc = getIndexByTitleLc
      }
    })
    input.click()
  },
})

style.cssa#upload-pdf.tool-btn:hover {
  text-decoration: none;
}
a#upload-pdf.tool-btn::before {
  position: absolute;
  left: calc(46px / 3 - 1px);
  content: "\f1c1";
  font: 21px/46px "Font Awesome 5 Free";
}
a#upload-pdf.tool-btn img {
  opacity: 0;
}

promise-parallel-throttle
throttle.js/*
MIT License

Copyright (c) 2016 Dirk-Jan Wassink

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((e=e||self).throttle={})}(this,function(e){"use strict";var n={maxInProgress:5,failFast:!1,nextCheck:function(e,n){return Promise.resolve(e.amountStarted<n.length)},ignoreIsFunctionCheck:!1};function t(e,t){return new Promise(function(o,s){var c=Object.assign({},n,t),f={amountDone:0,amountStarted:0,amountResolved:0,amountRejected:0,amountNextCheckFalsey:0,rejectedIndexes:[],resolvedIndexes:[],nextCheckFalseyIndexes:[],taskResults:[]};if(0===e.length)return o(f);for(var u=!1,a=0,i=function(){if(!0!==u){if(f.amountDone++,"function"==typeof c.progressCallback&&c.progressCallback(f),f.amountDone===e.length)return o(f);a<e.length&&r(a++)}},r=function(n){c.nextCheck(f,e).then(function(t){!0===t?function(n){if(f.amountStarted++,"function"==typeof e[n])e[n]().then(function(e){f.taskResults[n]=e,f.resolvedIndexes.push(n),f.amountResolved++,i()},function(e){if(f.taskResults[n]=e,f.rejectedIndexes.push(n),f.amountRejected++,!0===c.failFast)return u=!0,s(f);i()});else{if(!0!==c.ignoreIsFunctionCheck)return u=!0,s(new Error("tasks["+n+"]: "+e[n]+", is supposed to be of type function"));f.taskResults[n]=e[n],f.resolvedIndexes.push(n),f.amountResolved++,i()}}(n):(f.amountNextCheckFalsey++,f.nextCheckFalseyIndexes.push(n),i())},s)},h=0;h<Math.min(c.maxInProgress,e.length);h++)r(a++)})}function o(e,n){return new Promise(function(o,s){t(e,n).then(function(e){o(e.taskResults)},function(e){e instanceof Error?s(e):s(e.taskResults[e.rejectedIndexes[0]])})})}e.raw=t,e.sync=function(e,n){return o(e,Object.assign({},{maxInProgress:1,failFast:!0},n))},e.all=function(e,n){return o(e,Object.assign({},{failFast:!0},n))},Object.defineProperty(e,"__esModule",{value:!0})});

#ScrapboxUserScript