zoom-in-to-canvas
npm install zoom-in-to-canvas
// or
yarn add zoom-in-to-canvas
This is a simple library that allows to zoom in part of the image(where you hover your mouse on) of an <img /> tag and show it on a <canvas> tag.
Determine the zoom ratio(zoomRatio). Send them with the <img>'s and <canvas>'s id as arguments to the function zoomIn().
Example
<!-- index.html -->
<body>
<img src="example.png" id="image-to-be-extended" width="400" height="auto" />
<canvas id="canvas-to-show-the-image" width="600" height="600">
<script type="module" src="/src/main.ts"></script>
</body>/*
/src/main.ts
zoomIn(zoomRatio, imageId(id of the <img> tag), canvasId(id of the <canvas> tag))
*/
zoomIn(3, "image-to-be-extended", "canvas-to-show-the-image");