@rockshin/react-image-annotation
Version:
An image annotation tool for ai project that manual annotation for images, easy to use!
62 lines (61 loc) • 2.4 kB
JavaScript
import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
function ImageExport({ result, onStartAgain }) {
const [src, setSrc] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(null);
(0, __WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect)(()=>{
const url = URL.createObjectURL(result);
setSrc(url);
return ()=>URL.revokeObjectURL(url);
}, [
result
]);
function onDownload() {
if (!src) return;
const a = document.createElement('a');
a.href = src;
a.download = 'annotated-image.png';
a.click();
}
const [didCopy, setDidCopy] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
function onCopy() {
navigator.clipboard.write([
new ClipboardItem({
[result.type]: result
})
]);
setDidCopy(true);
}
(0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
if (!didCopy) return;
const t = setTimeout(()=>setDidCopy(false), 2000);
return ()=>clearTimeout(t);
}, [
didCopy
]);
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
className: "ImageExport",
children: [
src && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("img", {
src: src
}),
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
className: "ImageExport-buttons",
children: [
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("button", {
onClick: onCopy,
children: didCopy ? 'Copied!' : 'Copy'
}),
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("button", {
onClick: onDownload,
children: "Download"
})
]
}),
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("button", {
onClick: onStartAgain,
children: "Start Again"
})
]
});
}
export { ImageExport };