search

iso8859 / BlazorWheelZoom

Zoom and move image with Blazor - minimal javascript
Apache License 2.0
13 stars 2 forks source link

readme

BlazorWheelZoom

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="https://github.com/iso8859/BlazorWheelZoom/raw/master/_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>