ci7lus PDFローダ カスタム
ci7lusさんの以下のコードを改変することなく、その挙動だけを上書きで変更するスクリプトです。
/ci7lus/pdfの全てのページをGyazoにアップロードしてScrapboxに貼り付けるUserScript
上記のコードを読み込んでいます。
いつも愛用させてもらっています。ありがとうございます。
変更
前
PageMenuからボタンクリックで呼び出し
画像は圧縮されている状態
後
関数として呼び出し
引数は(filename, arraybuffer)です。
filenameに大した意味はないです
arraybufferにはPDFファイルのデータを読み込んで下さい
元の解像度で画像を表示
なぜコードを改変せず上書き修正にとどめたかというと、単なる酔狂です。
コード例、兼、PageMenu登録スクリプト
code:register.js
import loader from "https://scrapbox.io/api/code/public-minaph/ci7lus_PDF%E3%83%AD%E3%83%BC%E3%83%80_%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0/script.js";
scrapbox.PageMenu.addMenu({
title: "upload-pdf-mod",
icon: "kamon kamon-document",
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
const pdfObj = await new Promise((res, rej) => {
const reader = new FileReader()
reader.onerror = rej
reader.onload = () => {
res(reader.result)
}
reader.readAsArrayBuffer(file)
});
await loader(filename, pdfObj)
});
input.click();
}
});
code:script.js
export default async function loadPdf(pdfurl, arrayBuffer) {
const pdfOnClick = await new Promise((resolve) => {
const originalPageMenu = scrapbox.PageMenu;
scrapbox.PageMenu = new Proxy(scrapbox.PageMenu, {
get: function(target, name, receiver) {
if (name === "addMenu") {
return function({ title, image, onClick }) {
if (title === "upload-pdf") {
scrapbox.PageMenu = originalPageMenu;
resolve(onClick);
} else {
originalPageMenu.addMenu({ title, image, onClick });
}
};
}
return Reflect.get(target, name, receiver);
}
});
const scriptUrl = "https://scrapbox.io/api/code/ci7lus/pdf%E3%81%AE%E5%85%A8%E3%81%A6%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92Gyazo%E3%81%AB%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89%E3%81%97%E3%81%A6Scrapbox%E3%81%AB%E8%B2%BC%E3%82%8A%E4%BB%98%E3%81%91%E3%82%8BUserScript/script.js";
import(scriptUrl + "?_=" + Date.now());
});
console.log("successfully trapped callback", pdfOnClick);
const originalCreateElement = document.createElement;
const originalFetch = fetch;
window.fetch = async function(input, init) {
if (input === "https://upload.gyazo.com/api/upload/easy_auth" || input === "https://upload.gyazo.com/api/upload") {
const response = await originalFetch(input, init);
let { permalink_url } = await response.json();
permalink_url += "/raw#.png";
return new Proxy(response, {
get: function(target, name) {
if (name === "json") {
return async () => ({ permalink_url });
}
return Reflect.get(target, name);
}
});
}
return originalFetch(input, init);
};
document.createElement = function(tagName) {
if (tagName !== "input") {
return originalCreateElement.apply(this, tagName);
}
document.createElement = originalCreateElement;
const input = originalCreateElement.apply(this, [
tagName
]);
input.onclick = (event) => {
event.preventDefault();
event.stopPropagation();
input.dispatchEvent(new Event("change"));
};
return new Proxy(input, {
get(target, name) {
if (name === "files") {
return Object.setPrototypeOf(
[new File(arrayBuffer, pdfurl)],
FileList.prototype
);
}
if (name === "addEventListener" || name === "click") {
return Reflect.get(target, name, target).bind(target);
}
return Reflect.get(target, name, target);
},
set(target, p, newValue) {
console.log(...arguments);
return Reflect.set(target, p, newValue, target);
}
});
};
await pdfOnClick();
//window.fetch = originalFetch;
}