search

mono / SkiaSharp

SkiaSharp is a cross-platform 2D graphics API for .NET platforms based on Google's Skia Graphics Library. It provides a comprehensive 2D API that can be used across mobile, server and desktop models to render images.
MIT License
4.14k stars 522 forks source link

Skia Blazor Runs in debugger but not when deployed #2836

Open jkears opened 1 month ago

jkears commented 1 month ago

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