2f:T460,## Edge detection? _WIP_ Currently the corners of the map on the image are determined by using the ratio of the first sheet. Since each sheet is reproduced differently (scaled, shifted and rotated) this does not create uniform masks. Can we recognise the corners by processing the images? If we take four strips of pixels (blue below) and look at the subsequent pixel values, we should be able to find the last line that frames the map in the image. By comparing the values, we can determine the rotation of the scan, and calculate the intersections in the corners (red). Sources: - Fetch (part of) image as byte array - Kernel (image processing) - https://en.wikipedia.org/wiki/Edge_detection - Sobel operator - https://gist.github.com/arifd/9ef3d02b43e858170f52553319c05952 - https://fiveko.com/image-edge-detection-with-simple-javascript/ - https://p5js.org/examples/image-edge-detection.html - https://observablehq.com/@mootari/opencv-js - https://observablehq.com/@mbostock/hello-canny-edge-detection - https://docs.opencv.org/2.4/modules/imgproc/doc/structural_analysis_and_shape_descriptors.html#findcontours30:T5a3,detectedContours = async () => { // From: https://docs.opencv.org/3.4/d5/daa/tutorial_js_contours_begin.html let src = cv.imread(await getInput()); let dst = cv.Mat.zeros(src.rows, src.cols, cv.CV_8UC3); cv.cvtColor(src, src, cv.COLOR_RGBA2GRAY, 0); cv.threshold(src, src, threshold, 200, cv.THRESH_BINARY); let contours = new cv.MatVector(); let hierarchy = new cv.Mat(); // You can try more different parameters // https://docs.opencv.org/4.x/d3/dc0/group__imgproc__shape.html#gadf1ad6a0b82947fa1fe3c3d497f260e0 cv.findContours( src, contours, hierarchy, // https://docs.opencv.org/4.x/d3/dc0/group__imgproc__shape.html#ga819779b9857cc2f8601e6526a3a5bc71 cv.RETR_LIST, // cv.RETR_TREE, cv.CHAIN_APPROX_SIMPLE ); // draw contours with random Scalar let array = []; for (let i = 0; i < contours.size(); ++i) { let color = new cv.Scalar( Math.round(Math.random() * 255), Math.round(Math.random() * 255), Math.round(Math.random() * 255) ); const area = cv.contourArea(contours.get(i), false); // https://docs.opencv.org/3.4/d6/d6e/group__imgproc__draw.html#ga746c0625f1781f1ffc9056259103edbc if (area >= 10000) { cv.drawContours(dst, contours, i, color, 1, cv.LINE_8, hierarchy, 100); array.push(area); } } cv.imshow("canvasOutput", dst); src.delete(); dst.delete(); contours.delete(); hierarchy.delete(); return array; }31:T5df,async function shiThomasCornerDetection() { // From: https://github.com/ucisysarch/opencvjs/blob/master/test/features_2d.html // Docs: https://docs.opencv.org/3.4/dd/d1a/group__imgproc__feature.html#ga1d6bb77486c8f92d79c8793ad995d541 // const img = cv.matFromImageData(await getInput()); // 24 for rgba const img = cv.imread(await getInput()); const img_gray = new cv.Mat(); const img_color = new cv.Mat(); // Opencv likes RGB cv.cvtColor(img, img_gray, cv.ColorConversionCodes.COLOR_RGBA2GRAY.value, 0); cv.cvtColor(img, img_color, cv.ColorConversionCodes.COLOR_RGBA2RGB.value, 0); img.delete(); const corners = new cv.Mat(); const qualityLevel = 0.01; const minDistance = 10; const blockSize = 3; const useHarrisDetector = false; const k = 0.04; const maxCorners = maxCornersInput; const copy = new cv.Mat(); copy = img_color.clone(); /// Apply corner detection cv.goodFeaturesToTrack( img_gray, corners, maxCorners, qualityLevel, minDistance, new cv.Mat(), blockSize, useHarrisDetector, k ); img_gray.delete(); img_color.delete(); /// Draw corners detected const r = 4; for (const i = 0; i < corners.rows; i++) { const x = corners.get_float_at(i, 0); const y = corners.get_float_at(i, 1); const color = new cv.Scalar(10, 200, 10); cv.circle(copy, [x, y], r, color, -1, 8, 0); color.delete(); } /// Show what you got showImage(copy, "canvas2"); copy.delete(); corners.delete(); }32:T5eb,async function harrisCornerDetection() { // var img = cv.matFromArray(getInput(), 24); // 24 for rgba // const img = cv.imread(await exampleImage); const img = cv.matFromImageData(await getInput()); var img_gray = new cv.Mat(); var img_color = new cv.Mat(); cv.cvtColor(img, img_gray, cv.ColorConversionCodes.COLOR_RGBA2GRAY.value, 0); cv.cvtColor(img, img_color, cv.ColorConversionCodes.COLOR_RGBA2RGB.value, 0); img.delete(); var dst = cv.Mat.zeros(img_color.cols, img_color.rows, cv.CV_32FC1); /// Detector parameters // var thresh = Control.threshold; const thresh = ex2_threshold; var max_thresh = 255; var blockSize = 2; var apertureSize = 3; var k = 0.04; /// Detecting corners cv.cornerHarris(img_gray, dst, blockSize, apertureSize, k, cv.BORDER_DEFAULT); /// Normalizing var dst_norm = new cv.Mat(); var dst_norm_scaled = new cv.Mat(); cv.normalize(dst, dst_norm, 0, 255, 32, cv.CV_32FC1, new cv.Mat()); cv.convertScaleAbs(dst_norm, dst_norm_scaled, 1, 0); /// Drawing a circle around corners for (var j = 0; j < dst_norm.rows; j++) { for (var i = 0; i < dst_norm.cols; i++) { if (dst_norm.get_float_at(j, i) > thresh) { var color = new cv.Scalar(0); cv.circle(dst_norm_scaled, [i, j], 5, color, 2, 8, 0); color.delete(); } } } /// Showing the result showImage(dst_norm_scaled, "canvas2"); dst.delete(); dst_norm.delete(); dst_norm_scaled.delete(); img_gray.delete(); img_color.delete(); }33:T4c8,maps = { const array = []; for (let sheet of sheetsWithIIIF) { const manifest = manifests.get(sheet.properties.iiifUrl); const imageUri = manifest.sequences[0].canvases[0].images[0].resource.service["@id"]; const width = manifest.sequences[0].canvases[0].width; const xMargin = Math.round(width * scaleFactors.x); const height = manifest.sequences[0].canvases[0].height; const yMargin = Math.round(height * scaleFactors.y); const coords = sheet.geometry.coordinates[0][0]; const map = { type: "GeoreferencedMap", id: await id.generateId(manifest), resource: { id: imageUri, type: "ImageService2", width, height }, gcps: [ { resource: [xMargin, yMargin], geo: coords[1] }, { resource: [xMargin, height - yMargin], geo: coords[0] }, { resource: [width - xMargin, height - yMargin], geo: coords[3] }, { resource: [width - xMargin, yMargin], geo: coords[2] } ], resourceMask: [ [xMargin, yMargin], [xMargin, height - yMargin], [width - xMargin, height - yMargin], [width - xMargin, yMargin] ] }; array.push(map); } return array; }34:[{"id":"e84628fd19adabf56c6f0f2195efdfadcb5c0d16cbc3b8f2a59b0a1e975ade00f7d7699ce68b08670b3063003740f9e9ff3f10d831b9d284a52232856f1a4726","href":"https://static.observableusercontent.com/files/e84628fd19adabf56c6f0f2195efdfadcb5c0d16cbc3b8f2a59b0a1e975ade00f7d7699ce68b08670b3063003740f9e9ff3f10d831b9d284a52232856f1a4726","name":"Artboard 1-0@1.5x-80.jpg","type":"image/jpeg","lastModified":1696684322574.086,"size":2271082},{"id":"c2024f5bb43087ecec973cf792a9dd2dcd0d76b92d1a2aba4b5e9752288a602c6c0a230fe2cf5bdcec587b061a3456b1bd33b3a676aa5f6e300a7101b9f4c98b","href":"https://static.observableusercontent.com/files/c2024f5bb43087ecec973cf792a9dd2dcd0d76b92d1a2aba4b5e9752288a602c6c0a230fe2cf5bdcec587b061a3456b1bd33b3a676aa5f6e300a7101b9f4c98b","name":"druid-ts545zc6250.geojson","type":"application/geo+json","lastModified":1696607192162.697,"size":411978},{"id":"04f32706d0fed8440f35c796bb3daf9c8a359d170dbd3d1f15767655c1e017f154111a9ea3ad4309bba14e0658a9a9b2a088664a45026b9c658d17c196afe065","href":"https://static.observableusercontent.com/files/04f32706d0fed8440f35c796bb3daf9c8a359d170dbd3d1f15767655c1e017f154111a9ea3ad4309bba14e0658a9a9b2a088664a45026b9c658d17c196afe065","name":"manifests.json","type":"application/json","lastModified":1696608168107.159,"size":1552482},{"id":"e94f796a3b082f50d662611d0915d558679768889c444b5c4d2267616b2acfea9e8686ba7ede93c5970e934a15c9b0c8e1013f9240528f0ffce4c2dd6b597ab3","href":"https://static.observableusercontent.com/files/e94f796a3b082f50d662611d0915d558679768889c444b5c4d2267616b2acfea9e8686ba7ede93c5970e934a15c9b0c8e1013f9240528f0ffce4c2dd6b597ab3","name":"Screenshot 2023-10-06 at 23.09.03.png","type":"image/png","lastModified":1696626576767.04,"size":1819412}] 2d:{"title":"Stanford North Korea maps","cells":[{"id":0,"value":"# Stanford North Korea maps\n\n[Open results in Allmaps Viewer](${viewerBase + urlParam})","pinned":false,"hidden":false,"mode":"md"},{"id":223,"value":"screenshot20231006At230903 = FileAttachment(\"Screenshot 2023-10-06 at 23.09.03.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"Sources:\n- [IIIF Stories issue](https://github.com/IIIF/iiif-stories/issues/117#issuecomment-583572005)\n- [Geojson with references to IIIF Manifests](https://stacks.stanford.edu/file/druid:ts545zc6250/index_map.json)\n- [Sheet index](https://stanford.maps.arcgis.com/apps/SimpleViewer/index.html?appid=ab4fca3d9d4145e2a5e2fa25deab88b1)\n- [First sheet in Stanford Digital Repository](https://purl.stanford.edu/qc800wv3208)","pinned":false,"hidden":false,"mode":"md"},{"id":228,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":230,"value":"artboard105x80 = FileAttachment(\"Artboard 1-0@1.5x-80.jpg\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"exampleImage = {\n const blob = await fetch(\n maps[0].resource.id + \"/full/1000,/0/default.jpg\"\n ).then((resp) => resp.blob());\n const src = URL.createObjectURL(blob);\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"viewof ex2_threshold = Inputs.range([0, 255], {\n value: 50,\n step: 1,\n label: \"Threshold\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"{\n const image = await exampleImage;\n const data = cv.imread(image);\n\n cv.cvtColor(data, data, cv.COLOR_RGBA2GRAY);\n cv.threshold(data, data, ex2_threshold, 255, cv.THRESH_BINARY);\n\n const contours = new cv.MatVector();\n const hierarchy = new cv.Mat();\n cv.findContours(\n data,\n contours,\n hierarchy,\n cv.RETR_EXTERNAL,\n cv.CHAIN_APPROX_NONE\n );\n\n // Now that we have our contours, convert back to RGB so that we can draw with colors.\n cv.cvtColor(data, data, cv.COLOR_GRAY2RGB);\n\n for (let i = 0; i < contours.size(); i++) {\n const { m00, m01, m10 } = cv.moments(contours.get(i));\n if (m00 === 0) continue;\n const center = new cv.Point(m10 / m00, m01 / m00);\n cv.circle(data, center, 10, [0, 0, 0, 255], 6);\n cv.circle(data, center, 10, [0, 255, 0, 255], 2);\n }\n\n const canvas = DOM.canvas(image.width, image.height);\n cv.imshow(canvas, data);\n\n data.delete();\n contours.delete();\n hierarchy.delete();\n\n return sideBySide(image, canvas);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"viewof selectedImage = Inputs.range([1, maps.length], {\n label: \"Image\",\n step: 1,\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":676,"value":"getInput()","pinned":false,"hidden":false,"mode":"ojs"},{"id":616,"value":"viewof cornerButton = Inputs.button(\"Corners\", { reduce: () => detectedCorners() })","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"detectedCorners = async () => {\n const src = cv.imread(await getInput());\n const dst = new cv.Mat();\n const corners = new cv.Mat();\n // To distinguish the input and output, we graying the image.\n // You can try different conversions.\n cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY);\n cv.goodFeaturesToTrack(dst, corners, 100, 0.01, 5);\n const radius = 4;\n const array = [];\n for (let i = 0; i < corners.rows; i++) {\n const x = corners.floatAt(i, 0);\n const y = corners.floatAt(i, 1);\n const color = new cv.Scalar(10, 200, 10);\n const center = new cv.Point(x, y);\n array.push({ x, y });\n cv.circle(dst, center, radius, color, -1);\n // color.delete();\n }\n // return corners;\n cv.imshow(\"canvasOutput\", dst);\n src.delete();\n dst.delete();\n return array;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":607,"value":"viewof contourButton = Inputs.button(\"Contours\", {\n reduce: () => detectedContours()\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"viewof threshold = Inputs.range([0, 255], {\n value: 200,\n step: 1,\n label: \"Threshold\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":651,"value":"detectedContours()\n// contourButton ? contourButton.sort().reverse() : \"Click button\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":688,"value":"cv.exceptionFromPtr(1061512056).msg","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":572,"value":"https://github.com/ucisysarch/opencvjs/blob/master/test/features_2d.html\nhttps://docs.opencv.org/3.4/d5/daa/tutorial_js_contours_begin.html\nhttps://docs.opencv.org/3.4/dc/dcf/tutorial_js_contour_features.html\nhttps://docs.opencv.org/3.4/dd/d1a/group__imgproc__feature.html#ga1d6bb77486c8f92d79c8793ad995d541\nhttps://javascript.plainenglish.io/computer-vision-with-opencv-js-e244adf46501","pinned":false,"hidden":false,"mode":"md"},{"id":381,"value":"{\n try {\n await shiThomasCornerDetection();\n } catch (error) {\n throw cv.exceptionFromPtr(error).msg;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"{\n try {\n await harrisCornerDetection();\n } catch (error) {\n throw cv.exceptionFromPtr(error).msg;\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"showImage = function (mat, canvas_id) {\n var data = mat.data(); // output is a Uint8Array that aliases directly into the Emscripten heap\n\n const channels = mat.channels();\n const channelSize = mat.elemSize1();\n\n var canvas = document.getElementById(canvas_id);\n\n const ctx = canvas.getContext(\"2d\");\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n canvas.width = mat.cols;\n canvas.height = mat.rows;\n\n const imdata = ctx.createImageData(mat.cols, mat.rows);\n\n for (var i = 0, j = 0; i < data.length; i += channels, j += 4) {\n imdata.data[j] = data[i];\n imdata.data[j + 1] = data[i + (1 % channels)];\n imdata.data[j + 2] = data[i + (2 % channels)];\n imdata.data[j + 3] = 255;\n }\n ctx.putImageData(imdata, 0, 0);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"async function getInput() {\n const blob = await fetch(\n maps[selectedImage - 1].resource.id + `/full/${width / 2},/0/default.jpg`\n ).then((resp) => resp.blob());\n const imageBitmap = await createImageBitmap(blob);\n const imageWidth = imageBitmap.width;\n const imageHeight = imageBitmap.height;\n const context = DOM.context2d(imageWidth, imageHeight);\n context.drawImage(imageBitmap, 0, 0, imageWidth, imageHeight);\n // var imgData = context.getImageData(0, 0, width, height);\n return context.canvas;\n // return {\n // arrayLength: imgData.data.length,\n // requiredLength: width * height * 4\n // };\n // const uint8c = new Uint8ClampedArray(buffer);\n // return { arrayLength: uint8c.length, requiredLength: width * height };\n // const imgData = new ImageData(uint8c, width, height);\n // return imgData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"function sideBySide(a, b) {\n const css = \"max-width:100%\";\n a.style.cssText += css;\n b.style.cssText += css;\n\n return html`

${a}

${b}

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":196,"value":"Taking out the geojson features that contain a reference to a IIIF manifest:","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"sheetsWithIIIF = indexmap.features.filter((item) => item.properties.iiifUrl)","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"Determining the pixel coordinates of the map on the image (based on the first sheet). These are used for both the GCPs and the mask:","pinned":false,"hidden":false,"mode":"md"},{"id":130,"value":"calculateScaleFactors = {\n const width = 14250;\n const height = 12741;\n return [\n [1933 / width, 2075 / height],\n [1946 / width, 10775 / height],\n [12334 / width, 10750 / height],\n [12290 / width, 2049 / height]\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"scaleFactors = ({ x: 0.13, y: 0.16 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"Creating an array of map objects and converting this to an AnnotationPage:","pinned":false,"hidden":false,"mode":"md"},{"id":77,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"annotationPage = annotation.generateAnnotation(maps)","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"For the link above to the Allmaps Viewer:","pinned":false,"hidden":false,"mode":"md"},{"id":181,"value":"urlParam = encodeURIComponent(JSON.stringify(annotationPage))","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"viewerBase = \"https://viewer.allmaps.org/#data=\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"Function to fetch all the manifests (statically imported):","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"async function fetchAllManifests() {\n const urls = sheetsWithIIIF.map((item) => item.properties.iiifUrl);\n const map = new Map();\n for (const url of urls) {\n const manifest = await fetchJson(url);\n map.set(url, manifest);\n }\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":64,"value":"manifests = {\n const json = await FileAttachment(\"manifests.json\").json();\n return new Map(json);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"indexmap = FileAttachment(\"druid-ts545zc6250.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"See: https://github.com/allmaps/allmaps/tree/main/packages/annotation","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"annotation = import(\"https://unpkg.com/@allmaps/annotation?module\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"id = import(\"https://cdn.skypack.dev/@allmaps/id\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"fetchJson = (url) => fetch(url).then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"import { cv, handleError, registerFile } from \"@mootari/opencv-js\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}