feat(New tool): Image to CSS

FIx #530

src/tools/image-to-css/image-to-css.service.ts

@@ -0,0 +1,34 @@
+import { stringToUrl } from 'svg-to-url';
+
+export type CSSType = 'Background' | 'Border' | 'ListItemBullet' | 'Url';
+
+function fileToDataUrl(file: File) {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result?.toString() ?? '');
+    reader.onerror = error => reject(error);
+  });
+}
+
+function svgToDataUrl(image: string) {
+  const getUrlFromSvgString = stringToUrl({});
+  return getUrlFromSvgString(image);
+}
+
+export async function imageToCSS(
+  image: File | string,
+  type: CSSType,
+) {
+  const dataURI = image instanceof File ? await fileToDataUrl(image) : svgToDataUrl(image);
+  switch (type) {
+    case 'Background':
+      return `background-image: url(${dataURI});`;
+    case 'Border':
+      return `border-image-source: url(${dataURI});`;
+    case 'ListItemBullet':
+      return `li{\n  list-style-image: ${dataURI};\n}\nli::marker{\n  font-size: 1.5em;\n}'}`;
+    default:
+      return `url(${dataURI})`;
+  }
+}

src/tools/image-to-css/image-to-css.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { Ref } from 'vue';
+import { type CSSType, imageToCSS } from './image-to-css.service';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+
+const typeOptions = [
+  { label: 'Background', value: 'Background' },
+  { label: 'Border', value: 'Border' },
+  { label: 'ListItem Bullet', value: 'ListItemBullet' },
+  { label: 'CSS Data Url', value: 'Url' },
+];
+
+const type = ref('Background');
+const svgContent = ref('');
+const fileInput = ref() as Ref<File | null>;
+const cssCode = computedAsync(async () => {
+  try {
+    return (await imageToCSS(fileInput.value || svgContent.value, type.value as CSSType));
+  }
+  catch (e: any) {
+    return e.toString();
+  }
+});
+
+async function onUpload(file: File) {
+  if (file) {
+    fileInput.value = file;
+  }
+}
+
+watch(svgContent, (_, newValue) => {
+  if (newValue !== '') {
+    fileInput.value = null;
+  }
+});
+</script>
+
+<template>
+  <div>
+    <c-file-upload
+      title="Drag and drop an image here, or click to select a file"
+      paste-image
+      @file-upload="onUpload"
+    />
+    <n-p>OR</n-p>
+
+    <c-input-text
+      v-model:value="svgContent"
+      label="SVG Content"
+      placeholder="Paste your SVG content here"
+      mb-2
+    />
+
+    <n-divider />
+
+    <c-select
+      v-model:value="type"
+      label-position="top"
+      label="CSS Type:"
+      :options="typeOptions"
+      placeholder="Select CSS Type"
+    />
+
+    <n-divider />
+
+    <div>
+      <h3>CSS Code</h3>
+      <TextareaCopyable
+        :value="cssCode"
+        :word-wrap="true"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+::v-deep(.n-upload-trigger) {
+  width: 100%;
+}
+</style>

src/tools/image-to-css/index.ts

@@ -0,0 +1,12 @@
+import { BrandCss3 } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Image to CSS',
+  path: '/image-to-css',
+  description: 'Convert image to CSS (url, background, ...)',
+  keywords: ['image', 'css'],
+  component: () => import('./image-to-css.vue'),
+  icon: BrandCss3,
+  createdAt: new Date('2024-05-11'),
+});

src/tools/index.ts

@@ -6,6 +6,7 @@ import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
 import { tool as textToUnicode } from './text-to-unicode';
 import { tool as safelinkDecoder } from './safelink-decoder';
+import { tool as imageToCss } from './image-to-css';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -128,6 +129,7 @@ export const toolsByCategory: ToolCategory[] = [
       httpStatusCodes,
       jsonDiff,
       safelinkDecoder,
+      imageToCss,
     ],
   },
   {