UploadPDFCoverToGyazo
PDFの1ページ目を画像としてGyazoにアップロードするUserScript
参考: /ci7lus/pdfの全てのページをGyazoにアップロードしてScrapboxに貼り付けるUserScript
使い方: 以下のimport...を自分のページに書く (例)
code:js
import '/api/code/shoya140/UploadPDFCoverToGyazo/script.js'
code:script.js
/* MIT License Copyright (c) 2022 Shoya Ishimaru */
/* This UserScript is a modified version of pdfの全てのページをGyazoにアップロードしてScrapboxに貼り付けるUserScript written by ci7lus and is subject to the same license.
/* MIT License Copyright (c) 2020 ci7lus */
import { importExternalJs } from "/api/code/ci7lus/userscript-utils/import-external-js.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")
import { insertText } from "/api/code/customize/scrapbox-insert-text/script.js"
const file2Pdf = async (file) => {
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に上げたものを用いる
return await pdfjsLib.getDocument({
data: pdfObj,
cMapUrl:
"https://storage.googleapis.com/chrono-lexica/ci7lus-assets/pdfjs/cmaps/",
cMapPacked: true,
}).promise
}
const pdf2Image = async (pdfPage) => {
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
return new Promise((res) =>
canvas.toBlob(res, "image/jpeg", 0.95)
)
}
const uploadImage = async (imageBlob, fileName) => {
const project = await fetch(
https://scrapbox.io/api/projects/${scrapbox.Project.name}
)
const { gyazoTeamsName } = await project.json()
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 formData = new FormData()
formData.append("imagedata", imageBlob)
formData.append("access_token", token)
formData.append("referer_url", location.href)
formData.append("title", fileName)
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()
return permalink_url
}
scrapbox.PageMenu.addItem({
title: "Upload cover of PDF",
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.files0
const progressArea = document.createElement("div")
progressArea.style =
"position: fixed; bottom: 0; right: 0; margin: 1rem; padding: 1rem; background: #FFF; color: 000; z-index: 9999;"
progressArea.innerText = "Uploading..."
document.body.appendChild(progressArea)
// Array.prototypeからgetIndexByTitleLcを一時的に取り除く
// https://scrapbox.io/ci7lus/pdfの全てのページをGyazoにアップロードしてScrapboxに貼り付けるUserScript
const getIndexByTitleLc = Array.prototype.getIndexByTitleLc
delete Array.prototype.getIndexByTitleLc
try {
const pdf = await file2Pdf(file)
const coverPage = await pdf.getPage(1)
const image = await pdf2Image(coverPage)
const gyazoUrl = await uploadImage(image, file.name)
insertText({
text: [${gyazoUrl}]\n,
})
} catch (e) {
console.log("failed", file, e)
alert(Failed to upload page)
} finally {
document.body.removeChild(progressArea)
Array.prototype.getIndexByTitleLc = getIndexByTitleLc
}
})
input.click()
},
})