BlazorWheelZoom

January 18, 2022 · View on GitHub

Zoom and move image with Blazor - minimal javascript

animation

Demo site https://blazorwheelzoom.azurewebsites.net/

Add nuget package iso8859.blazor.wheel-zoom

server side blazor	webassembly blazor
in Pages/_Host.chtml	in wwwroot/index.html

<body>
...
<script src="_content/iso8859.blazor.wheel-zoom/wheelzoomblazor.js"></script>
</body>

for both in _Imports.razor

@using BlazorWheelZoomLibrary.Shared

Use the component in your razor page

<WheelZoom Image="/mire.png" width="500" height="500" />

If you want a border

<div style="border: thin solid green; width: 510px; height: 510px; padding: 5px;">
    <WheelZoom Image="/mire.png" width="500" height="500" />
</div>