diff --git a/packages/react-chat/src/components/Form/ImageMenu.tsx b/packages/react-chat/src/components/Form/ImageMenu.tsx index 38028766..7b2400c1 100644 --- a/packages/react-chat/src/components/Form/ImageMenu.tsx +++ b/packages/react-chat/src/components/Form/ImageMenu.tsx @@ -19,11 +19,11 @@ export const ImageMenu = ({ imageId }: ImageMenuProps) => { copyImg(imageId)}> - Copy imageId + Copy image downloadImg(imageId)}> - Download imageId + Download image diff --git a/packages/react-chat/src/utils/copyImg.ts b/packages/react-chat/src/utils/copyImg.ts index c8827cd3..89d66009 100644 --- a/packages/react-chat/src/utils/copyImg.ts +++ b/packages/react-chat/src/utils/copyImg.ts @@ -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; + return copyToClipboard(imgBlob); }; diff --git a/packages/react-chat/src/utils/createImg.ts b/packages/react-chat/src/utils/createImg.ts deleted file mode 100644 index 893be2ff..00000000 --- a/packages/react-chat/src/utils/createImg.ts +++ /dev/null @@ -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; -}; diff --git a/packages/react-chat/src/utils/downloadImg.ts b/packages/react-chat/src/utils/downloadImg.ts index 34691958..9b23f9f7 100644 --- a/packages/react-chat/src/utils/downloadImg.ts +++ b/packages/react-chat/src/utils/downloadImg.ts @@ -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; } - return; };