31:T1f74,// each path should have a designed width of 620px for it to be scaled properly over the image edgePaths = [ { "name": "default", "path": "M610,27.7c-0.93,0.12-1.85,0.2-2.77,0.21c-4.53,0.08-2.3-4.55-7.91-5.83c-5.27-1.2-13.94-1.76-15.88-2.91c-2.9-1.72-6.67-0.81-9.74-1.62c-2.01-0.53-3.73-2.37-5.66-2.93c-1.42-0.41-2.93-0.22-4.4-0.2c-3.11,0.05-4.78-1.77-7.82-2.29c-2.78-0.47-5.44,0.09-7.76,1.17c-1.62,0.76-2.93,1.21-4.67,0.95c-1.42-0.8-2.92-1.42-4.48-1.88c-2.13-0.29-4.27-0.37-6.42-0.21c-4.36,0.07-8.25,0.81-12.58,1.08c-3.89,0.24-8.22,1.02-11.58,2.15c-3.97,1.33-6.73,4.12-10.61,5.78c-6.16,2.64-15.01,1.48-21.34-0.06c-3.52-0.86-7.19-0.92-10.61-2.25c-2.76-1.08-3.58-1.1-6.79-1.09c-10.53,0.05-21.08,0.09-31.61,0c-3.05-0.03-4.82,1.15-7.72,1.11c-2.93-0.04-5.87,0-8.8,0c-7.18,0-14.36,0-21.53,0c-4.27,0-13.07-1.38-13.29-4.25c-2.49-0.46-2.87-1.16-4.38-2.47c-0.74-0.64-0.3-0.8-1.62-1.14c-0.66-0.17-1.58,0.05-2.29,0.05c-2.7,0.03-7.54-0.98-9.96,0.08c-1.17,0.52-1.52,1.73-2.77,2.2c-1.94,0.73-6.26-0.05-8.3-0.05c-3.22,0-6.45,0-9.67,0c-3.21,0-6.8-0.47-9.97-0.06c-6.37,0.84-12.8,2.29-19.07,3.46c-1.78,0.33-3.77-0.41-5.56-0.11c-1.68,0.28-2.84,1.57-4.41,2.06c-5.07,1.59-11.6-0.13-16.58-0.93c-4.91-0.78-9.44-2.9-14.13-4.58c-2.81-1.01-5.31-1.27-8.64-0.72c-4.31,0.71-8.26,0.67-12.63,0.86c-2.7,0.11-4.33,1.16-7.24,1.13c-1.77-0.02-2.93,0.18-4.46,0.56c-1.72,0.43-3.58,0.29-5.5,0.65c-3.09,0.58-5.77,1.42-9.05,1.05c-2.22-0.25-5.17-0.99-6.68-2.81c-0.5-0.6-0.9-2.36-1.28-2.63c-1.47-1.06-5.16,0.9-6.77,1.23c-2.73,0.56-5.45,1.53-8.14,1.98c-0.7,0.12-1.41-0.09-2.12,0.06c-0.63,0.14-0.67,0.81-1.31,0.93c-2.57,0.48-5.6,0.1-8.25,0.1c-7.59,0-14.96,0.01-22.37-1.09c-1.33-0.2-2.61-0.47-3.76-1.27c-0.77-0.54-1.57-1.67-2.44-2.02c-2.09-0.85-6.01-0.08-8.29-0.08c-2.63,0-6.21-0.65-8.68,0.22c-2.93,1.03-3.47,3.16-6.95,3.12c-3.24-0.04-5.79-0.77-8.85-1.11c-4.17-0.47-8.14-1.12-12.11-2.51c-4.78-1.67-12.73-1.48-18.13-0.87c-2.33,0.27-4.46,1.33-6.61,2.26c-2.64,1.15-4.78,2.83-7.88,2.29c-3.02-0.53-4.76-2.15-7.82-2.26c-3.3-0.12-4.02-2.62-6.64-3.43c-2.38-0.74-6.44,0.05-8.98,0.05c-2.98,0-5.95,0-8.93,0c-2.88,0-6.11-0.4-8.96-0.03c-2.37,0.31-4.74,1.4-6.92,2.01c-5.68,1.58-10.85-1.17-16.5-0.89c-1.58,0.08-3.08,0.61-4.51,1.36v346.56c0.32-0.03,0.66-0.05,0.97-0.08c3.16-0.27,6.42-0.18,9.6-0.11c2.08,0.05,2.68,0.77,4.49,1.16c2.38,0.51,5.34,1.04,7.81,1.13c5.52,0.2,14.12,4.91,18.78,1.91c4.02-2.58,9.66-4.99,14.58-4.93c5.02,0.05,14.26,0.8,18.98,2.98c2.5,1.15,4-0.06,6.7,0.37c4.16,0.66,10.62-0.08,14.88,0.37c4.38,0.47,9.41,1.08,13.82,1.06c10.72-0.05,13.36,1.11,24.03,1.81c3.63,0.24,9.5-1.39,13.13-1.38c1.76,0,25.16-6.34,28.29-5.86c4.11,0.63,9.02,0.19,12.4,2.76c2.2,1.67,2.92,2.36,5.75,3.07c9.45,2.37,19.77,1.36,29.25,0.03c12.85-1.8,25.47-4.52,38.38-4.46c4.4,0.02,7.91-1.45,12.31-2.01c6.72-0.86,14.9-1.01,21.34,0.87c11.57,3.36,24.04,6.44,36.06,6.72c6.47,0.15,10.71-3.88,16.35-6.77c3.74-1.91,6.4-2.17,10.46-2.16c5.66,0.02,10.51,0.18,15.88,2.29c2.14,0.84,7.88,3.77,9.92,4.95c3.43,1.98,54.12,11.15,56.97,9.79c12.07-5.77,24.69-10.99,37.95-13.15c6.14-1,12.49-0.52,18.7-0.52c4.91,0,9.81-0.5,14.54,1.09c2.25,0.76,4.18,2.7,6.25,3.32c1.44,0.43,3.43,0.06,4.92,0.06c14.61-0.02,29.23,0,43.84,0c9.14,0,18.83-0.86,27.89,0.81c1.7,0.32,3.3,0.6,4.88,0.82V27.7z" }, { "name": "alternate", "path": "M610,26.77c-5.49,0.24-10.98,0.69-16.46,0.88c-4.1,0.14-8.18,0.11-12.28,0.11c0.24,0,0.48,0,0.72,0.01c-1.89,0.55-5.12-1.09-6.6-1.85c-4.04-2.07-7.59-5.51-12.17-6.43c-2.16-0.44-4.45-0.14-6.64-0.13c-3.23,0.02-6.47,0.03-9.7-0.01c-3.92-0.05-7.76,0.58-11.65,1.07c-7.31,0.92-14.66,2.18-22.01,2.68c-6.76,0.46-13.78-0.6-20.46,0.52c-5.09,0.86-18.2-1.3-20.46-2.68c-4.47-2.73-9.67-6.64-15.1-6.69c-8.86-0.08-17.59,0.74-26.32,2.01c-4.92,0.71-9.86,1.81-14.73,2.83c-4.26,0.89-8.57,1.81-12.92,1.12c-3.86-0.61-7.84-1.68-11.48-3.09c-1.6-0.61-3.09-1.96-3.57-2.19c-2.49-1.19-5.27-1.99-7.92-2.71c-5.52-1.5-11.3-3.65-16.96-4.51c-2.17-0.33-5.01-0.4-7.02,0.46c-2.39,1.03-5.02,1.56-7.49,2.51c-5,1.9-10.01,4.15-15.16,5.6c-1.48,0.42-2.78,0.71-4.12,1.5c-2.75,1.64-5.02,2.41-7.94,3.72c-2.69,1.2-6.49,0.03-9.29-0.22c-2.02-0.17-4.29,1.59-6.24,1.03c-0.73-0.21-1.34-0.53-2.04-0.66c0.03,0,0.06,0,0.1,0.01c-2.46-0.19-5.03-0.79-7.44-1.2c-11.27-1.9-22.62-3.95-33.99-5.2c-8.4-0.93-16.6-0.8-25-0.92c-3.55-0.05-14.67-2.66-17.18-2.34c-4.52,0.59-9.12,0.06-13.67,0.64c-2.26,0.29-4.79,0.4-6.98,1.13c-1.44,0.48-2.68,1.77-4.03,2.12c-1.43,0.36-3.53,0.3-5,0.03c-2.09-0.39-4.02-1.21-6.15-1.46c-1.7-0.21-3.4-0.12-5.1-0.11c-2.52,0.01-5.05,0.02-7.57,0c-4.09-0.03-8.48,0.18-12.45,1.25c-0.75,0.2-1.4,0.66-2.12,0.87c-0.59,0.17-1.05-0.01-1.63,0.08c-3.49,0.54-6.58,1.73-10.19,1.71c-2.3-0.01-3.68-0.59-5.75-1.67c-2.45-1.28-4.31-3.56-7.07-3.91c-3.98-0.52-7.84-1.57-11.72-2.4c-1.76-0.37-3.71-0.89-5.48-1c-2.33-0.15-4.62,1.7-6.81,2.29c-3.54,0.95-7.42,1.89-11.06,2.21c-1.73,0.16-3.3,0.57-5.08,0.56c-3.51-0.03-7.01,0-10.52,0c-1.6,0-3.55,0.28-5.1-0.12c-1.28-0.34-2.55-0.76-3.88-1.15c-1.2-0.35-2.12-0.62-3.22-1.1c-1.01-0.44-2.28-0.61-3.48-0.85c-1.53-0.3-3.45-0.24-5.03-0.14c-2.05,0.14-4.11,1.21-6.11,1.71c-3.44,0.86-7.12,0.53-10.64,0.53c-1.3,0-2.6,0-3.89,0c-0.53,0-1.16,0.08-1.69,0.01c-0.59-0.08-0.79-0.34-1.23-0.45c-1.74-0.45-3.51-0.64-5.16-1.24c-0.9-0.33-2.17-0.94-3.06-1.15c-0.97-0.23-2.35,0.03-3.36,0.03c-2.71,0-6.95-0.88-9.25,0.77c-0.72,0.51-1.61,1.31-2.46,1.49c-1.02,0.22-1.86,0.19-2.82,0.53c-0.58,0.2-1.18,0.33-1.8,0.41v349.39c0.45-0.16,0.72-0.51,1.21-0.61c0.72-0.15,1.41,0.11,2.14-0.1c0.56-0.16,1.03-0.77,1.83-0.47c0.46,0.17,0.24,0.38,0.65,0.6c0.43,0.24,0.73,0.41,1.22,0.63c2.57,1.15,4.7,2.18,7.59,2.17c4.14-0.01,6.95-2.31,10.8-3.8c1.69-0.66,3.01-0.65,4.79-0.67c1.42-0.01,2.49,0.16,3.88,0.43c2.45,0.48,5.04,0.25,7.54,0.68c3.13,0.54,6.33,1.13,9.5,1.11c1.97-0.01,3.09-0.22,4.91-0.98c1.91-0.79,3.53-0.7,5.56-0.7c1.53,0,3.07-0.08,4.6,0.02c3.68,0.25,7.33,1.4,10.95,2.08c7.59,1.41,14.95,4.2,22.58,2.1c3.6-0.99,7-2.85,10.85-3.78c4.95-1.2,10.01-0.97,15.08-0.96c2.56,0,5.03-0.27,6.99,1.66c0.85,0.84,0.82,0.85,1.96,1.11c0.93,0.21,1.77,0.47,2.69,0.67c0.04,0.91,1.04,3.01,1.77,3.52c1.52,1.06,4.5-0.01,6.1-0.47c1.75-0.51,3.3-1.29,5.07-1.76c1.66-0.43,3.4-0.28,5.12-0.27c4.83,0.03,9.56-1.01,14.38-1.15c5.92-0.17,11.97,0.51,17.87-0.08c6.69-0.67,13.01-2.31,19.66-3.14c0.89-0.11,2.3-0.29,3.25-0.12c0.6,0.11,0.92,0.4,1.43,0.52c0.62,0.15,1.31,0.05,1.96,0.03c1.9-0.03,3.65,0.47,5.53,0.57c1.31,0.07,2.58,0.22,3.82,0.7c0.78,0.3,1.49,0.87,2.32,1c1.4,0.23,2.84,0.14,4.21,0.52c1.26,0.35,2.13,0.6,3.61,0.58c1.46-0.02,2.39,0.57,3.91,0.56c1.73-0.01,3.22,0,4.9-0.42c1.65-0.42,2.88-1.53,4.59-1.85c1.26-0.23,2.99,0.27,4.13,0.64c2.16,0.7,4.52,1.09,6.98,1.07c4.11-0.03,8.22-0.01,12.33-0.01c1.44,0,2.82,0.18,4.03-0.41c1.61-0.78,2.49-1.27,4.31-1.27c2.18,0.01,4.54,0,6.64,0.68c1.55,0.5,2.47,2.14,3.71,3.11c1.18,0.92,2.5,0.69,3.91,0.69c3.36,0,6.71,0,10.07,0c3.16,0,6.33,0,9.49,0c2.14,0,4.83,0.41,6.93-0.08c1.36-0.32,2.38-1.33,3.63-1.86c1.09-0.46,1.98-0.21,3.16-0.26c2.06-0.09,4.03-1.03,6.05-1.4c1.65-0.31,3.33-0.44,4.97-0.74c1.53-0.28,2.83,0.44,4.46,0.43c3.59-0.03,7.19-0.04,10.78-0.01c1.22,0.01,2.11,0.43,3.27,0.6c0.37,0.05,0.77-0.14,1.14-0.06c0.27,0.06,0.44,0.43,0.6,0.46c1.71,0.36,3.51-0.03,5.25,0.17c1.66,0.19,3.09,0.52,4.76,0.51c1.56-0.02,2.87,0.19,4.19-0.53c2.06-1.13,3.57-2.73,5.82-3.52c0.82-0.29,1.47-0.21,2.26-0.39c0.87-0.2,0.77-0.74,1.87-0.55c0.26,0.05,0.27,0.35,0.46,0.39c0.45,0.1,0.82,0.03,1.27,0.11c0.87,0.15,1.7,0.48,2.59,0.7c1.67,0.4,3.28,0.8,4.99,0.99c1.31,0.14,2.53,0.72,3.87,0.56c8.2-0.96,18.19,1.67,26.45,1.67c3.08,0,6.15,0,9.23,0c3.37,0,6.14-0.4,9.42-1.24c2.33-0.59,3.81-1.58,6.25-1.55c2.32,0.03,4.65-0.1,6.96-0.03c2.92,0.09,5.45,0.71,8.09,1.69c0.87,0.32,1.5,0.76,2.31,1.15c2.03,0.98,4.96,0.42,7.14,0.67c8.67,1.02,17.51,1.4,26.27,1.54c2.26,0.03,3.65-0.82,5.69-1.53c1.93-0.67,4-0.89,5.92-1.38c0.54-0.14,0.89-0.38,1.61-0.43c7.8-0.54,16.25-0.18,23.99,0.05c6.34,0.04,12.63,0.54,18.89,1.49c2.13,0.36,4.25,0.75,6.37,1.17c0.71,0.07,1.57-0.06,2.23,0.2c0.02,0.24-0.08,0.39-0.31,0.46c4.53-0.25,9.11,0.28,13.63,0c1.8-0.11,3.33-0.58,5.16-0.59c1.52-0.01,1.8-0.01,2.9,0.97c1.27,1.12,2.79,1.82,4.1,2.88c1.32,1.08,1.89,1.8,3.61,1.74c2.11-0.06,4.01,0.59,6.15,0.57c1.14-0.01,2.22,0.01,3.28-0.04V26.77H610z"} ]32:T582,svg = html``33:[{"id":"f794df861e8690478c2e622f7efdc27d73c3bf9b19b6b8eba7962111c3a85c9dd4e60ea906483d5eceff07437b8f7865e65831c71f4de4256741807a8b9079ea","href":"https://static.observableusercontent.com/files/f794df861e8690478c2e622f7efdc27d73c3bf9b19b6b8eba7962111c3a85c9dd4e60ea906483d5eceff07437b8f7865e65831c71f4de4256741807a8b9079ea","name":"pentagon-papers.png","type":"image/png","lastModified":1629407206245.377,"size":206865}] 2f:{"title":"Add a deckled edge to screenshots","cells":[{"id":0,"value":"md`# Add a deckled edge to screenshots\nThis tool makes screenshots with white backgrounds look like they're torn from paper. It's especially useful when you're trying to provide visual context for images of printed documents. This is based on code originally writen by Youyou Zhou for Quartz.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"md`## 1. Upload an image\n\nIt should be a png, jpg, gif, or webp and at least 1240px wide `","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"viewof base64image = fileInput({\n crossOrigin: \"anonymous\",\n initialUrl: await FileAttachment(\"pentagon-papers.png\").url(),\n load: async function(value) {\n \n let reader = new FileReader();\n \n return new Promise(async resolve => {\n \n reader.onload = function (e) {\n resolve(reader.result);\n }\n \n let blob = await fetch(value).then(r => r.blob());\n reader.readAsDataURL(blob)\n \n })\n }\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"md`## 2. Select an edge and background color`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"viewof edge = Inputs.select(edgePaths, {label: \"Edge selection\", format: x => x.name, value: x=> x.path})","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"md`Background selection`","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"viewof colorString = color({label: \"background color\", value: \"#ffffff\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"htmlCanvas = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":333,"value":"md`## 3. Export\nWhat do you want the file to be called?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"viewof fn = Inputs.text({label: \"filename\", value:\"deckler-output\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"html`

Click here to download the image

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":752,"value":"md`------------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":757,"value":"md`## The code\nThis tool works by creating an SVG and then drawing it to a canvas element using a library called canvg. The SVG is where your uploaded image is combined with predefined paths that look like torn paper. It is also where a dropshadow is applied to make the combined form look like its sitting on top of the background.\n\n### First we define some preferences\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"margin = ({\n \"left\": 10, \n \"top\": 30, \n \"right\":10, \n \"bottom\": 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"canvasWidth = 620;","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"scale = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":786,"value":"md`### Then we calculate some values based on those and user inputs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"imageAspect = image.height / image.width","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"displayWidth = canvasWidth - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"canvasHeight = Math.ceil(canvasWidth * imageAspect + margin.bottom)","pinned":true,"hidden":false,"mode":"ojs"},{"id":428,"value":"outputWidth = canvasWidth * scale","pinned":true,"hidden":false,"mode":"ojs"},{"id":431,"value":"outputHeight = canvasHeight * scale","pinned":true,"hidden":false,"mode":"ojs"},{"id":803,"value":"cutHeight = displayWidth * imageAspect - margin.top","pinned":true,"hidden":false,"mode":"ojs"},{"id":225,"value":"backgroundColor = d3.color(colorString)","pinned":true,"hidden":false,"mode":"ojs"},{"id":356,"value":"// this is base64 representation of the output image, we create this to make it easier to download the image\nmutable imageDataUrl = htmlCanvas.toDataURL('png')","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"// replace the height vertical line in the chosen path with a distance calculated from the size of the image \nclipPath = edge.path.replace(/v\\d\\.\\dc/, `v${cutHeight}`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":881,"value":"md`### These are the shared components and libraries we use`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"import {fileInput} from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"import {color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":949,"value":"svg64 = import('https://cdn.skypack.dev/svg64@1.1.0?min')","pinned":true,"hidden":false,"mode":"ojs"},{"id":417,"value":"md`### This is the SVG that everything is based off of\nThe image and edges are combined here before it is then drawn to a canvas element so you can download it`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":905,"value":"// {\n// return html`
\n// ${svg}\n//
`\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":886,"value":"md`### Some styling \nThis makes sure the preview looks nice`","pinned":false,"hidden":false,"mode":"ojs"},{"id":729,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":889,"value":"md`### The uploaded image\nIt's displayed here so that there is an object that we can determine the dimensions from`","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"image = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":736,"value":"// this isn't currently working right, there is usually a way to add a credit line into the exported image\ncredit = \"\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":991,"value":"md`### This is an intermediary img tag of the output\nIt gets created from the svg then gets drawn to a canvas. You could download it here using the Observable's built-in methods, but it would only be as wide as your browser at the time you downloaded it.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":984,"value":"svgimg = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":1016,"value":"md`### Apply the image data to the download link\nNow it all gets put together, the intermediary image is drawn to a canvas element to preview and the download link is updated with the image data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":771,"value":"// this is run every 0.5 seconds to make sure that the canvas draw doesn't get reset by other bits of the code executing after or prior to the draw.\n\n// create a new Promise every 0.5 seconds that returns the drawing function\nPromises.tick(500, _ => {\n \n htmlCanvas.width = outputWidth\n htmlCanvas.height = outputHeight\n \n let ctx = htmlCanvas.getContext(\"2d\")\n \n ctx.drawImage(svgimg, 0, 0, outputWidth, outputHeight)\n \n mutable imageDataUrl = htmlCanvas.toDataURL('png')\n \n}).then(draw => draw()) //when the promise returns the function, call it","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}