ssig33/fuck.js

## fuck.js
const drop = document.querySelector('#drop');
const span = document.querySelector('span');

const read = (file)=>{
  return new Promise((r)=>{
    const reader = new FileReader();
    reader.onload = (e)=>{
      r(e.target.result);
    };
    reader.readAsArrayBuffer(file)
  });
}

drop.addEventListener('dragover', (event)=> event.preventDefault());

const renderAndUpload = async (page, name)=>{
  const viewport = page.getViewport(1.5);
  const canvas = document.createElement('canvas') , ctx = canvas.getContext('2d');
  const renderContext = { canvasContext: ctx, viewport: viewport };

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

  await page.render(renderContext);
  const dataUrl = canvas.toDataURL('image/jpeg');
  const client_id =
    'c8d5b8c60bb10284b8ab43fe28e60fb0017d64cff2548a2fcaeb62d6b1335829';

  const formData = new FormData();
  formData.append('image_url', dataUrl);
  formData.append('client_id', client_id);
  formData.append('referer_url', location.href);
  formData.append('title', name);

  const response = await fetch('https://upload.gyazo.com/api/upload/easy_auth', { method: 'POST', body: formData });
  const data = await response.json();
  const res = await fetch(data.get_image_url, {credentials: 'same-origin'});
  console.log(res);
  return res.url;
}

drop.addEventListener('drop', async (e)=>{
  e.preventDefault();
  const file = event.dataTransfer.files[0];
  console.log(file);
  const obj = await read(file);
  const pdf = await pdfjsLib.getDocument(obj);

  console.log(pdf.numPages);

  page = 1;
  while(true){
    const i = await pdf.getPage(page);
    const gyazo = await renderAndUpload(i, file.name);
    console.log(gyazo);
    if(page == pdf.numPages) break;
    page ++;
    span.textContent = `${page} / ${pdf.numPages}`;
  }
});

## index.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/build/pdf.min.js"></script>
  </head>
  <body>
    <h1>PDF to Scrapbox</h1>
    <input />
    <div id="drop"></div>
    <span></span>
    <script src="/fuck.js"></script>
    <style>
      #drop{width:200; height:200; background-color: red }
    </style>
  </body>
</html>
	const drop = document.querySelector('#drop');
	const span = document.querySelector('span');

	const read = (file)=>{
	return new Promise((r)=>{
	const reader = new FileReader();
	reader.onload = (e)=>{
	r(e.target.result);
	};
	reader.readAsArrayBuffer(file)
	});
	}

	drop.addEventListener('dragover', (event)=> event.preventDefault());

	const renderAndUpload = async (page, name)=>{
	const viewport = page.getViewport(1.5);
	const canvas = document.createElement('canvas') , ctx = canvas.getContext('2d');
	const renderContext = { canvasContext: ctx, viewport: viewport };

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

	await page.render(renderContext);
	const dataUrl = canvas.toDataURL('image/jpeg');
	const client_id =
	'c8d5b8c60bb10284b8ab43fe28e60fb0017d64cff2548a2fcaeb62d6b1335829';

	const formData = new FormData();
	formData.append('image_url', dataUrl);
	formData.append('client_id', client_id);
	formData.append('referer_url', location.href);
	formData.append('title', name);

	const response = await fetch('https://upload.gyazo.com/api/upload/easy_auth', { method: 'POST', body: formData });
	const data = await response.json();
	const res = await fetch(data.get_image_url, {credentials: 'same-origin'});
	console.log(res);
	return res.url;
	}

	drop.addEventListener('drop', async (e)=>{
	e.preventDefault();
	const file = event.dataTransfer.files[0];
	console.log(file);
	const obj = await read(file);
	const pdf = await pdfjsLib.getDocument(obj);

	console.log(pdf.numPages);

	page = 1;
	while(true){
	const i = await pdf.getPage(page);
	const gyazo = await renderAndUpload(i, file.name);
	console.log(gyazo);
	if(page == pdf.numPages) break;
	page ++;
	span.textContent = `${page} / ${pdf.numPages}`;
	}
	});
	<html>
	<head>
	<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/build/pdf.min.js"></script>
	</head>
	<body>
	<h1>PDF to Scrapbox</h1>
	<input />
	<div id="drop"></div>
	<span></span>
	<script src="/fuck.js"></script>
	<style>
	#drop{width:200; height:200; background-color: red }
	</style>
	</body>
	</html>