Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Skia Blazor Runs in debugger but not when deployed #2836

Open
1 task done
jkears opened this issue Apr 16, 2024 · 0 comments
Open
1 task done

Skia Blazor Runs in debugger but not when deployed #2836

jkears opened this issue Apr 16, 2024 · 0 comments
Labels
type/bug

Comments

@jkears
Copy link

jkears commented Apr 16, 2024

Description

When I run the drag-text blazor example, as a component in .Net 8, with @rendermode="InteractiveWebAssembly" it works fine within the debugger however when I deploy to AzureWebSites ... it fails.

Code

 <h2>Skia WASM</h2>
<SkiaTest @rendermode="InteractiveWebAssembly"> </SkiaTest>

@using SkiaSharp.Views.Blazor
@using SkiaSharp
<h1>Raster (Bitmap) Canvas</h1>

<p>The canvas below is using pixels in memory. Click and drag to move the text.</p>

<div class="container">
    <div class="row">
        <div class="col border rounded p-2 canvas-container" style="max-width:300px">

            <SKCanvasView @ref="skiaView" OnPaintSurface="OnPaintSurface" IgnorePixelScaling="true"
                          @onpointerdown="OnPointerDown"
                          @onpointermove="OnPointerMove"
                          @onpointerup="OnPointerUp" />

        </div>
    </div>
</div>

@code {
    SKCanvasView skiaView = null!;
    SKPoint? touchLocation;
    [Inject] IJSRuntime JS { get; set; } = null!;

    void OnPaintSurface(SKPaintSurfaceEventArgs e)
    {
        // the the canvas and properties
        var canvas = e.Surface.Canvas;

        // make sure the canvas is blank
        canvas.Clear(SKColors.White);

        // decide what the text looks like
        using var paint = new SKPaint
            {
                Color = SKColors.Black,
                IsAntialias = true,
                Style = SKPaintStyle.Fill,
                TextAlign = SKTextAlign.Center,
                TextSize = 24
            };

        // adjust the location based on the pointer
        var coord = (touchLocation is SKPoint loc)
            ? new SKPoint(loc.X, loc.Y)
            : new SKPoint(e.Info.Width / 2, (e.Info.Height + paint.TextSize) / 2);

        // draw some text
        canvas.DrawText("SkiaSharp", coord, paint);
    }

    void OnPointerDown(PointerEventArgs e)
    {
        touchLocation = new SKPoint((float)e.OffsetX, (float)e.OffsetY);
        skiaView.Invalidate();
    }

    void OnPointerMove(PointerEventArgs e)
    {
        if (touchLocation == null)
            return;

        touchLocation = new SKPoint((float)e.OffsetX, (float)e.OffsetY);
        skiaView.Invalidate();
    }

    void OnPointerUp(PointerEventArgs e)
    {
        touchLocation = null;
        skiaView.Invalidate();
    }
}

Expected Behavior

I expected that what worked in Visual Studio debugger would be same as when running as a deployed app.

Actual Behavior

image

 "Error: [MONO] /__w/1/s/src/mono/mono/mini/aot-runtime-wasm.c:150 <disabled>
    at ht (https://askit2go.azurewebsites.net/_framework/dotnet.runtime.8.0.4.ogva3chynz.js:3:12765)
    at xl (https://askit2go.azurewebsites.net/_framework/dotnet.runtime.8.0.4.ogva3chynz.js:3:176030)
    at https://askit2go.azurewebsites.net/_framework/dotnet.native.wasm:wasm-function[16846]:0x5f4a3e
    at https://askit2go.azurewebsites.net/_framework/dotnet.native.wasm:wasm-function[9150]:0x436e2d
    at https://askit2go.azurewebsites.net/_framework/dotnet.native.wasm:wasm-function[9074]:0x4339cf
    at https://askit2go.azurewebsites.net/_framework/dotnet.native.wasm:wasm-function[9076]:0x433a94
    at https://askit2go.azurewebsites.net/_framework/dotnet.native.wasm:wasm-function[9077]:0x433ac7
    at https://askit2go.azurewebsites.net/_framework/dotnet.native.wasm:wasm-function[8509]:0x4045a6
    at https://askit2go.azurewebsites.net/_framework/dotnet.native.wasm:wasm-function[8543]:0x41230b
    at https://askit2go.azurewebsites.net/_framework/dotnet.native.wasm:wasm-function[11267]:0x4c4527" tabindex="0" style="flex-grow: 0; flex-shrink: 0; display: inline-block; width: 14px; height: 14px; color: var(--accent-foreground-rest); vertical-align: sub; position: relative; box-sizing: border-box; min-width: 0px; min-height: 0px; margin-top: -1px; margin-bottom: -2px;"><span style="display: block; width: 14px; height: 14px; background-color: currentcolor; mask: var(--icon-url) center / contain no-repeat; --icon-url: var(--image-file-edge-copilot);"></span></devtools-icon> </span><span class="console-message-text" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: rgb(225, 0, 0);">Error: [MONO] <span class="devtools-link" title="/__w/1/s/src/mono/mono/mini/aot-runtime-wasm.c" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">/__w/1/s/src/mono/mono/mini/aot-runtime-wasm.c:150</span> &lt;disabled&gt;
<span style="box-sizing: border-box; min-width: 0px; min-height: 0px;">    at ht (<span class="devtools-link" role="link" tabindex="-1" title="https://askit2go.azurewebsites.net/_framework/dotnet.runtime.8.0.4.ogva3chynz.js:3:12765" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">dotnet.runtime.8.0.4<span class="devtools-link-ellipsis" style="box-sizing: border-box; min-width: 0px; min-height: 0px;">…</span>va3chynz.js:3:12765</span>)
</span><span style="box-sizing: border-box; min-width: 0px; min-height: 0px;">    at xl (<span class="devtools-link" role="link" tabindex="-1" title="https://askit2go.azurewebsites.net/_framework/dotnet.runtime.8.0.4.ogva3chynz.js:3:176030" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">dotnet.runtime.8.0.4<span class="devtools-link-ellipsis" style="box-sizing: border-box; min-width: 0px; min-height: 0px;">…</span>a3chynz.js:3:176030</span>)
</span><span style="box-sizing: border-box; min-width: 0px; min-height: 0px;">    at <span class="devtools-link" role="link" tabindex="-1" title="https://askit2go.azurewebsites.net/_framework/dotnet.native.wasm:0x5f4a3e" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">dotnet.native.wasm:0x5f4a3e</span>
</span><span style="box-sizing: border-box; min-width: 0px; min-height: 0px;">    at <span class="devtools-link" role="link" tabindex="-1" title="https://askit2go.azurewebsites.net/_framework/dotnet.native.wasm:0x436e2d" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">dotnet.native.wasm:0x436e2d</span>
</span><span style="box-sizing: border-box; min-width: 0px; min-height: 0px;">    at <span class="devtools-link" role="link" tabindex="-1" title="https://askit2go.azurewebsites.net/_framework/dotnet.native.wasm:0x4339cf" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">dotnet.native.wasm:0x4339cf</span>
</span><span style="box-sizing: border-box; min-width: 0px; min-height: 0px;">    at <span class="devtools-link" role="link" tabindex="-1" title="https://askit2go.azurewebsites.net/_framework/dotnet.native.wasm:0x433a94" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">dotnet.native.wasm:0x433a94</span>
</span><span style="box-sizing: border-box; min-width: 0px; min-height: 0px;">    at <span class="devtools-link" role="link" tabindex="-1" title="https://askit2go.azurewebsites.net/_framework/dotnet.native.wasm:0x433ac7" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">dotnet.native.wasm:0x433ac7</span>
</span><span style="box-sizing: border-box; min-width: 0px; min-height: 0px;">    at <span class="devtools-link" role="link" tabindex="-1" title="https://askit2go.azurewebsites.net/_framework/dotnet.native.wasm:0x4045a6" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">dotnet.native.wasm:0x4045a6</span>
</span><span style="box-sizing: border-box; min-width: 0px; min-height: 0px;">    at <span class="devtools-link" role="link" tabindex="-1" title="https://askit2go.azurewebsites.net/_framework/dotnet.native.wasm:0x41230b" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">dotnet.native.wasm:0x41230b</span>
</span><span style="box-sizing: border-box; min-width: 0px; min-height: 0px;">    at <span class="devtools-link" role="link" tabindex="-1" title="https://askit2go.azurewebsites.net/_framework/dotnet.native.wasm:0x4c4527" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">dotnet.native.wasm:0x4c4527</span></span></span></span></div><div class="" role="group" style="box-sizing: border-box; min-width: 0px; min-height: 0px; flex: 0 0 auto; color: rgb(27, 27, 27); font-family: monospace; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(252, 235, 235); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span class="monospace stack-preview-container width-constrained" style="display: inline-block; --monospace-font-size: 12px; --monospace-font-family: monospace; --source-code-font-size: 12px; --source-code-font-family: monospace; width: 1851px; box-sizing: border-box; min-width: 0px; min-height: 0px; font-family: var(--monospace-font-family); font-size: var(--monospace-font-size) !important;">
  | xl | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
-- | -- | -- | --
  | $func16846 | @ | dotnet.native.wasm:0x5f4a3e
  | $func9150 | @ | dotnet.native.wasm:0x436e2d
  | $func9074 | @ | dotnet.native.wasm:0x4339cf
  | $func9076 | @ | dotnet.native.wasm:0x433a94
  | $func9077 | @ | dotnet.native.wasm:0x433ac7
  | $func8509 | @ | dotnet.native.wasm:0x4045a6
  | $func8543 | @ | dotnet.native.wasm:0x41230b
  | $func11267 | @ | dotnet.native.wasm:0x4c4527
  | $func10596 | @ | dotnet.native.wasm:0x49ada3
  | $func10595 | @ | dotnet.native.wasm:0x49ad2e
  | $func10044 | @ | dotnet.native.wasm:0x47677d
  | $func8619 | @ | dotnet.native.wasm:0x414cff
  | $func8516 | @ | dotnet.native.wasm:0x4110c3
  | $func8509 | @ | dotnet.native.wasm:0x404298
  | $func8543 | @ | dotnet.native.wasm:0x41230b
  | $func11267 | @ | dotnet.native.wasm:0x4c4527
  | $func10596 | @ | dotnet.native.wasm:0x49ada3
  | $func10602 | @ | dotnet.native.wasm:0x49b6ab
  | $func10626 | @ | dotnet.native.wasm:0x49dd59
  | $mono_wasm_invoke_method_bound | @ | dotnet.native.wasm:0x5f10d9
  | Module._mono_wasm_invoke_method_bound | @ | dotnet.native.8.0.4.sklt7iw8m5.js:8
  | kr | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | (anonymous) | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | invokeDotNetFromJS | @ | blazor.web.js:1
  | invokeDotNetMethod | @ | blazor.web.js:1
  | invokeMethod | @ | blazor.web.js:1
  | (anonymous) | @ | SKHtmlCanvas.js:104
  | requestAnimationFrame (async) |   |  
  | requestAnimationFrame | @ | SKHtmlCanvas.js:98
  | requestAnimationFrame | @ | SKHtmlCanvas.js:68
  | invokeJSFromDotNet | @ | blazor.web.js:1
  | ri | @ | blazor.web.js:1
  | (anonymous) | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | xl | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | $func8619 | @ | dotnet.native.wasm:0x414c7b
  | $func8516 | @ | dotnet.native.wasm:0x4110c3
  | $func8509 | @ | dotnet.native.wasm:0x404298
  | $func8543 | @ | dotnet.native.wasm:0x41230b
  | $func11267 | @ | dotnet.native.wasm:0x4c4527
  | $func10596 | @ | dotnet.native.wasm:0x49ada3
  | $func10602 | @ | dotnet.native.wasm:0x49b6ab
  | $func10626 | @ | dotnet.native.wasm:0x49dd59
  | $mono_wasm_invoke_method_bound | @ | dotnet.native.wasm:0x5f10d9
  | Module._mono_wasm_invoke_method_bound | @ | dotnet.native.8.0.4.sklt7iw8m5.js:8
  | kr | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | (anonymous) | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | endInvokeJSFromDotNet | @ | blazor.web.js:1
  | (anonymous) | @ | blazor.web.js:1
  | Promise.then (async) |   |  
  | beginInvokeJSFromDotNet | @ | blazor.web.js:1
  | ri | @ | blazor.web.js:1
  | (anonymous) | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | xl | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | $func8619 | @ | dotnet.native.wasm:0x414c7b
  | $func8516 | @ | dotnet.native.wasm:0x4110c3
  | $func8509 | @ | dotnet.native.wasm:0x404298
  | $func8543 | @ | dotnet.native.wasm:0x41230b
  | $func11267 | @ | dotnet.native.wasm:0x4c4527
  | $func10596 | @ | dotnet.native.wasm:0x49ada3
  | $func10602 | @ | dotnet.native.wasm:0x49b6ab
  | $func10626 | @ | dotnet.native.wasm:0x49dd59
  | $mono_wasm_invoke_method_bound | @ | dotnet.native.wasm:0x5f10d9
  | Module._mono_wasm_invoke_method_bound | @ | dotnet.native.8.0.4.sklt7iw8m5.js:8
  | kr | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | (anonymous) | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | endInvokeJSFromDotNet | @ | blazor.web.js:1
  | (anonymous) | @ | blazor.web.js:1
  | Promise.then (async) |   |  
  | beginInvokeJSFromDotNet | @ | blazor.web.js:1
  | ri | @ | blazor.web.js:1
  | (anonymous) | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | xl | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | $func8619 | @ | dotnet.native.wasm:0x414c7b
  | $func8516 | @ | dotnet.native.wasm:0x4110c3
  | $func8509 | @ | dotnet.native.wasm:0x404298
  | $func8543 | @ | dotnet.native.wasm:0x41230b
  | $func11267 | @ | dotnet.native.wasm:0x4c4527
  | $func10596 | @ | dotnet.native.wasm:0x49ada3
  | $func10602 | @ | dotnet.native.wasm:0x49b6ab
  | $func10626 | @ | dotnet.native.wasm:0x49dd59
  | $mono_wasm_invoke_method_bound | @ | dotnet.native.wasm:0x5f10d9
  | Module._mono_wasm_invoke_method_bound | @ | dotnet.native.8.0.4.sklt7iw8m5.js:8
  | kr | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | (anonymous) | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | endInvokeJSFromDotNet | @ | blazor.web.js:1
  | (anonymous) | @ | blazor.web.js:1
  | Promise.then (async) |   |  
  | beginInvokeJSFromDotNet | @ | blazor.web.js:1
  | ri | @ | blazor.web.js:1
  | (anonymous) | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | xl | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | $func8619 | @ | dotnet.native.wasm:0x414c7b
  | $func8516 | @ | dotnet.native.wasm:0x4110c3
  | $func8509 | @ | dotnet.native.wasm:0x404298
  | $func8543 | @ | dotnet.native.wasm:0x41230b
  | $func11267 | @ | dotnet.native.wasm:0x4c4527
  | $func10596 | @ | dotnet.native.wasm:0x49ada3
  | $func10602 | @ | dotnet.native.wasm:0x49b6ab
  | $func10626 | @ | dotnet.native.wasm:0x49dd59
  | $mono_wasm_invoke_method_bound | @ | dotnet.native.wasm:0x5f10d9
  | Module._mono_wasm_invoke_method_bound | @ | dotnet.native.8.0.4.sklt7iw8m5.js:8
  | kr | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | l.javaScriptExports.complete_task | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | (anonymous) | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | Promise.then (async) |   |  
  | mo | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | (anonymous) | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | (anonymous) | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | xl | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | $func8619 | @ | dotnet.native.wasm:0x414c7b
  | $func8516 | @ | dotnet.native.wasm:0x4110c3
  | $func8509 | @ | dotnet.native.wasm:0x404298
  | $func8543 | @ | dotnet.native.wasm:0x41230b
  | $func11267 | @ | dotnet.native.wasm:0x4c4527
  | $func10596 | @ | dotnet.native.wasm:0x49ada3
  | $func10602 | @ | dotnet.native.wasm:0x49b6ab
  | $func10626 | @ | dotnet.native.wasm:0x49dd59
  | $mono_wasm_invoke_method_bound | @ | dotnet.native.wasm:0x5f10d9
  | Module._mono_wasm_invoke_method_bound | @ | dotnet.native.8.0.4.sklt7iw8m5.js:8
  | kr | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | l.javaScriptExports.complete_task | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | (anonymous) | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | Promise.then (async) |   |  
  | mo | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | (anonymous) | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | (anonymous) | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | xl | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | $func8619 | @ | dotnet.native.wasm:0x414c7b
  | $func8516 | @ | dotnet.native.wasm:0x4110c3
  | $func8509 | @ | dotnet.native.wasm:0x404298
  | $func8543 | @ | dotnet.native.wasm:0x41230b
  | $func11267 | @ | dotnet.native.wasm:0x4c4527
  | $func10596 | @ | dotnet.native.wasm:0x49ada3
  | $func10595 | @ | dotnet.native.wasm:0x49ad2e
  | $func10044 | @ | dotnet.native.wasm:0x47677d
  | $func8619 | @ | dotnet.native.wasm:0x414cff
  | $func8516 | @ | dotnet.native.wasm:0x4110c3
  | $func8509 | @ | dotnet.native.wasm:0x404298
  | $func8543 | @ | dotnet.native.wasm:0x41230b
  | $func11267 | @ | dotnet.native.wasm:0x4c4527
  | $func10596 | @ | dotnet.native.wasm:0x49ada3
  | $func10602 | @ | dotnet.native.wasm:0x49b6ab
  | $func10626 | @ | dotnet.native.wasm:0x49dd59
  | $mono_wasm_invoke_method_bound | @ | dotnet.native.wasm:0x5f10d9
  | Module._mono_wasm_invoke_method_bound | @ | dotnet.native.8.0.4.sklt7iw8m5.js:8
  | kr | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | l.javaScriptExports.call_entry_point | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | Bc | @ | dotnet.runtime.8.0.4.ogva3chynz.js:3
  | callEntryPoint | @ | blazor.web.js:1
  | ei | @ | blazor.web.js:1
  | await in ei (async) |   |  
  | Zr | @ | blazor.web.js:1
  | startWebAssemblyIfNotStarted | @ | blazor.web.js:1
  | resolveRendererIdForDescriptor | @ | blazor.web.js:1
  | determinePendingOperation | @ | blazor.web.js:1
  | refreshRootComponents | @ | blazor.web.js:1
  | (anonymous) | @ | blazor.web.js:1
  | setTimeout (async) |   |  
  | rootComponentsMayRequireRefresh | @ | blazor.web.js:1
  | onDocumentUpdated | @ | blazor.web.js:1
  | Ji | @ | blazor.web.js:1

Version of SkiaSharp

2.88.3 (Current)

Last Known Good Version of SkiaSharp

2.88.2 (Previous)

IDE / Editor

Visual Studio (Windows)

Platform / Operating System

Linux

Platform / Operating System Version

No response

Devices

No response

Relevant Screenshots

No response

Relevant Log Output

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
type/bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@jkears