{"id":16071,"date":"2025-06-09T17:31:04","date_gmt":"2025-06-09T08:31:04","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=16071"},"modified":"2025-06-09T17:32:28","modified_gmt":"2025-06-09T08:32:28","slug":"offscreen-canvas-%ec%83%98%ed%94%8c-%ec%bd%94%eb%93%9c","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=16071","title":{"rendered":"Offscreen Canvas \uc0d8\ud50c \ucf54\ub4dc"},"content":{"rendered":"

\uc6f9\uc740 \uae30\ubcf8\uc801\uc73c\ub85c \ub2e8\uc77c \uc2a4\ub808\ub4dc\uc774\uc9c0\ub9cc WebWork\ub97c \ud1b5\ud574 \uba40\ud2f0 \uc2a4\ub808\ub4dc\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4. \ubcc4\ub3c4\uc758 \uc2a4\ub808\ub4dc\ub97c \ud1b5\ud574 \uc5b4\ub5a4 \uadf8\ub9bc\uc744 \uadf8\ub9b4 \uc218 \uc788\ub2e4\uba74 \uadf8\ub9bc\uc774 \uadf8\ub824\uc9c0\ub294 \ub3d9\uc548\uc5d0\ub3c4 \ub2e4\ub978 \uc791\uc5c5\uc744 \ucc98\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n

\uc2dc\ub098\ub9ac\uc624\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4. \uc0ac\uc6a9\uc790\ub294 \uc790\uc2e0\uc758 PC\uc5d0\uc11c \uc774\ubbf8\uc9c0 \ud30c\uc77c\uc744 \uc77d\uace0 \uc774\ubbf8\uc9c0 \ud30c\uc77c\uc5d0 \ub300\ud55c \ub370\uc774\ud130\ub97c \uc6f9 \uc6cc\ucee4\uc5d0\uac8c \uc804\ub2ec\ud55c\ub2e4. \uc6f9\uc6cc\ucee4\uc5d0\uc11c \uc774 \uc774\ubbf8\uc9c0 \ub370\uc774\ud130\ub97c \uce94\ubc84\uc2a4\uc5d0 \uadf8\ub9b0\ub2e4. (\uc0ac\uc2e4 \uc774 \uc608\uc81c\ub294 \ud750\ub984\uc0c1 \ubb18\ud55c\ub370, \uc774\ubbf8\uc9c0 \ub370\uc774\ud130\ub97c \uce94\ubc84\uc2a4\uc5d0 \uadf8\ub9b0\ub2e4\ub77c\ub294 \uac83\uc744 \uce94\ubc84\uc2a4\uc5d0 \uc6d0\ud558\ub294 \ub3c4\ud615\ub4e4\uc744 \uadf8\ub9b0\ub2e4\ub77c\uace0 \ud558\ub294\uac8c \ub354 \uc790\uc5f0\uc2a4\ub7fd\ub2e4.)<\/p>\n

\uba3c\uc800 UI\ub85c \uc774\ubbf8\uc9c0 \ud30c\uc77c\uc744 \uc77d\uc5b4\uc62c DOM\uc774 \ud544\uc694\ud558\ub2e4. \uc774 \ucf54\ub4dc\ub294 main.js \ud30c\uc77c\uc5d0 \uc874\uc7ac\ud55c\ub2e4.<\/p>\n

\r\ndocument.querySelector('#app').innerHTML = \/* html *\/ `\r\n  <input type=\"file\" \/> \r\n`;\r\n<\/pre>\n
\uc6f9\uc6cc\ud06c\ub97c \uae30\ub3d9\ud55c\ub2e4. \uc774 \ucf54\ub4dc\ub294 main.js \ud30c\uc77c\uc5d0 \uc874\uc7ac\ud55c\ub2e4.<\/p>\n
\r\nconst worker = new Worker('.\/worker.js');\r\n<\/pre>\n
input DOM\uc744 \ud074\ub9ad\ud574\uc11c \ud30c\uc77c\uc744 \uc120\ud0dd\ud588\uc744\ub54c\uc758 \uc774\ubca4\ud2b8\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n
\r\nconst handleFile = (event) => {\r\n  const file = event.target.files[0];\r\n  const reader = new FileReader();\r\n  reader.onload = (event) => {\r\n    const canvas = document.createElement(\"canvas\");\r\n    const offsetScreenCanvas = canvas.transferControlToOffscreen();\r\n    const dataUrl = event.target.result;\r\n    worker.postMessage(\r\n      { offsetScreenCanvas, dataUrl },\r\n      [ offsetScreenCanvas ]\r\n    );\r\n  }\r\n  reader.readAsDataURL(file);\r\n}\r\n\r\nconst fileInput = document.querySelector(\"input\");\r\nfileInput.addEventListener('change', handleFile);\r\n<\/pre>\n
canavs\ub97c \ub9cc\ub4e4\uace0 \uc774 \uce94\ubc84\uc2a4\ub97c \uc6f9\uc6cc\ucee4\ub85c \uc804\ub2ec\ud558\uae30 \uc704\ud574 offsetScreen\uc73c\ub85c \ub9cc\ub4e0\ub2e4. offsetScreen\uc740 \uacf5\uc720 \uba54\ubaa8\ub9ac\ub85c \uc804\ub2ec\ud560 \uc218 \uc788\uc9c0\ub9cc \uc77d\uc740 \ud30c\uc77c\uc758 \ub370\uc774\ud130\ub294 \ubcf5\uc0ac\ud574\uc11c \uc804\ub2ec\ud558\uace0 \uc788\ub2e4. work.js \ud30c\uc77c\uc758 \ub0b4\uc6a9\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n
\r\nself.onmessage = async (event) => {\r\n  const { offsetScreenCanvas, dataUrl } = event.data;\r\n\r\n  \/\/ const response = await fetch(dataUrl);\r\n  \/\/ const blob = await response.blob();\r\n\r\n  const blob = await fetch(dataUrl).then((r) => r.blob());\r\n  const imageBitmap = await createImageBitmap(blob);\r\n  const context = offsetScreenCanvas.getContext('2d');\r\n\r\n  const width = imageBitmap.width \/ 2;\r\n  const height = imageBitmap.height \/ 2;\r\n\r\n  offsetScreenCanvas.width = width;\r\n  offsetScreenCanvas.height = height;\r\n\r\n  context.drawImage(imageBitmap, 0, 0, width, height);\r\n}\r\n<\/pre>\n
\uc774\ubbf8\uc9c0\ub97c \uce94\ubc84\uc2a4\uc5d0 \ub2e4 \uadf8\ub807\ub2e4\uba74 \uce94\ubc84\uc2a4\uc5d0 \uadf8\ub824\uc9c4 \uacb0\uacfc\ub97c Blob \ub370\uc774\ud130\ub974 \ub9cc\ub4e4\uc5b4 \uba54\uc778 \uc2a4\ub808\ub4dc\uc5d0 \uc804\ub2ec\ud574\uc57c \ud55c\ub2e4. \uad00\ub828 \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n
\r\nself.onmessage = async (event) => {\r\n  ...\r\n\r\n  context.drawImage(imageBitmap, 0, 0, width, height);\r\n\r\n  offsetScreenCanvas.convertToBlob().then(blob => {\r\n    const reader = new FileReader();\r\n    reader.onload = () => {\r\n      self.postMessage({ dataUrl: reader.result });\r\n    };\r\n    reader.readAsDataURL(blob);\r\n  });\r\n}\r\n<\/pre>\n
\uc704\uc758 \ucf54\ub4dc\uc640 \uad00\ub828\ub41c \uba54\uc778 \uc2a4\ub808\ub4dc\uc758 \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n
\r\nworker.onmessage = (e) => {\r\n  const img = new Image();\r\n  img.src = e.data.dataUrl;\r\n\r\n  document.querySelector('#app').appendChild(img);\r\n}\r\n<\/pre>\n
\uc55e\uc11c \uc5b8\uae09\ud588\ub4ef \uc704\uc758 \uc608\uc81c\uc5d0\uc11c \uac00\uc7a5 \ud070 \ubb38\uc81c\ub294 \uba54\uc778 \uc2a4\ub808\ub4dc\uc5d0\uc11c \uc77d\uc740 \uc774\ubbf8\uc9c0 \ub370\uc774\ud130 \uc6d0\ubcf8\uc5d0 \ub300\ud55c \ub3d9\uc77c\ud55c \ud06c\uae30\uc758 \ub370\uc774\ud130\ub97c \ub9cc\ub4e4\uc5b4 \uc6f9\uc6cc\ucee4\uc5d0 \uc804\ub2ec\ud558\uace0 \uc788\ub2e4. \uc774 \ubd80\ubd84\uc5d0 \ub300\ud55c \uac1c\uc120\uc740 \uacf5\uc720 \uba54\ubaa8\ub9ac\ub85c \ud574\uacb0\uc774 \uac00\ub2a5\ud558\ub2e4. \ub2e8, \uacf5\uc720 \uba54\ubaa8\ub9ac\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574\uc11c\ub294 \uc11c\ubc84 \uce21 \ubcf4\uc548 \uc218\uc900\uc774 \uac00\uc7a5 \ub192\uc740 \uc0c1\ud0dc\uc5ec\uc57c \ud55c\ub2e4. \ub05d\uc73c\ub85c \ucd5c\uc885 \uacb0\uacfc\ub294 \uc544\ub798\uc640 \uac19\ub2e4.<\/p>\n
\"\"<\/p>\n","protected":false},"excerpt":{"rendered":"
\uc6f9\uc740 \uae30\ubcf8\uc801\uc73c\ub85c \ub2e8\uc77c \uc2a4\ub808\ub4dc\uc774\uc9c0\ub9cc WebWork\ub97c \ud1b5\ud574 \uba40\ud2f0 \uc2a4\ub808\ub4dc\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4. \ubcc4\ub3c4\uc758 \uc2a4\ub808\ub4dc\ub97c \ud1b5\ud574 \uc5b4\ub5a4 \uadf8\ub9bc\uc744 \uadf8\ub9b4 \uc218 \uc788\ub2e4\uba74 \uadf8\ub9bc\uc774 \uadf8\ub824\uc9c0\ub294 \ub3d9\uc548\uc5d0\ub3c4 \ub2e4\ub978 \uc791\uc5c5\uc744 \ucc98\ub9ac\ud560 \uc218 \uc788\ub2e4. \uc2dc\ub098\ub9ac\uc624\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4. \uc0ac\uc6a9\uc790\ub294 \uc790\uc2e0\uc758 PC\uc5d0\uc11c \uc774\ubbf8\uc9c0 \ud30c\uc77c\uc744 \uc77d\uace0 \uc774\ubbf8\uc9c0 \ud30c\uc77c\uc5d0 \ub300\ud55c \ub370\uc774\ud130\ub97c \uc6f9 \uc6cc\ucee4\uc5d0\uac8c \uc804\ub2ec\ud55c\ub2e4. \uc6f9\uc6cc\ucee4\uc5d0\uc11c \uc774 \uc774\ubbf8\uc9c0 \ub370\uc774\ud130\ub97c \uce94\ubc84\uc2a4\uc5d0 \uadf8\ub9b0\ub2e4. (\uc0ac\uc2e4 \uc774 \uc608\uc81c\ub294 \ud750\ub984\uc0c1 \ubb18\ud55c\ub370, \uc774\ubbf8\uc9c0 … <\/p>\n
\ub354 \ubcf4\uae30 “Offscreen Canvas \uc0d8\ud50c \ucf54\ub4dc”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[105],"tags":[],"class_list":["post-16071","post","type-post","status-publish","format-standard","hentry","category-html5"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16071","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16071"}],"version-history":[{"count":4,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16071\/revisions"}],"predecessor-version":[{"id":16076,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16071\/revisions\/16076"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16071"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=16071"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=16071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}