PaletteSwitcher/client/src/ImageOutput.tsx

42 lines
1017 B
TypeScript
Raw Normal View History

2021-12-12 16:50:58 +00:00
import FileSaver from "file-saver";
import "./ImageOutput.css";
interface OutputProps {
imageData: Uint8ClampedArray;
}
function ImageOutput({ imageData }: OutputProps) {
const imageBlob = new Blob([imageData], { type: "image/png" });
const imageUrl = URL.createObjectURL(imageBlob);
const handleClick = () => {
FileSaver.saveAs(imageBlob, "image.png");
};
return (
<div className="mx-auto">
<img
alt="dithering output"
src={imageUrl}
className="object-contain max-h-96 max-w-96 mx-auto"
/>
<button
onClick={handleClick}
className="block w-48 mx-auto mt-1 py-2 px-4 text-sm text-nord-0 bg-nord-4 hover:bg-nord-5"
>
Download
</button>
<a
href={imageUrl}
target="_blank"
rel="noopener noreferrer"
className="block w-48 mx-auto mt-1 py-2 px-4 text-sm text-nord-0 bg-nord-4 hover:bg-nord-5"
>
Open in new tab
</a>
</div>
);
}
export default ImageOutput;