Skip to content

Commit f353087

Browse files
seveibarseveibar
committed
webworker CORs fix
1 parent 18d4566 commit f353087

File tree

4 files changed

+272
-3
lines changed

4 files changed

+272
-3
lines changed

‎module-files/webworker.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,18 @@ const { version } = require("./package.json")
22
let lastRequestId = -1
33

44
function wrapAutoseg(urlOrVersion) {
5-
if (urlOrVersion.match(/[0-9]+\.[0-9]+\.[0-9]/)) {
5+
if (urlOrVersion.match(/^[0-9]+\.[0-9]+\.[0-9]+$/)) {
66
urlOrVersion = `https://unpkg.com/autoseg@${urlOrVersion}/webworker-worker-bundle.js`
77
}
8-
const webworker = new Worker(urlOrVersion)
8+
9+
const blob = new Blob([`importScripts('${urlOrVersion}')`], {
10+
type: "application/javascript",
11+
})
12+
const blobUrl = window.URL.createObjectURL(blob)
13+
const webworker = new Worker(blobUrl)
14+
15+
// This is blocked by a unfixable CORS error
16+
// const webworker = new Worker(urlOrVersion)
917

1018
const functions = ["setConfig", "loadImage", "getMask"]
1119

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "autoseg",
3-
"version": "0.0.4",
3+
"version": "0.0.6",
44
"main": "web.js",
55
"repository": "[email protected]:UniversalDataTool/autoseg.git",
66
"author": "seveibar <[email protected]>",
@@ -10,6 +10,7 @@
1010
"@typescript-eslint/parser": "2.x",
1111
"ava": "^3.9.0",
1212
"babel-eslint": "10.x",
13+
"cross-blob": "^2.0.0",
1314
"eslint": "6.x",
1415
"eslint-config-react-app": "^5.2.1",
1516
"eslint-plugin-flowtype": "4.x",

‎tests/webworker/webworker-crossorigin.html‎

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
<html>
2+
<!-- <script type="text/javascript" src="../../dist/webworker-worker.js"></script> -->
3+
<body>
4+
<p>
5+
To run this file, start a server in the autoseg directory, e.g. "python -m
6+
http.server") then navigate to
7+
http://localhost:8000/tests/webworker/webworker.html
8+
</p>
9+
<img
10+
id="img"
11+
src="https://s3.amazonaws.com/datasets.workaround.online/hands/01cb3085-3d42-4186-b52c-dcc52d9beb4c.mp4_frame012.jpg"
12+
/>
13+
<script type="text/javascript">
14+
let lastRequestId = -1
15+
16+
const blob = new Blob(
17+
[
18+
"importScripts('https://unpkg.com/[email protected]/webworker-worker-bundle.js')",
19+
],
20+
{ type: "application/javascript" }
21+
)
22+
const blobUrl = window.URL.createObjectURL(blob)
23+
const webworker = new Worker(blobUrl)
24+
25+
webworker.addEventListener("message", console.log)
26+
const functions = ["setConfig", "loadImage", "getMask"]
27+
28+
const obj = {}
29+
30+
for (const functionName of functions) {
31+
const id = lastRequestId++
32+
obj[functionName] = (...args) => {
33+
webworker.postMessage({ functionName, args, id })
34+
return new Promise((resolve, reject) => {
35+
const possibleResponse = (e) => {
36+
const { data } = e
37+
if (!data) return
38+
if (data.id === id) {
39+
webworker.removeEventListener("message", possibleResponse)
40+
if (data.error) {
41+
reject(new Error(data.error))
42+
} else {
43+
// There's some issue with the serialization of the ImageData
44+
// for getMask
45+
if (functionName === "getMask") {
46+
const { data: pixels, width, height } = data.returnValue
47+
resolve(new ImageData(pixels, width, height))
48+
} else {
49+
resolve(data.returnValue)
50+
}
51+
}
52+
}
53+
}
54+
webworker.addEventListener("message", possibleResponse)
55+
})
56+
}
57+
}
58+
59+
window.autoseg = obj
60+
61+
// -----------------------------
62+
// APPLICATION CODE
63+
// -----------------------------
64+
65+
const img = document.getElementById("img")
66+
img.crossOrigin = "anonymous"
67+
68+
img.onload = () => {
69+
const canvas = document.createElement("canvas")
70+
canvas.width = img.naturalWidth
71+
canvas.height = img.naturalHeight
72+
document.body.appendChild(canvas)
73+
const context = canvas.getContext("2d")
74+
75+
context.drawImage(img, 0, 0)
76+
77+
const imageData = context.getImageData(
78+
0,
79+
0,
80+
img.naturalWidth,
81+
img.naturalHeight
82+
)
83+
84+
async function doStuff() {
85+
await window.autoseg.setConfig({
86+
// mode: "simple",
87+
maxClusters: 10000,
88+
})
89+
await window.autoseg.loadImage(imageData)
90+
const maskImageData = await window.autoseg.getMask([
91+
{
92+
regionType: "polygon",
93+
cls: 0,
94+
points: [
95+
{
96+
x: 0.48117539026629935,
97+
y: 0.9876543209876543,
98+
},
99+
{
100+
x: 0.4986225895316804,
101+
y: 0.5126007550249975,
102+
},
103+
{
104+
x: 0.4701561065197429,
105+
y: 0.3803693500663198,
106+
},
107+
{
108+
x: 0.43067033976124885,
109+
y: 0.3624119987756351,
110+
},
111+
{
112+
x: 0.40955004591368227,
113+
y: 0.3101724313845526,
114+
},
115+
{
116+
x: 0.32966023875114786,
117+
y: 0.31833486378940923,
118+
},
119+
{
120+
x: 0.3076216712580349,
121+
y: 0.28405264768901134,
122+
},
123+
{
124+
x: 0.37373737373737376,
125+
y: 0.262830323436384,
126+
},
127+
{
128+
x: 0.4214876033057851,
129+
y: 0.1828384858687889,
130+
},
131+
{
132+
x: 0.3149678604224059,
133+
y: 0.17957351290684623,
134+
},
135+
{
136+
x: 0.317722681359045,
137+
y: 0.15671870217324763,
138+
},
139+
{
140+
x: 0.42056932966023874,
141+
y: 0.14202632384450567,
142+
},
143+
{
144+
x: 0.480257116620753,
145+
y: 0.21385572900724417,
146+
},
147+
{
148+
x: 0.5528007346189164,
149+
y: 0.4244464850525457,
150+
},
151+
{
152+
x: 0.6776859504132231,
153+
y: 0.966431996735027,
154+
},
155+
],
156+
},
157+
{
158+
regionType: "polygon",
159+
cls: 1,
160+
points: [
161+
{
162+
x: 0.3581267217630854,
163+
y: 0.9762269156208551,
164+
},
165+
{
166+
x: 0.41597796143250687,
167+
y: 0.435873890419345,
168+
},
169+
{
170+
x: 0.26905417814508725,
171+
y: 0.3787368635853484,
172+
},
173+
{
174+
x: 0.2892561983471074,
175+
y: 0.2660952963983267,
176+
},
177+
{
178+
x: 0.36455463728191,
179+
y: 0.22528313437404346,
180+
},
181+
{
182+
x: 0.2910927456382002,
183+
y: 0.20732578308335883,
184+
},
185+
{
186+
x: 0.24517906336088155,
187+
y: 0.1599836751351903,
188+
},
189+
{
190+
x: 0.4361799816345271,
191+
y: 0.019589837771655953,
192+
},
193+
{
194+
x: 0.24058769513314968,
195+
y: 0.024487297214569943,
196+
},
197+
{
198+
x: 0.04040404040404041,
199+
y: 0.04244464850525457,
200+
},
201+
{
202+
x: 0.011937557392102846,
203+
y: 0.9370472400775431,
204+
},
205+
],
206+
},
207+
{
208+
regionType: "polygon",
209+
cls: 1,
210+
points: [
211+
{
212+
x: 0.7658402203856749,
213+
y: 0.971329456177941,
214+
},
215+
{
216+
x: 0.6749311294765841,
217+
y: 0.6203448627691052,
218+
},
219+
{
220+
x: 0.45362718089990817,
221+
y: 0.03101724313845526,
222+
},
223+
{
224+
x: 0.9623507805325987,
225+
y: 0.06856443220079583,
226+
},
227+
{
228+
x: 0.9338842975206612,
229+
y: 0.9647995102540557,
230+
},
231+
],
232+
},
233+
])
234+
context.putImageData(maskImageData, 0, 0)
235+
}
236+
doStuff().catch((err) => {
237+
console.error(err)
238+
})
239+
}
240+
</script>
241+
</body>
242+
</html>

‎yarn.lock‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -514,6 +514,11 @@ binary-extensions@^2.0.0:
514514
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.0.0.tgz#23c0df14f6a88077f5f986c0d167ec03c3d5537c"
515515
integrity sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==
516516

517+
blob-polyfill@^4.0.20200601:
518+
version "4.0.20200601"
519+
resolved "https://registry.yarnpkg.com/blob-polyfill/-/blob-polyfill-4.0.20200601.tgz#16430e9e50d63e122c6aac18b31f5f0bc8c0bf92"
520+
integrity sha512-1jB6WOIp6IDxNyng5+9A8g/f0uiphib2ELCN+XAnlssinsW8s1k4VYG9b1TxIUd3pdm9RJSLQuBh6iohYmD4hA==
521+
517522
blueimp-md5@^2.10.0:
518523
version "2.16.0"
519524
resolved "https://registry.yarnpkg.com/blueimp-md5/-/blueimp-md5-2.16.0.tgz#9018bb805e4ee05512e0e8cbdb9305eeecbdc87c"
@@ -791,6 +796,14 @@ core-js-pure@^3.0.0:
791796
resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.6.5.tgz#c79e75f5e38dbc85a662d91eea52b8256d53b813"
792797
integrity sha512-lacdXOimsiD0QyNf9BC/mxivNJ/ybBGJXQFKzRekp1WTHoVUWsUHEn+2T8GJAzzIhyOuXA+gOxCVN3l+5PLPUA==
793798

799+
cross-blob@^2.0.0:
800+
version "2.0.0"
801+
resolved "https://registry.yarnpkg.com/cross-blob/-/cross-blob-2.0.0.tgz#a7cf1901c746b606ec31e0d04838d18888ea35a4"
802+
integrity sha512-NWzFuyG4GTZnM9MtQvjPYVlO12lZCSBdoHIHCZl9WKShsK3CqO+bEH7nuKwlVomlByb37XvT6nVY5uQxDBmk5Q==
803+
dependencies:
804+
blob-polyfill "^4.0.20200601"
805+
fetch-blob "^2.0.1"
806+
794807
cross-spawn@^6.0.5:
795808
version "6.0.5"
796809
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
@@ -1270,6 +1283,11 @@ fastq@^1.6.0:
12701283
dependencies:
12711284
reusify "^1.0.4"
12721285

1286+
fetch-blob@^2.0.1:
1287+
version "2.0.1"
1288+
resolved "https://registry.yarnpkg.com/fetch-blob/-/fetch-blob-2.0.1.tgz#64b583cd2bd21685b17706818b388af08cb40b9b"
1289+
integrity sha512-1jFpa68M4EzObtFa7XOKZoN1unsaeJ6hGSbxaWaVO+TkHmVvnyzRu1ktZAFbUvTZ9NC/qMKGKJ79dK4MzuSBiw==
1290+
12731291
figures@^3.0.0, figures@^3.2.0:
12741292
version "3.2.0"
12751293
resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"

0 commit comments

Comments
 (0)