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. You have to create your own <img/>
and <canvas>
tags with proper id
s.
Determine the zoom ratio(zoomRatio
). Send them with the <img>
's and <canvas>
's id as arguments to the function zoomIn()
. If you set the option hoveringSquare
true (which is by default), a translucent rectangle shows which part of the image is being zoomed in.
<!-- 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(number), imageId(string, id of the <img> tag), canvasId(string, id of the <canvas> tag), hoveringSquare(boolean, true by default))
*/
zoomIn(3, "image-to-be-extended", "canvas-to-show-the-image");