UNPKG

@notthatnathan/use-canvas-image

Version:

A React hook for automatically exporting a canvas to img.

3 lines (2 loc) 1.22 kB
import{useRef as t,useEffect as e}from"react";import{useInterval as r}from"usehooks-ts";var n=function(n){var a=n.canvas,u=n.imgClassname,i=void 0===u?"":u,c=n.canvasClassname,o=void 0===c?"":c,s=n.canvasAttributes,l=void 0===s?{}:s,f=n.fileType,v=void 0===f?"image/jpeg":f,m=n.quality,p=void 0===m?.7:m,d=n.interval,y=void 0===d?null:d,b=t(),g=t(),L=function(){requestAnimationFrame(function(){if(b.current&&g.current){var t=b.current.toDataURL(v,p);g.current.src=t}})};return e(function(){var t;return function e(){var r,n;"string"==typeof a?b.current=document.querySelector(a):(null==a?void 0:a.current)instanceof HTMLCanvasElement?b.current=a.current:a instanceof HTMLCanvasElement&&(b.current=a),b.current?(Object.keys(l).forEach(function(t){b.current.setAttribute(t,l[t])}),o&&(r=b.current.classList).add.apply(r,o.split(" ")),b.current.style="position: absolute; top: 0; left: 0; z-index: 1;",g.current=new Image,i&&(n=g.current.classList).add.apply(n,i.split(" ")),g.current.style="position: absolute; top: 0; left: 0; z-index: 0;",b.current.after(g.current)):t=setTimeout(e,100)}(),function(){t&&clearTimeout(t)}},[]),r(L,y),null===y||!1===y?L:null};export{n as default}; //# sourceMappingURL=index.esm.mjs.map