pdfの全てのページをGyazoにアップロードしてScrapboxに貼り付けるUserScript
https://gyazo.com/84ccc7333dcdeebb2af6815cbb0970c8
ページメニューからpdfファイルを選択すると、全てのページをGyazoにアップロードして現在のカーソル位置に貼り付けます。
導入
code:usage.js
import('/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構文とか使って若干整理
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
依存
ライセンス
MIT License Copyright (c) 2020 ci7lus
code: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(
)
await importExternalJs(
)
await importStyle(
)
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.files0 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 Arrays."
// 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:
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(
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))
}
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(
.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()
},
})
code:style.css
a#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;
}
code: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 en)en().then(function(e){f.taskResultsn=e,f.resolvedIndexes.push(n),f.amountResolved++,i()},function(e){if(f.taskResultsn=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+": "+en+", is supposed to be of type function"));f.taskResultsn=en,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.rejectedIndexes0])})})}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})});