2a:T64b,sample = (background, input, targetId) => { const bg_image = new Image(); bg_image.src = URL.createObjectURL(background); const image = new Image(); image.src = URL.createObjectURL(input); // const image = document.getElementById('source'); // image.src = URL.createObjectURL(input); image.onload = function() { const { cv } = window; // Source and destination images const src = new cv.imread(image); const dst = new cv.imread(bg_image); // const new_dst = new cv.Mat(); // cv.cvtColor(dst, new_dst, cv.COLOR_GRAY2RGBA); // new_dst.convertTo(dst, cv.CV_8U, 0, 0); // let imgData = new ImageData(new Uint8ClampedArray(new_dst.data, new_dst.cols, new_dst.rows)); // let dst = cv.Mat.zeros(src.cols, src.rows, cv.CV_8UC3); // Convert to binary cv.cvtColor(src, src, cv.COLOR_RGBA2GRAY, 0); cv.threshold(src, src, 120, 200, cv.THRESH_BINARY); // cv.cvtColor(dst, dst, cv.COLOR_GRAY2BGRA, 4); // Find contours let contours = new cv.MatVector(); let hierarchy = new cv.Mat(); cv.findContours(src, contours, hierarchy, cv.RETR_CCOMP, cv.CHAIN_APPROX_SIMPLE); // Draw contours on destination image for (let i = 0; i < contours.size(); ++i) { let color = new cv.Scalar(0, 255, 0); cv.drawContours(dst, contours, i, color, 1, cv.LINE_8, hierarchy, 160); } console.log('sample',targetId) // Show result and clean up cv.imshow(targetId, dst); src.delete(); dst.delete(); contours.delete(); hierarchy.delete(); // new_dst.delete(); }; }2b:[] 29:{"title":"Loading local image files examples","cells":[{"id":46,"value":"md`# Loading local image files examples`","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"md`## Load all files in folder`","pinned":true,"hidden":false,"mode":"ojs"},{"id":298,"value":"viewof multiFiles = html`` //load segmentation slices for this case","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"multiFileList = Array.from(multiFiles);","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"multiFileDict = {\n var result = {};\n \n multiFileList.forEach(function(f) { \n var name = f.name;\n var path = f.webkitRelativePath;\n var subdir = f.webkitRelativePath.match(/variations_decathlon_dataset\\/(.*)\\//i)[1];\n var caseNr = parseInt(f.name.match(/Case([0-9]+)_/i)[1]);\n var slice = parseInt(f.name.match(/Case[0-9]+[a-zA-Z_]+([0-9]+)/i)[1]);\n \n if (result[subdir] === undefined) { \n result[subdir] = [];\n }\n if (result[subdir][caseNr] === undefined) {\n result[subdir][caseNr] = [];\n }\n result[subdir][caseNr][slice] = {\n name: name,\n path: subdir,\n file: f\n }; \n })\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"numberOfCases = Object.keys(multiFileDict[\"images\"]).length","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"numberOfSlices = Object.keys(multiFileDict[\"images\"][caseNo]).length","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"viewof caseSlider = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"caseNo = Object.keys(multiFileDict.images)[caseSlider];","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"viewof sliceNo = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"sliceNo\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":631,"value":" ids = ['swv', 'sws', 'sbo', 'sto', 'swe'];","pinned":true,"hidden":false,"mode":"ojs"},{"id":620,"value":"\ngallery = html`\n\n

\n ${ids.map(id => { return setCanvas(id, caseNo, sliceNo, true) })}\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":799,"value":"comparision = html `

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":622,"value":"function setCanvas(id, caseNo, sliceNo, addCheckbox) {\nreturn html`

\n ${addCheckbox ? html`` : null}\n

` \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":374,"value":"loadImage = function(subDir, caseNo, sliceNo) {\n if (multiFileDict[subDir][caseNo] != undefined &&\n multiFileDict[subDir][caseNo][sliceNo] != undefined) {\n var file = multiFileDict[subDir][caseNo][sliceNo].file;\n if (file != undefined) {\n return file;\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":418,"value":"{\n sample(loadImage(\"images\", caseNo, sliceNo), loadImage(\"segmentations_without_variations\", caseNo, sliceNo), 'swv');\n sample(loadImage(\"images\", caseNo, sliceNo), loadImage(\"segmentations_with_shifts_5\", caseNo, sliceNo), 'sws');\n sample(loadImage(\"images\", caseNo, sliceNo), loadImage(\"segmentations_bottom_over_under_segment_10\", caseNo, sliceNo), 'sbo')\n sample(loadImage(\"images\", caseNo, sliceNo), loadImage(\"segmentations_top_over_under_segment_10\", caseNo, sliceNo), 'sto')\n sample(loadImage(\"images\", caseNo, sliceNo), loadImage(\"segmentations_with_erosion_dilation_5\", caseNo, sliceNo), 'swe')\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":786,"value":" function compare(){\n const checkboxes = Array.from(document.getElementsByName('selectScan'))\n const selected = checkboxes.filter(c => c.checked).map(ch => ch.dataset.id)\n console.log('selected', selected)\n getSelectedCanvas(selected)\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":790,"value":"function getSelectedCanvas(selectedCanvas) {\n selectedCanvas.map(canvas => {\n const canvasData = canvas.split(\"/\"); // To separate id, caseNo and SliceNo\n sample(loadImage(\"images\", canvasData[1], canvasData[2]), loadImage(\"segmentations_without_variations\", canvasData[1], canvasData[2]), 'selected'+canvasData[0]);\n const canvasToCompare = setCanvas('selected'+canvasData[0], canvasData[1], canvasData[2], false)\n const canvasContainer = document.getElementById('comparision');\n canvasContainer.appendChild(canvasToCompare)\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":372,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":792,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":838,"value":"html = (await require(\"htl@0.2\")).html","pinned":true,"hidden":false,"mode":"ojs"},{"id":842,"value":"loadOpenCv = {\n return new Promise((resolve, reject) => {\n const script = document.createElement('script');\n script.src = 'https://docs.opencv.org/master/opencv.js';\n script.type = 'text/javascript';\n script.async = true;\n\n script.onabort = () => {\n reject('OpenCV Load failed.');\n };\n\n script.onload = () => {\n if (window.cv !== undefined) {\n resolve('OpenCV Load success.');\n console.log('cv')\n }\n };\n \n document.body.appendChild(script);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2b","stdlib":"1","titling":"auto"}