31:T988,md`# Sign a PDF and Adobe: Go F* Yourself Allows super-imposing an image of your signature on a PDF. ** Note: you can also do this using Mac Preview, see _Tools > Annotate > Signature_ ([docs](https://support.apple.com/en-gb/guide/preview/prvw35725/mac))** ### Why not use Adobe? I once had a Adobe subscription exactly for this purpose but I was unable to cancel it. So it cost me $200 to sign a document. They are [predatory](https://www.reddit.com/r/Adobe/comments/ad72z0/adobe_fix_your_predatory_billing_practices/), and [its not just me](https://news.ycombinator.com/item?id=25971114). ### Why not use the free tools on the internet? I want to sign financial documents and privacy is critical. Unfortunately, I cannot audit most free software on the internet. Lack of auditability of digital services is actually why I started [@endpointservices](https://observablehq.com/@endpointservices), a Cloud which *exclusively* runs source available software. But in this case we can sign a document clientside so no data will leave the computer and we don't even need a digital service. ### Why on [Observablehq.com](https://observablehq.com/)? I love it, it took a day to build this and I do not need to worry about hosting, and anybody can inspect, fork and improve the software right from within their browser. It radically lowers viscosity of software development. I can painlessly upgrade it as I go. ### How can I verify data is not leaving my computer? To see if a webpage is transmiting your data you should check to see if a network call is made when you upload you pdf. Open the View > Developer > Developer Tools > Network, *then* set your pdf. For this application a network call is made! But it's a blob resource with size 0 that takes 2ms. This is an in-memory representation used to move data around *inside* the current session, it doesn't represent data leaving the computer. In general if there are no network entries generator or only blob entries you can be sure data is not leaving your computer and its safe to use. You would generally expect about the same amount of data would need to leave your computer as the file you just uploaded. Read more about the network tab: https://developer.chrome.com/docs/devtools/network/ ### Credits We salute you Andrew Dillon for [pdf-lib](https://github.com/Hopding/pdf-lib) (PDF writer) and Mozilla for [PDF.js](https://mozilla.github.io/pdf.js/) (PDF viewer). 🖖 `32:T46d,viewof config = view`

${[ 'height', Inputs.range([0, 1200], { label: "preview height", value: 800 }) ]} ${[ 'page', Inputs.range([1, fixedDoc.pageCount], { label: "preview page", value: 1, step: 1 }) ]} ${[ "sigs", signatures.sigs.map( (_, i) => view`

${[ 'page', Inputs.range([1, fixedDoc.pageCount], { label: "page", value: 1 }) ]} ${[ 'sX', Inputs.range([0, fixedDoc.getPage(0).getWidth()], { label: "signature x", value: 0 }) ]} ${[ 'sY', Inputs.range([0, fixedDoc.getPage(0).getHeight()], { label: "signature y", value: 0 }) ]} ${[ 'sW', Inputs.range([1, fixedDoc.getPage(0).getWidth()], { label: "signature width", value: 300 }) ]} ${[ 'sH', Inputs.range([1, fixedDoc.getPage(0).getHeight()], { label: "signature height", value: 300 }) ]}` ) ]} `33:[{"id":"c355c0bb7746b5947aeba91da1189f8fd06641f3aaf062cc7103901cefae76dd10b3e99cc13acd0a5ee6e40a1ee4231776dd23bade2bb0b59357078fdf76d7f9","href":"https://static.observableusercontent.com/files/c355c0bb7746b5947aeba91da1189f8fd06641f3aaf062cc7103901cefae76dd10b3e99cc13acd0a5ee6e40a1ee4231776dd23bade2bb0b59357078fdf76d7f9","name":"pdf.js","type":"application/javascript","lastModified":1622480220760.392,"size":388411},{"id":"e8c8472a848b69be98c5220f6709b6e9bde2029c8bbe28004235e94cd385ba5d945281d7802a4915b89b80b67203d01124190f6e6b490415d2665bece54175e4","href":"https://static.observableusercontent.com/files/e8c8472a848b69be98c5220f6709b6e9bde2029c8bbe28004235e94cd385ba5d945281d7802a4915b89b80b67203d01124190f6e6b490415d2665bece54175e4","name":"pdf-lib.min.js","type":"application/javascript","lastModified":1622480170789.578,"size":521256},{"id":"a922cb2b451fa28a6a893bc7a6c9ab13b1c484be3fd218eff880d98635cf039903f2e34a525e082cf646d5240f3b5ced29d0464aa9ec3a8740ab65c664bd96ac","href":"https://static.observableusercontent.com/files/a922cb2b451fa28a6a893bc7a6c9ab13b1c484be3fd218eff880d98635cf039903f2e34a525e082cf646d5240f3b5ced29d0464aa9ec3a8740ab65c664bd96ac","name":"pdf.worker.js","type":"application/javascript","lastModified":1622480219841.859,"size":1675103}] 2f:{"title":"Sign a PDF and Adobe: Go F* Yourself","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`### Select files`","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"viewof top = view`

\n \n

\n Choose a pdf \n ${htl.html`\n (mutable pdfchange = evt)} accept=\".pdf\">`}\n

\n ${[\n \"images\",\n Inputs.range([1, 5], {\n label: \"Number of images to add\",\n value: 1,\n step: 1\n })\n ]}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"viewof signatures = view`\n ${[\n \"sigs\",\n Array(top.images)\n .fill(null)\n .map(\n (_, i) => view`

\n Choose image ${i + 1} \n ${htl.html` {\n sigchange[i] = evt;\n mutable sigchange = mutable sigchange; //trigger update\n }} accept=\"image/jpg\">`}\n

`\n )\n ]}\n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"md`### Controls`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"{\n const pdf = await pdfjs.getDocument(url).promise;\n const page = await pdf.getPage(config.page);\n\n const canvas = html`