2b:null 2c:["$","title",null,{"children":"image processing | randName() | Observable"}] 31:T519,fullTable = { const ctx = canvas.getContext('2d') const rct = { t: NaN, b: NaN, l: NaN, r: NaN } for (let i = 0; i < 200; ++i) { if (!rct.t && ctx.getImageData(1000, i, 1, 1).data[0] < 50) { rct.t = i } if (!rct.l && ctx.getImageData(i, 1000, 1, 1).data[0] < 50) { rct.l = i } if (!rct.b && ctx.getImageData(1000, 3500 - i, 1, 1).data[0] < 50) { rct.b = 3500 - i } if (!rct.r && ctx.getImageData(2475 - i, 1000, 1, 1).data[0] < 50) { rct.r = 2475 - i } if (rct.t && rct.l && rct.b && rct.r) break } rct.t += topMargin rct.l += leftMargin const oW = rct.r - rct.l const oH = rct.b - rct.t const nH = cHeight * 100 const nW = oW * nH / oH const tempCvs = document.createElement('canvas') tempCvs.width = oW tempCvs.height = oH const gtx = tempCvs.getContext('2d') gtx.rotate(angle) gtx.putImageData(ctx.getImageData(rct.l, rct.t, oW, oH), 0, 0) gtx.drawImage(tempCvs, 0, 0, nW, nH) const cvs = document.createElement('canvas') cvs.width = 600 cvs.height = cHeight const tempCtx = cvs.getContext('2d') const links = [] for (let i = 0; i < 100; ++i) { tempCtx.putImageData(gtx.getImageData(32, i * cHeight, nW, cHeight), 0, 0) links.push(cvs.toDataURL('image/png')) } return links }32:[] 2f:{"id":"9f61db899e0c8cfb","slug":null,"title":"image processing","thumbnail":"7417741a6835ce7e5710575398f6fdfffae12478537558d53370dbad0e7d10de","access_level":"public","create_time":"$D2023-07-16T09:22:17.259Z","update_time":"$D2023-07-22T14:19:48.901Z","view_time":null,"first_public_time":"$D2023-07-16T09:22:17.259Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"af680361d1ea8ba5","login":"randname","name":"randName()","avatar_url":"https://avatars-next.observableusercontent.com/f16c819c73deae04aebd89cd214320d2b848d288cea0ed4487f835cc1b3e9c04","tier":"starter_2024"},"version":329,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6af62fd51a9b60df","login":"randname","name":"randName()","avatar_url":"https://avatars-next.observableusercontent.com/f16c819c73deae04aebd89cd214320d2b848d288cea0ed4487f835cc1b3e9c04","tier":null}],"members":[{"type":"individual","id":"6af62fd51a9b60df","login":"randname","name":"randName()","avatar_url":"https://avatars-next.observableusercontent.com/f16c819c73deae04aebd89cd214320d2b848d288cea0ed4487f835cc1b3e9c04","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"image processing","cells":[{"id":0,"value":"# image processing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"viewof images = Inputs.file({ label: 'imgs', multiple: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"viewof page = Inputs.range([0, images.length - 1], { value: 0, step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"canvas = {\n const img = await images[page].image()\n const cvs = document.createElement('canvas')\n cvs.width = 2500\n cvs.height = 3520\n cvs.style.width = '200px'\n const ctx = cvs.getContext('2d')\n ctx.drawImage(img, 0, 0)\n return cvs\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"viewof topMargin = Inputs.range([-10,10], { label: 'top', value: 3 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"viewof leftMargin = Inputs.range([-10,10], { label: 'left' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"viewof angle = Inputs.range([-1,1], { label: 'angle' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"{\n const butt = html``\n butt.onclick = async () => {\n for (let i = 0; i < 100; ++i) {\n document.querySelector(`#a-${`${i + 1 + page * 100}`.padStart(4, '0')}`).click()\n await new Promise((r) => setTimeout(r, 100))\n }\n }\n return butt\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"html`${fullTable.map((src, i) => {\n const title = `${i + 1 + page * 100}`.padStart(4, '0')\n return html` $\"${title}\"$ `\n})}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"viewof cHeight = Inputs.range([15, 20], { value: 18, step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"