status-im
/
status-web-archive
mirror of https://github.com/status-im/status-web-archive.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Refactor image context menu (#63)

This commit is contained in:
Szymon Szlachtowicz 2021-10-12 09:37:28 +02:00 committed by GitHub
parent 2b0a50282c
commit 19478f245c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 11 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/react-chat/src/components/Form/ImageMenu.tsx
View File

@ -19,11 +19,11 @@ export const ImageMenu = ({ imageId }: ImageMenuProps) => {
<MenuBlock> <MenuBlock>
<MenuList> <MenuList>
<MenuItem onClick={() => copyImg(imageId)}> <MenuItem onClick={() => copyImg(imageId)}>
<CopyIcon /> <MenuText>Copy imageId</MenuText> <CopyIcon /> <MenuText>Copy image</MenuText>
</MenuItem> </MenuItem>
<MenuItem onClick={() => downloadImg(imageId)}> <MenuItem onClick={() => downloadImg(imageId)}>
<DownloadIcon /> <DownloadIcon />
<MenuText> Download imageId</MenuText> <MenuText> Download image</MenuText>
</MenuItem> </MenuItem>
</MenuList> </MenuList>
</MenuBlock> </MenuBlock>

24
packages/react-chat/src/utils/copyImg.ts
View File

@ -1,5 +1,3 @@
import { createImg } from "./createImg";
const copyToClipboard = async (pngBlob: any) => { const copyToClipboard = async (pngBlob: any) => {
try { try {
await navigator.clipboard.write([ await navigator.clipboard.write([
@ -12,27 +10,9 @@ const copyToClipboard = async (pngBlob: any) => {
} }
}; };
const convertToPng = (imgBlob: any) => { //Images are already converted to png by useMessenger when received
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const imageEl = createImg({ src: window.URL.createObjectURL(imgBlob) });
imageEl.onload = (e: any) => {
canvas.width = e.target.width;
canvas.height = e.target.height;
if (ctx) ctx.drawImage(e.target, 0, 0, e.target.width, e.target.height);
canvas.toBlob(copyToClipboard, "image/png", 1);
};
};
export const copyImg = async (image: string) => { export const copyImg = async (image: string) => {
const img = await fetch(image); const img = await fetch(image);
const imgBlob = await img.blob(); const imgBlob = await img.blob();
const extension = image.split(".").pop(); return copyToClipboard(imgBlob);
const supportedToBeConverted = ["jpeg", "jpg", "gif"];
if (extension && supportedToBeConverted.indexOf(extension.toLowerCase())) {
return convertToPng(imgBlob);
} else if (extension && extension.toLowerCase() === "png") {
return copyToClipboard(imgBlob);
}
return;
}; };

8
packages/react-chat/src/utils/createImg.ts
View File

@ -1,8 +0,0 @@
export const createImg = (options: any) => {
options = options || {};
const img = document.createElement("img");
if (options.src) {
img.src = options.src;
}
return img;
};

31
packages/react-chat/src/utils/downloadImg.ts
View File

@ -1,27 +1,10 @@
import { createImg } from "./createImg";
const createLink = (name: string, imgBlob: any) => {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const imageEl = createImg({ src: window.URL.createObjectURL(imgBlob) });
imageEl.onload = (e: any) => {
canvas.width = e.target.width;
canvas.height = e.target.height;
if (ctx) ctx.drawImage(e.target, 0, 0, e.target.width, e.target.height);
const a = document.createElement("a");
a.download = `${name}.png`;
a.href = canvas.toDataURL("image/png");
a.click();
};
};
export const downloadImg = async (image: string) => { export const downloadImg = async (image: string) => {
const img = await fetch(image); try {
console.log(img); const a = document.createElement("a");
const imgBlob = await img.blob(); a.download = `${image.split("/").pop()}.png`;
const name = image.split("/").pop(); a.href = image;
if (name) { a.click();
return createLink(name, imgBlob); } catch {
return;
} }
return;
}; };