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>
<MenuList>
<MenuItem onClick={() => copyImg(imageId)}>
<CopyIcon /> <MenuText>Copy imageId</MenuText>
<CopyIcon /> <MenuText>Copy image</MenuText>
</MenuItem>
<MenuItem onClick={() => downloadImg(imageId)}>
<DownloadIcon />
<MenuText> Download imageId</MenuText>
<MenuText> Download image</MenuText>
</MenuItem>
</MenuList>
</MenuBlock>

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

@ -1,5 +1,3 @@
import { createImg } from "./createImg";
const copyToClipboard = async (pngBlob: any) => {
try {
await navigator.clipboard.write([
@ -12,27 +10,9 @@ const copyToClipboard = async (pngBlob: any) => {
}
};
const convertToPng = (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);
canvas.toBlob(copyToClipboard, "image/png", 1);
};
};
//Images are already converted to png by useMessenger when received
export const copyImg = async (image: string) => {
const img = await fetch(image);
const imgBlob = await img.blob();
const extension = image.split(".").pop();
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) => {
const img = await fetch(image);
console.log(img);
const imgBlob = await img.blob();
const name = image.split("/").pop();
if (name) {
return createLink(name, imgBlob);
}
try {
const a = document.createElement("a");
a.download = `${image.split("/").pop()}.png`;
a.href = image;
a.click();
} catch {
return;
}
};