2c:null 2d:["$","title",null,{"children":"Untitled | glibkostsov | Observable"}] 32:Ta23,drawing = { var canvas = document.getElementById("maskInput"); var div = document.getElementById("stage"); var ctx = canvas.getContext('2d'); var curX; var curY; var pressed = false; // var rect = canvas.getBoundingClientRect(); //capture la position du curseur par rapport a la zone de dessin document.onmousemove = function(e) { curX = e.pageX - rect.left; curY = e.pageY - rect.top; } var button_eraser = document.getElementById("eraser"); var button_clear = document.getElementById("clear"); // active ou non la fonction effacer du pinceau button_eraser.onclick = function() { if(ctx.globalCompositeOperation == 'destination-out') { button_eraser.style.backgroundColor = 'gray'; ctx.globalCompositeOperation = 'source-over'; } else { button_eraser.style.backgroundColor = 'green'; ctx.globalCompositeOperation = 'destination-out'; } }; // efface l'entiereté du dessin button_clear.onclick = function() { ctx.globalCompositeOperation = 'destination-out'; ctx.rect(0, 0, image.width, image.height); ctx.fill(); ctx.globalCompositeOperation = 'source-over'; }; // covert degrees to radians function degToRad(degrees) { return degrees * Math.PI / 180; }; canvas.onmousedown = function() { pressed = true; }; document.onmouseup = function() { pressed = false; if(curX < 0 || curY < 0 || curX > image.width || curX > image.height){ pressed = false; console.log("dehors"); } }; var x; var begin = false; var x0 = 0; var y0 = 0; var size = s_threshold1_tmp; function draw() { if(pressed) { if(!begin){ x0 = curX; y0 = curY; begin = true; } ctx.beginPath(); ctx.strokeStyle = 'rgba(0,'+color_delta+',0,1)'; ctx.lineWidth = size; ctx.moveTo(x0,y0); ctx.lineTo(curX, curY); ctx.stroke(); if (size > 1){ ctx.beginPath(); ctx.fillStyle = 'rgba(0,'+color_delta+',0,1)'; ctx.lineWidth = 1; x = ctx.arc(curX, curY, (size/2) - 1, degToRad(0), degToRad(360), false); ctx.fill(); ctx.stroke(); } x0 = curX; y0 = curY; }else{ x0 = curX; y0 = curY; } requestAnimationFrame(draw); }; draw(); yield ctx.canvas }33:[{"id":"22aba7a1807099f0a938b64ce42c5cc0bd13c874aae69d4fa9b70fb96e37b7be1532a416ad87a2ad82190f7f4024bc8668df39fedb5636603c3f58201298c84d","href":"https://static.observableusercontent.com/files/22aba7a1807099f0a938b64ce42c5cc0bd13c874aae69d4fa9b70fb96e37b7be1532a416ad87a2ad82190f7f4024bc8668df39fedb5636603c3f58201298c84d","name":"img_input.jpg","type":"image/jpeg","lastModified":1658407579710.544,"size":19921}] 30:{"id":"be94c3e45b7a0bc2","slug":"untitled","title":"Untitled","thumbnail":"268ba2dbf741a10102c9e6eba56774a6fe386cef9a5a920dc0002c4e101b5eed","access_level":"public","create_time":"$D2022-07-21T12:46:19.710Z","update_time":"$D2022-07-21T12:46:19.710Z","view_time":null,"first_public_time":"$D2022-07-21T12:46:39.659Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"68c227ee359f75ac","login":"glibkostsov","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e67ad8825af345c1ae7b27db60faf8cd0ba939abf2c4d22ff804fe202800e07c","tier":"starter_2024"},"version":1005,"publish_version":1005,"role":null,"authored":false,"authors":[{"type":"individual","id":"724c4011ef325ff8","login":"glibkostsov","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e67ad8825af345c1ae7b27db60faf8cd0ba939abf2c4d22ff804fe202800e07c","tier":null}],"members":[{"type":"individual","id":"724c4011ef325ff8","login":"glibkostsov","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e67ad8825af345c1ae7b27db60faf8cd0ba939abf2c4d22ff804fe202800e07c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"","cells":[{"id":982,"value":"pngfast = import('https://cdn.skypack.dev/fast-png@6.1.0?min')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"# Masque delta dans Saimple","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":478,"value":"Le but de cet observable est de montrer l'outil permettant à l'utilisateur de réaliser un masque sur l'image de l'évaluation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":511,"value":"L'image qu'on désire appliquer un masque de bruit.\nIl faut au préalable ajouter l'image dans *File attachments* de l'observable et puis la renseigner dans la cellule ci-dessous.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":881,"value":"viewof image = imageInput({\n crossOrigin: \"anonymous\",\n initialUrl: await FileAttachment(\"img_input.jpg\").url()\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"

\n\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":395,"value":"viewof s_threshold1_tmp = slider({\n min: 1,\n max: 127,\n step: 1,\n value: 50,\n title: \"Taille\",\n description: \"Epaisseur du pinceau\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"Le silder Delta permet de déterminer l'intensité de l'application du bruit dans la zone du dessin sélectionner. La valeur 255 conservera appliquera 100% du bruit abstrait et a contrario 0 en appliquera 0%.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":836,"value":"viewof color_delta = slider({\n min: 0,\n max: 255,\n step: 1,\n value: 255,\n title: \"Delta\",\n description: \"Intensitée du masque\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"Une cellule style pour permettre la superposition des canvas en eux. Il y a deux canvas : \n- **maskInput** : Le layer en interaction avec l'utilisateur.\n- **imageInput** : L'image de fond, en soit l'input.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":508,"value":"Extraction du masque.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":730,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":944,"value":"**⚠️ Reload la cellule si dessous pour afficher l'image issus du masque ⚠️**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":745,"value":"{\n const canvas = document.getElementById('imgWithMask');\n canvas.width = image.width;\n canvas.height = image.height;\n const ctx = canvas.getContext('2d');\n //ctx.putImageData(create_masque_form, 0, 0);\n ctx.putImageData(create_masque_form_2(), 0, 0);\n document.getElementById('imgMask').setAttribute(\"style\",\"height:\"+image.height.toString()+\"px;width:\"+image.width.toString()+\"px\");\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":848,"value":"Exécuter la cellule ci-dessous pour télécharger l'image associée au masque","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":872,"value":"{\n const form = html``;\n let image = await create_masque_form_2()\n console.log(image, 'something undefined')\n form.myButton.onclick = () => {\n const encoded = pngfast.encode({\n width: 50,\n height: 50, \n depth: 8, \n data: image.data,\n });\n\n const newBlob = new Blob([encoded]);\n\n const url = URL.createObjectURL(newBlob);\n \n var link = document.createElement('a');\nlink.download = 'img_mask.png';\n link.href =url;\n link.click();\n }\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"# Scripts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":300,"value":"create_masque_form = {\n //Mask Input\n var canvas_mask = document.getElementById(\"maskInput\");\n var ctx_mask = canvas_mask.getContext('2d');\n var MaskData = ctx_mask.getImageData(0, 0, image.width, image.height);\n\n //Image Input\n var canvas_image = document.getElementById(\"imageInput\");\n var ctx_image = canvas_image.getContext('2d');\n var ImageData = ctx_image.getImageData(0, 0, image.width, image.height);\n \n console.log(\"imgToMask\")\n var mask = imgToMask(MaskData);\n //console.log(mask);\n // var imgWithMask = createImgMask(ImageData, MaskData, );\n //var imgWithMask = imgAndMask(ImageData, mask);\n //console.log(\"imgWithMask\")\n //console.log(imgWithMask);\n return imgWithMask\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":925,"value":"function create_masque_form_2() {\n //Mask Input\n var canvas_mask = document.getElementById(\"maskInput\");\n var ctx_mask = canvas_mask.getContext('2d');\n var MaskData = ctx_mask.getImageData(0, 0, image.width, image.height);\n\n //Image Input\n var canvas_image = document.getElementById(\"imageInput\");\n var ctx_image = canvas_image.getContext('2d');\n \n var ImageData = ctx_image.getImageData(0, 0, image.width, image.height);\n var NewImageData = ctx_image.getImageData(0, 0, image.width, image.height);\n \n console.log(\"imgToMask\")\n var mask = imgToMask(MaskData);\n console.log(ImageData, 'image initial');\n console.log(MaskData, 'image mask')\n var imgWithMask = createImgMask(ImageData, MaskData,NewImageData );\n //var imgWithMask = imgAndMask(ImageData, mask);\n console.log(imgWithMask, 'image avec mask')\n //console.log(imgWithMask);\n return imgWithMask\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"draw_img2 = {\n var canvas = document.getElementById(\"imageInput\");\n var ctx = canvas.getContext('2d');\n ctx.canvas.width = image.width;\n ctx.canvas.height = image.height;\n ctx.drawImage(image, 0, 0);\n //set mask image canvas width and height\n var canvas = document.getElementById(\"maskInput\");\n var ctx = canvas.getContext('2d');\n ctx.canvas.width = image.width;\n ctx.canvas.height = image.height;\n //document.getElementById('stage').setAttribute(\"style\",\"width:\"+img1.width.toString()+\"px\");\n document.getElementById('stage').setAttribute(\"style\",\"height:\"+image.height.toString()+\"px;width:\"+image.width.toString()+\"px\");\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":916,"value":"## functions create masque","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":467,"value":"Charge l'image dans le canvas `\"imageInput\"`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":367,"value":"La fonction `imgToMask()` permet de convertir l'image extraite par `ctx.drawImage` en un masque composée de 0 en 1 en deux dimension.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":308,"value":"\n function imgToMask(img) {\n var mask2dim = [];\n for (let k = 0; k <= img.height * img.width*4 ; k = k + 4) {\n if(img[\"data\"][k] != 0 ||img[\"data\"][k+1] != 0 || img[\"data\"][k+2] != 0 || img[\"data\"][k+3] != 0 ){\n mask2dim.push(0);\n mask2dim.push(0);\n mask2dim.push(0);\n mask2dim.push(255);\n }else{\n mask2dim.push(0);\n mask2dim.push(0);\n mask2dim.push(0);\n mask2dim.push(0);\n } \n }\n return mask2dim;\n }\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":" function createImgMask(img, mask, newimg) {\n for (let k = 0; k <= newimg.height * newimg.width*4 ; k = k + 4) {\n if(mask[\"data\"][k] != 0 ||mask[\"data\"][k+1] != 0 || mask[\"data\"][k+2] != 0 || mask[\"data\"][k+3] != 0 ){\n newimg[\"data\"][k+3] = mask[\"data\"][k+1]\n }else{\n newimg[\"data\"][k+3] = 0\n } \n }\n return newimg;\n }\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":" function imgAndMask(img, mask) {\n var imgWithMask = img\n for (let k = 0; k <= img.height * img.width*4 ; k = k + 4) {\n imgWithMask[\"data\"][k+3] = mask[k+3]\n }\n return imgWithMask;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":462,"value":"La cellule `drawing` permet de dessiner le masque. Semblable aux autres logiciels de dessin.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"## Import","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":401,"value":"import { slider,file, select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":885,"value":"import {imageInput} from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"