Außerhalb des UNPKG-CDN auf meinem Host-Computer kann es keine Leinvaskit-WASM verwenden ⇐ JavaScript

[Anonymous]

Ich versuche, auf meiner lokalen Maschine Canvaskit-WASM zu verwenden, das mit dem HTTP-Servermodul von Python gehostet wird. Es scheint, dass ich Canvaskit nur über UNPKG mit: < /p>
verwenden kann

Code: Select all

Wenn ich versuche, "canvaskit.js" zu verwenden, die über das offizielle NPM-Paket (https://www.npmjs.com/package/canvaskit-wasm) geliefert wird, vom gleichen Ort wie index.html, ich bekomme diese Fehler in der Firefox Developer Console:

Code: Select all

wasm streaming compile failed: LinkError: import object field 'memory' is not a Memory canvaskit.js:162:266
falling back to ArrayBuffer instantiation canvaskit.js:162:306
failed to asynchronously prepare wasm: LinkError: import object field 'memory' is not a Memory canvaskit.js:161:444
Aborted(LinkError: import object field 'memory' is not a Memory) canvaskit.js:160:63
Uncaught (in promise) RuntimeError: Aborted(LinkError: import object field 'memory' is not a Memory). Build with -sASSERTIONS for more info.
Ka http://127.0.0.1:8000/publish/canvaskit.js:160
CanvasKitInit http://127.0.0.1:8000/publish/canvaskit.js:161
promise callback*qb http://127.0.0.1:8000/publish/canvaskit.js:161
CanvasKitInit http://127.0.0.1:8000/publish/canvaskit.js:162
promise callback*CanvasKitInit/rb/CanvasKitInit< http://127.0.0.1:8000/publish/canvaskit.js:162
promise callback*rb http://127.0.0.1:8000/publish/canvaskit.js:162
CanvasKitInit http://127.0.0.1:8000/publish/canvaskit.js:267
CanvasKitInit http://127.0.0.1:8000/publish/canvaskit.js:267
 http://127.0.0.1:8000/publish/:64
canvaskit.js:160:75

< /code>
funktioniert das aufgrund von Sicherheitsrichtlinien in Firefox nicht.  Muss ich mich auf eine bestimmte Weise auf eine bestimmte Weise erstellen?

Canvaskit Sandbox




// HSBA conversion taken from https://github.com/processing/p5.js/blob/main/src/color/color_conversion.js
function hsbaToRGBA(hsba) {
const hue = hsba[0] * 6; // We will split hue into 6 sectors.
const sat = hsba[1];
const val = hsba[2];

let RGBA = [];

if (sat === 0) {
RGBA = [val, val, val, hsba[3]]; // Return early if grayscale.
} else {
const sector = Math.floor(hue);
const tint1 = val * (1 - sat);
const tint2 = val * (1 - sat * (hue - sector));
const tint3 = val * (1 - sat * (1 + sector - hue));
let red, green, blue;
if (sector === 1) {
// Yellow to green.
red = tint2;
green = val;
blue = tint1;
} else if (sector === 2) {
// Green to cyan.
red = tint1;
green = val;
blue = tint3;
} else if (sector === 3) {
// Cyan to blue.
red = tint1;
green = tint2;
blue = val;
} else if (sector === 4) {
// Blue to magenta.
red = tint3;
green = tint1;
blue = val;
} else if (sector === 5) {
// Magenta to red.
red = val;
green = tint1;
blue = tint2;
} else {
// Red to yellow (sector could be 0 or 6).
red = val;
green = tint3;
blue = tint1;
}
RGBA = [red, green, blue, hsba[3]];
}

return RGBA;
}
const ckLoaded = CanvasKitInit({
locateFile: (file) => 'https://unpkg.com/canvaskit-wasm@0.19.0/bin/'+file});
ckLoaded.then((CanvasKit) => {
const surface = CanvasKit.MakeCanvasSurface('main');
var paint = new CanvasKit.Paint();
paint.setStyle(CanvasKit.PaintStyle.Fill);
paint.setAntiAlias(true);
const canvasWidth = 869, canvasHeight = 798;
let io = 0;
function draw(canvas) {
canvas.clear(CanvasKit.BLACK);
const PI = 3.14159;
const PSI = 2 * PI;
var r = 869 / 1.61803 * 0.1;
canvas.translate(canvasWidth / 2, canvasHeight / 2);
var thetaSteps = 2600;
/*
colorMode(HSB);
strokeWeight(2);
smooth();
*/
for (var theta = 0; theta < thetaSteps; theta++) {
var p1 = (theta / thetaSteps) * PSI;
var yx1 = Math.cos(io * p1) * Math.cos(p1*Math.cos(io));
var yy1 = Math.cos(io * p1) * Math.sin(p1*Math.sin(io));
var p2 = (theta + 1 / thetaSteps) * PSI;
var yx2 = Math.cos(3 + io * p2) * Math.cos(p2);
var yy2 = Math.cos(3 + io * p2) * Math.sin(p2);

//(theta/thetaSteps)*PSI*12
let rainbowColor = hsbaToRGBA(
[
(127 + Math.cos(Math.atan(yy1 / yx1) * 2) * 106) /255,
1, 1, 1]
);
paint.setColor(CanvasKit.Color4f(rainbowColor[0],
rainbowColor[1],rainbowColor[2],1.0));
/*
stroke(127 + Math.cos(atan(yy1 / yx1) * 2) * 96, 255, 127); // Change the color
*/

canvas.drawCircle(
Math.cos(r/60)*r*10 * yx1,
Math.cos(r/60)*r*10 * yy1,
Math.cos(Math.atan(yy1 / yx1) * PSI * 2) * 6,
paint);
}
if (io <  16) {
io += 1.0 / 60 * 0.6;
} else {
io = 0;
}
canvas.translate(-canvasWidth / 2, -canvasHeight / 2);
surface.requestAnimationFrame(draw);
}
surface.requestAnimationFrame(draw);
});