add grey filter for source images

ita-social-projects · Sep 13, 2023 · 1cac384 · 1cac384
1 parent 2534dd2
commit 1cac384
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 6 deletions.
diff --git a/src/app/common/components/FileUploader/FileUploader.component.tsx b/src/app/common/components/FileUploader/FileUploader.component.tsx
@@ -5,27 +5,65 @@ import Upload, { RcFile, UploadChangeParam, UploadFile, UploadProps } from 'antd
 import AudiosApi from '@/app/api/media/audios.api';
 import ImagesApi from '@/app/api/media/images.api';
 import Audio, { AudioCreate } from '@/models/media/audio.model';
-import Image, { ImageCreate } from '@/models/media/image.model';
+import ImageCustom, { ImageCreate } from '@/models/media/image.model';
 
 type UploaderWithoutChildren = Omit<UploadProps, 'children'>;
 
 interface Props extends UploaderWithoutChildren {
     children: JSX.Element[] | JSX.Element;
     edgeSwipe?: boolean;
     uploadTo:'image' | 'audio';
-    onSuccessUpload?:(value:Image | Audio)=>void;
+    greyFilterForImage: boolean;
+    onSuccessUpload?:(value:ImageCustom | Audio)=>void;
 }
-const FileUploader:React.FC<Props> = ({ onSuccessUpload, uploadTo, children, ...uploadProps }) => {
+const FileUploader:React.FC<Props> = ({
+    onSuccessUpload, uploadTo, greyFilterForImage = false, children, ...uploadProps
+}) => {
     const imageDataAsURL = useRef<any | null>(null);
     const onUploadChange = (uploadParams: UploadChangeParam<UploadFile<any>>) => {
         const reader = new FileReader();
         reader.onloadend = (obj) => {
             imageDataAsURL.current = obj.target?.result;
+
+            if (greyFilterForImage) {
+                const img = new Image();
+                img.src = imageDataAsURL.current;
+                if (img.height > 0 && img.width > 0) {
+                    const canvas = document.createElement('canvas');
+                    const ctx = canvas.getContext('2d');
+                    if (ctx !== null) {
+                        canvas.width = img.width;
+                        canvas.height = img.height;
+
+                        ctx.drawImage(img, 0, 0);
+
+                        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+                        const { data } = imageData;
+
+                        for (let i = 0; i < data.length; i += 4) {
+                            const red = data[i];
+                            const green = data[i + 1];
+                            const blue = data[i + 2];
+
+                            const grayscale = (red + green + blue) / 3;
+
+                            data[i] = grayscale;
+                            data[i + 1] = grayscale;
+                            data[i + 2] = grayscale;
+                        }
+
+                        ctx.putImageData(imageData, 0, 0);
+
+                        imageDataAsURL.current = canvas.toDataURL('image/png');
+                    }
+                }
+            }
         };
         if (uploadParams.fileList.length === 0) {
             imageDataAsURL.current = undefined;
         } else {
             const file = uploadParams.file.originFileObj as RcFile;
+
             if (file) {
                 reader.readAsDataURL(file);
             }
@@ -35,7 +73,7 @@ const FileUploader:React.FC<Props> = ({ onSuccessUpload, uploadTo, children, ...
         }
     };
     const onFileUpload = (uploadType:'image' | 'audio', uplFile:UploadFile)
-    :Promise< Image | Audio> => {
+    :Promise< ImageCustom | Audio> => {
         if (uploadType === 'audio') {
             const audio :AudioCreate = {
                 baseFormat: imageDataAsURL.current
@@ -53,6 +91,7 @@ const FileUploader:React.FC<Props> = ({ onSuccessUpload, uploadTo, children, ...
                                          .lastIndexOf('.') + 1, uplFile.name.length),
                                      mimeType: uplFile.type!,
                                      title: uplFile.name };
+
         return ImagesApi.create(image);
     };
     const customRequest = async (options:any) => {

diff --git a/src/features/AdminPage/ForFansPage/ForFansMainPage.component.tsx b/src/features/AdminPage/ForFansPage/ForFansMainPage.component.tsx
@@ -66,6 +66,7 @@ const ForFansMainPage: React.FC = observer(() => {
                     key={`${record.id}${record.image?.id}}`}
                     className="partners-table-logo"
                     src={base64ToUrl(image?.base64, image?.mimeType ?? '')}
+                    style={{ filter: 'grayscale(100%)' }}
                 />
             ),
         },

diff --git a/src/features/AdminPage/ForFansPage/ForFansPage/CategoryAdminModal.component.tsx b/src/features/AdminPage/ForFansPage/ForFansPage/CategoryAdminModal.component.tsx
@@ -160,8 +160,10 @@ const SourceModal: React.FC<SourceModalProps> = ({
                         label="Картинка: "
                         rules={[{ required: true, message: 'Додайте зображення' }]}
                         getValueFromEvent={getValueFromEvent}
+                        style={{ filter: 'grayscale(100%)' }}
                     >
                         <FileUploader
+                            greyFilterForImage
                             onChange={(param) => {
                                 setFileList(param.fileList);
                             }}

diff --git a/...eatures/AdminPage/NewStreetcode/MainBlock/PreviewFileModal/PreviewFileModal.component.tsx b/...eatures/AdminPage/NewStreetcode/MainBlock/PreviewFileModal/PreviewFileModal.component.tsx
@@ -57,7 +57,7 @@ const PreviewFileModal = ({ opened, setOpened, file }: Props) => {
     return (
         <Modal open={opened} footer={null} onCancel={handleCancel}>
             <div className="modal-item-image">
-                {previewImage && <img alt="uploaded" src={previewImage} />}
+                {previewImage && <img style={{ filter: 'grayscale(100%)' }} alt="uploaded" src={previewImage} />}
             </div>
         </Modal>
     );

diff --git a/src/features/StreetcodePage/SourcesBlock/SourceItem/SourceItem.component.tsx b/src/features/StreetcodePage/SourcesBlock/SourceItem/SourceItem.component.tsx
@@ -17,7 +17,8 @@ const SourceItem = ({ srcCategory }: Props) => {
         <div
             className="sourcesSliderItem"
             onClick={() => setModal('sources', srcCategory.id, true)}
-            style={{ backgroundImage: `url(${base64ToUrl(srcCategory.image?.base64, srcCategory.image?.mimeType)})` }}
+            style={{ backgroundImage: `url(${base64ToUrl(srcCategory.image?.base64, srcCategory.image?.mimeType)})`,
+                     filter: 'grayscale(100%)' }}
         >
             <h1>{srcCategory.title}</h1>
         </div>