feat: svg download

Author: ssi02014

src/components/Layout/Header/index.tsx

@@ -9,24 +9,11 @@ interface HeaderProps {
 }
 
 const Header = ({ onToggle }: HeaderProps) => {
-  const LimitWidthSize = window.innerWidth;
-
   return (
     <S.HeaderWrapper>
-      <div>
-        <a
-          href="https://github.com/ssi02014/react-thumbnail-generator"
-          target="_blank"
-          rel="noreferrer">
-          Thumbnail Generator
-        </a>
-        <IconButton onClick={onToggle} isBorder={false}>
-          <Icon src={close} width={20} height={20} />
-        </IconButton>
-      </div>
-      <S.LimitSizeText>
-        Limit Width: <span>{`${LimitWidthSize}px`}</span>
-      </S.LimitSizeText>
+      <IconButton onClick={onToggle} isBorder={false}>
+        <Icon src={close} width={20} height={20} />
+      </IconButton>
     </S.HeaderWrapper>
   );
 };

src/components/Layout/styled.tsx

@@ -3,31 +3,12 @@ import styled from 'styled-components';
 
 export const HeaderWrapper = styled.div`
   display: flex;
+  justify-content: end;
+  width: 100%;
   position: sticky;
   top: 0;
-  flex-direction: column;
-  padding: 10px;
-  padding-bottom: 0;
-  background-color: #fff;
-
-  & > div:first-child {
-    justify-content: space-between;
-    align-items: center;
-    display: flex;
-  }
-
-  a {
-    color: #111111;
-    padding: 0;
-    margin: 0;
-    font-size: 0.875rem;
-    font-weight: bold;
-    text-decoration: none;
-
-    &:hover {
-      color: #3264b5;
-    }
-  }
+  padding: 8px;
+  border-bottom: 1px solid rgb(243, 243, 243);
 
   button {
     cursor: pointer;
@@ -38,16 +19,6 @@ export const HeaderWrapper = styled.div`
   }
 `;
 
-export const LimitSizeText = styled.div`
-  font-size: 0.85rem;
-  margin-top: 5px;
-  text-align: center;
-
-  span {
-    font-weight: bold;
-  }
-`;
-
 export const BodyWrapper = styled.section<{
   modalPosition: 'left' | 'right' | 'center';
   isFullWidth: boolean;
@@ -62,6 +33,7 @@ export const BodyWrapper = styled.section<{
   background-color: #ffffff;
   flex-direction: column;
   overflow: hidden;
+
   font-family: Arial;
 
   * {

src/components/TG.tsx

@@ -37,7 +37,6 @@ const TG = ({
   isFullWidth,
   onToggle,
 }: TGProps) => {
-  const LIMIT_WIDTH = window.innerWidth;
   const [canvasState, setCanvasState] = useState<CanvasState>({
     value: 'Simple Thumbnail\nGenerator 😁',
     fontSize: '30px',
@@ -98,13 +97,6 @@ const TG = ({
     const replacedCallback = getReplaceCallback(name);
     const replacedValue = value.replace(regex, replacedCallback);
 
-    const validMessage = getValidMessage(
-      name === 'canvasWidth' && +replacedValue > LIMIT_WIDTH,
-      'canvasSize'
-    );
-
-    if (validMessage) return alert(validMessage);
-
     setCanvasState({
       ...canvasState,
       [name]: replacedValue,
@@ -143,12 +135,6 @@ const TG = ({
 
       img.src = files[0] && URL.createObjectURL(files[0]);
       img.onload = async () => {
-        const validMessage = getValidMessage(
-          img.width > LIMIT_WIDTH,
-          'imageSize'
-        );
-        if (validMessage) return alert(validMessage);
-
         setCanvasState({
           ...canvasState,
           selectedImage: img,

src/constants/select.ts

@@ -8,7 +8,7 @@ export const fontFamilies = [
 ];
 export const strokeTypes = ['None', 'Thin', 'Normal', 'Thick'];
 
-export const imageTypes = ['png', 'jpg', 'webp'];
+export const imageTypes = ['png', 'jpg', 'svg', 'webp'];
 
 export const fontSizes = [
   '10px',

src/types/canvas.ts

@@ -2,7 +2,7 @@ import { Color } from 'react-color-palette';
 
 export type StrokeTypes = 'None' | 'Thin' | 'Normal' | 'Thick';
 
-export type ImageTypes = 'png' | 'jpg' | 'webp';
+export type ImageTypes = 'png' | 'jpg' | 'webp' | 'svg';
 
 export interface CanvasState {
   value: string;

src/utils/common.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { ImageTypes } from '../types/canvas';
 
 export type ValidType = 'imageSize' | 'canvasSize' | 'angle' | 'lineHeight';
+
 export const getValidMessage = (condition: boolean, type: ValidType) => {
   const message = {
     imageSize: `Please register a picture smaller than "Limit Width"`,
@@ -14,11 +15,7 @@ export const getValidMessage = (condition: boolean, type: ValidType) => {
   return '';
 };
 
-export const downloadCanvas = (
-  ref: React.RefObject<HTMLCanvasElement>,
-  imageType: ImageTypes
-) => {
-  const url = ref.current?.toDataURL(`image/${imageType}`);
+const download = (url: string, imageType: string) => {
   const link = document.createElement('a');
 
   link.href = url as string;
@@ -27,3 +24,30 @@ export const downloadCanvas = (
   link.click();
   document.body.removeChild(link);
 };
+
+export const downloadCanvas = (
+  ref: React.RefObject<HTMLCanvasElement>,
+  imageType: ImageTypes
+) => {
+  if (ref.current) {
+    if (imageType === 'svg') {
+      const imgWidth = ref.current.width;
+      const imgHeight = ref.current.height;
+      const base64 = ref.current.toDataURL('image/png');
+      const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="${imgWidth}" height="${imgHeight}">
+        <image xlink:href="${base64}" width="${imgWidth}" height="${imgHeight}" />
+      </svg>
+    `;
+
+      const svgUrl =
+        'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
+
+      download(svgUrl, 'svg');
+      return;
+    }
+
+    const url = ref.current.toDataURL(`image/${imageType}`);
+    download(url, imageType);
+  }
+};