mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-05-04 13:29:13 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(new tool): ICO <> PNG Converter

Browse source 
Fix #1271
This commit is contained in:
sharevb 2024-09-01 18:43:56 +02:00 • committed by ShareVB
parent 80e46c9292
commit 4bf7470e27
8 changed files with 279 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

35
components.d.ts vendored
View file

@ -87,30 +87,19 @@ declare module '@vue/runtime-core' {
HtmlWysiwygEditor: typeof import('./src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue')['default']
HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']
IbanValidatorAndParser: typeof import('./src/tools/iban-validator-and-parser/iban-validator-and-parser.vue')['default']
IcoConverter: typeof import('./src/tools/ico-converter/ico-converter.vue')['default']
'IconMdi:brushVariant': typeof import('~icons/mdi/brush-variant')['default']
'IconMdi:contentCopy': typeof import('~icons/mdi/content-copy')['default']
'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
IconMdiArrowDown: typeof import('~icons/mdi/arrow-down')['default']
IconMdiArrowRight: typeof import('~icons/mdi/arrow-right')['default']
IconMdiArrowRightBottom: typeof import('~icons/mdi/arrow-right-bottom')['default']
IconMdiCamera: typeof import('~icons/mdi/camera')['default']
IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
IconMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
IconMdiClose: typeof import('~icons/mdi/close')['default']
IconMdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
IconMdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
IconMdiDownload: typeof import('~icons/mdi/download')['default']
IconMdiEye: typeof import('~icons/mdi/eye')['default']
IconMdiEyeOff: typeof import('~icons/mdi/eye-off')['default']
IconMdiHeart: typeof import('~icons/mdi/heart')['default']
IconMdiPause: typeof import('~icons/mdi/pause')['default']
IconMdiPlay: typeof import('~icons/mdi/play')['default']
IconMdiRecord: typeof import('~icons/mdi/record')['default']
IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
IconMdiSearch: typeof import('~icons/mdi/search')['default']
IconMdiTranslate: typeof import('~icons/mdi/translate')['default']
IconMdiTriangleDown: typeof import('~icons/mdi/triangle-down')['default']
IconMdiVideo: typeof import('~icons/mdi/video')['default']
InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']
Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default']
@ -137,42 +126,22 @@ declare module '@vue/runtime-core' {
MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
NAlert: typeof import('naive-ui')['NAlert']
NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
NCheckbox: typeof import('naive-ui')['NCheckbox']
NCode: typeof import('naive-ui')['NCode']
NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
NColorPicker: typeof import('naive-ui')['NColorPicker']
NConfigProvider: typeof import('naive-ui')['NConfigProvider']
NDatePicker: typeof import('naive-ui')['NDatePicker']
NDivider: typeof import('naive-ui')['NDivider']
NDynamicInput: typeof import('naive-ui')['NDynamicInput']
NEllipsis: typeof import('naive-ui')['NEllipsis']
NForm: typeof import('naive-ui')['NForm']
NFormItem: typeof import('naive-ui')['NFormItem']
NGi: typeof import('naive-ui')['NGi']
NGrid: typeof import('naive-ui')['NGrid']
NH1: typeof import('naive-ui')['NH1']
NH2: typeof import('naive-ui')['NH2']
NH3: typeof import('naive-ui')['NH3']
NIcon: typeof import('naive-ui')['NIcon']
NImage: typeof import('naive-ui')['NImage']
NInputGroup: typeof import('naive-ui')['NInputGroup']
NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
NInputNumber: typeof import('naive-ui')['NInputNumber']
NLayout: typeof import('naive-ui')['NLayout']
NLayoutSider: typeof import('naive-ui')['NLayoutSider']
NMenu: typeof import('naive-ui')['NMenu']
NProgress: typeof import('naive-ui')['NProgress']
NScrollbar: typeof import('naive-ui')['NScrollbar']
NSlider: typeof import('naive-ui')['NSlider']
NStatistic: typeof import('naive-ui')['NStatistic']
NSwitch: typeof import('naive-ui')['NSwitch']
NTable: typeof import('naive-ui')['NTable']
NSpin: typeof import('naive-ui')['NSpin']
NTag: typeof import('naive-ui')['NTag']
NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
NUpload: typeof import('naive-ui')['NUpload']
NUploadDragger: typeof import('naive-ui')['NUploadDragger']
OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']
PdfSignatureChecker: typeof import('./src/tools/pdf-signature-checker/pdf-signature-checker.vue')['default']

2
package.json
View file

@ -62,6 +62,8 @@
"highlight.js": "^11.7.0",
"iarna-toml-esm": "^3.0.5",
"ibantools": "^4.3.3",
"image-in-browser": "^3.1.0",
"js-base64": "^3.7.7",
"json5": "^2.2.3",
"jwt-decode": "^3.1.2",
"libphonenumber-js": "^1.10.28",

31
pnpm-lock.yaml generated
View file

@ -86,6 +86,12 @@ dependencies:
ibantools:
specifier: ^4.3.3
version: 4.3.3
image-in-browser:
specifier: ^3.1.0
version: 3.1.0
js-base64:
specifier: ^3.7.7
version: 3.7.7
json5:
specifier: ^2.2.3
version: 2.2.3
@ -3374,7 +3380,7 @@ packages:
dependencies:
'@unhead/dom': 0.5.1
'@unhead/schema': 0.5.1
'@vueuse/shared': 10.6.1(vue@3.3.4)
'@vueuse/shared': 11.0.3(vue@3.3.4)
unhead: 0.5.1
vue: 3.3.4
transitivePeerDependencies:
@ -4016,10 +4022,10 @@ packages:
- vue
dev: false
/@vueuse/shared@10.6.1(vue@3.3.4):
resolution: {integrity: sha512-TECVDTIedFlL0NUfHWncf3zF9Gc4VfdxfQc8JFwoVZQmxpONhLxFrlm0eHQeidHj4rdTPL3KXJa0TZCk1wnc5Q==}
/@vueuse/shared@11.0.3(vue@3.3.4):
resolution: {integrity: sha512-0rY2m6HS5t27n/Vp5cTDsKTlNnimCqsbh/fmT2LgE+aaU42EMfXo8+bNX91W9I7DDmxfuACXMmrd7d79JxkqWA==}
dependencies:
vue-demi: 0.14.6(vue@3.3.4)
vue-demi: 0.14.10(vue@3.3.4)
transitivePeerDependencies:
- '@vue/composition-api'
- vue
@ -6135,6 +6141,10 @@ packages:
engines: {node: '>= 4'}
dev: true
/image-in-browser@3.1.0:
resolution: {integrity: sha512-8VYDQU/AzN6cLrPEjF1W3QFLZS9clmEbztXE6WMBoxBJxOzjzSvC1kIusEQEc+IBFxsCbMKREFw/Cn3xVE8VMA==}
dev: false
/image-size@0.5.5:
resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==}
engines: {node: '>=0.10.0'}
@ -6490,6 +6500,10 @@ packages:
hasBin: true
dev: true
/js-base64@3.7.7:
resolution: {integrity: sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw==}
dev: false
/js-beautify@1.14.6:
resolution: {integrity: sha512-GfofQY5zDp+cuHc+gsEXKPpNw2KbPddreEo35O6jT6i0RVK6LhsoYBhq5TvK4/n74wnA0QbK8gGd+jUZwTMKJw==}
engines: {node: '>=10'}
@ -9185,8 +9199,8 @@ packages:
vue: 3.3.4
dev: false
/vue-demi@0.14.5(vue@3.3.4):
resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
/vue-demi@0.14.10(vue@3.3.4):
resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
engines: {node: '>=12'}
hasBin: true
requiresBuild: true
@ -9200,8 +9214,8 @@ packages:
vue: 3.3.4
dev: false
/vue-demi@0.14.6(vue@3.3.4):
resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
/vue-demi@0.14.5(vue@3.3.4):
resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
engines: {node: '>=12'}
hasBin: true
requiresBuild: true
@ -9497,6 +9511,7 @@ packages:
/workbox-google-analytics@7.0.0:
resolution: {integrity: sha512-MEYM1JTn/qiC3DbpvP2BVhyIH+dV/5BjHk756u9VbwuAhu0QHyKscTnisQuz21lfRpOwiS9z4XdqeVAKol0bzg==}
deprecated: It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained
dependencies:
workbox-background-sync: 7.0.0
workbox-core: 7.0.0

80
src/composable/downloadBase64.ts
View file

@ -1,8 +1,14 @@
import { extension as getExtensionFromMime } from 'mime-types';
import type { Ref } from 'vue';
import { extension as getExtensionFromMimeType, extension as getMimeTypeFromExtension } from 'mime-types';
import type { MaybeRef, Ref } from 'vue';
import _ from 'lodash';
import { get } from '@vueuse/core';
export { getMimeTypeFromBase64, useDownloadFileFromBase64 };
export {
getMimeTypeFromBase64,
getMimeTypeFromExtension, getExtensionFromMimeType,
useDownloadFileFromBase64, useDownloadFileFromBase64Refs,
previewImageFromBase64,
};
const commonMimeTypesSignatures = {
'JVBERi0': 'application/pdf',
@ -36,30 +42,78 @@ function getFileExtensionFromMimeType({
defaultExtension?: string
}) {
if (mimeType) {
return getExtensionFromMime(mimeType) ?? defaultExtension;
return getExtensionFromMimeType(mimeType) ?? defaultExtension;
}
return defaultExtension;
}
function useDownloadFileFromBase64({ source, filename }: { source: Ref<string>; filename?: string }) {
return {
download() {
if (source.value === '') {
function downloadFromBase64({ sourceValue, filename, extension, fileMimeType }:
{ sourceValue: string; filename?: string; extension?: string; fileMimeType?: string }) {
if (sourceValue === '') {
throw new Error('Base64 string is empty');
}
const { mimeType } = getMimeTypeFromBase64({ base64String: source.value });
const base64String = mimeType
? source.value
: `data:text/plain;base64,${source.value}`;
const defaultExtension = extension ?? 'txt';
const { mimeType } = getMimeTypeFromBase64({ base64String: sourceValue });
let base64String = sourceValue;
if (!mimeType) {
const targetMimeType = fileMimeType ?? getMimeTypeFromExtension(defaultExtension);
base64String = `data:${targetMimeType};base64,${sourceValue}`;
}
const cleanFileName = filename ?? `file.${getFileExtensionFromMimeType({ mimeType })}`;
const cleanExtension = extension ?? getFileExtensionFromMimeType(
{ mimeType, defaultExtension });
let cleanFileName = filename ?? `file.${cleanExtension}`;
if (extension && !cleanFileName.endsWith(`.${extension}`)) {
cleanFileName = `${cleanFileName}.${cleanExtension}`;
}
const a = document.createElement('a');
a.href = base64String;
a.download = cleanFileName;
a.click();
}
function useDownloadFileFromBase64(
{ source, filename, extension }:
{ source: MaybeRef<string>; filename?: MaybeRef<string>; extension?: MaybeRef<string> }) {
return {
download() {
downloadFromBase64({ sourceValue: get(source), filename: get(filename), extension: get(extension) });
},
};
}
function previewImageFromBase64(base64String: string): HTMLImageElement {
if (base64String === '') {
throw new Error('Base64 string is empty');
}
const img = document.createElement('img');
img.src = base64String;
const container = document.createElement('div');
container.appendChild(img);
const previewContainer = document.getElementById('previewContainer');
if (previewContainer) {
previewContainer.innerHTML = '';
previewContainer.appendChild(container);
}
else {
throw new Error('Preview container element not found');
}
return img;
}
function useDownloadFileFromBase64Refs(
{ source, filename, extension }:
{ source: Ref<string>; filename?: Ref<string>; extension?: Ref<string> }) {
return {
download() {
downloadFromBase64({ sourceValue: source.value, filename: filename?.value, extension: extension?.value });
},
};
}

92
src/tools/ico-converter/ico-converter.vue Normal file
View file

@ -0,0 +1,92 @@
<script setup lang="ts">
import { Base64 } from 'js-base64';
import { Transform, decodeIco, decodeImage, encodeIcoImages, encodePng } from 'image-in-browser';
import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
const status = ref<'idle' | 'done' | 'error' | 'processing'>('idle');
const file = ref<File | null>(null);
const base64OutputFile = ref('');
const fileName = ref('');
const fileExtension = ref('');
const { download } = useDownloadFileFromBase64(
{
source: base64OutputFile,
filename: fileName,
extension: fileExtension,
});
async function onFileUploaded(uploadedFile: File) {
file.value = uploadedFile;
const fileBuffer = new Uint8Array(await uploadedFile.arrayBuffer());
fileName.value = `${uploadedFile.name}`;
status.value = 'processing';
try {
if (uploadedFile.type.includes('icon')) {
const decodedIco = decodeIco({
data: fileBuffer,
largest: true,
});
if (decodedIco == null) {
throw new Error('Invalid ICO file!');
}
const encodedPng = encodePng({
image: decodedIco,
});
fileExtension.value = 'png';
base64OutputFile.value = `data:image/png;base64,${Base64.fromUint8Array(encodedPng)}`;
}
else {
const decodedImage = decodeImage({
data: fileBuffer,
});
if (decodedImage == null) {
throw new Error('Invalid PNG file!');
};
const encodedICO = encodeIcoImages({
images: [16, 32, 64, 128, 256].map(size => Transform.copyResize({
image: decodedImage,
width: size,
maintainAspect: true,
})),
});
fileExtension.value = 'ico';
base64OutputFile.value = `data:image/x-icon;base64,${Base64.fromUint8Array(encodedICO)}`;
}
status.value = 'done';
download();
}
catch (e) {
status.value = 'error';
}
}
</script>
<template>
<div>
<div style="flex: 0 0 100%">
<div mx-auto max-w-600px>
<c-file-upload
title="Drag and drop an ICO or PNG/JPEG file here, or click to select a file"
accept=".ico,.png,.jpg"
paste-image
@file-upload="onFileUploaded"
/>
</div>
</div>
<div mt-3 flex justify-center>
<c-alert v-if="status === 'error'" type="error">
An error occured processing {{ fileName }}
</c-alert>
<n-spin
v-if="status === 'processing'"
size="small"
/>
</div>
</div>
</template>

12
src/tools/ico-converter/index.ts Normal file
View file

@ -0,0 +1,12 @@
import { PictureInPicture } from '@vicons/tabler';
import { defineTool } from '../tool';
export const tool = defineTool({
name: 'ICO/PNG converter',
path: '/ico-converter',
description: 'Convert from PNG/JPEG to/from ICO',
keywords: ['ico', 'png', 'jpeg', 'icon', 'converter'],
component: () => import('./ico-converter.vue'),
icon: PictureInPicture,
createdAt: new Date('2024-08-15'),
});

9
src/tools/index.ts
View file

@ -1,6 +1,7 @@
import { tool as base64FileConverter } from './base64-file-converter';
import { tool as base64StringConverter } from './base64-string-converter';
import { tool as basicAuthGenerator } from './basic-auth-generator';
import { tool as icoConverter } from './ico-converter';
import { tool as pdfSignatureChecker } from './pdf-signature-checker';
import { tool as numeronymGenerator } from './numeronym-generator';
import { tool as macAddressGenerator } from './mac-address-generator';
@ -124,7 +125,13 @@ export const toolsByCategory: ToolCategory[] = [
},
{
name: 'Images and videos',
components: [qrCodeGenerator, wifiQrCodeGenerator, svgPlaceholderGenerator, cameraRecorder],
components: [
qrCodeGenerator,
wifiQrCodeGenerator,
svgPlaceholderGenerator,
cameraRecorder,
icoConverter,
],
},
{
name: 'Development',

68
src/ui/c-file-upload/c-file-upload.vue
View file

@ -5,10 +5,12 @@ const props = withDefaults(defineProps<{
multiple?: boolean
accept?: string
title?: string
pasteImage?: boolean
}>(), {
multiple: false,
accept: undefined,
title: 'Drag and drop files here, or click to select files',
pasteImage: false,
});
const emit = defineEmits<{
@ -16,11 +18,31 @@ const emit = defineEmits<{
(event: 'fileUpload', file: File): void
}>();
const { multiple } = toRefs(props);
const { multiple, pasteImage } = toRefs(props);
const isOverDropZone = ref(false);
function toBase64(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);
});
}
const fileInput = ref<HTMLInputElement | null>(null);
const imgPreview = ref<HTMLImageElement | null>(null);
async function handlePreview(image: File) {
if (imgPreview.value) {
imgPreview.value.src = await toBase64(image);
}
}
function clearPreview() {
if (imgPreview.value) {
imgPreview.value.src = '';
}
}
function triggerFileInput() {
fileInput.value?.click();
@ -39,7 +61,30 @@ function handleDrop(event: DragEvent) {
handleUpload(files);
}
function handleUpload(files: FileList | null | undefined) {
async function onPasteImage(evt: ClipboardEvent) {
if (!pasteImage.value) {
return false;
}
const items = evt.clipboardData?.items;
if (!items) {
return false;
}
for (let i = 0; i < items.length; i++) {
if (items[i].type.includes('image')) {
const imageFile = items[i].getAsFile();
if (imageFile) {
await handlePreview(imageFile);
emit('fileUpload', imageFile);
}
}
}
return true;
}
async function handleUpload(files: FileList | null | undefined) {
clearPreview();
if (_.isNil(files) || _.isEmpty(files)) {
return;
}
@ -49,6 +94,7 @@ function handleUpload(files: FileList | null | undefined) {
return;
}
await handlePreview(files[0]);
emit('fileUpload', files[0]);
}
</script>
@ -60,6 +106,7 @@ function handleUpload(files: FileList | null | undefined) {
'border-primary border-opacity-100': isOverDropZone,
}"
@click="triggerFileInput"
@paste.prevent="onPasteImage"
@drop.prevent="handleDrop"
@dragover.prevent
@dragenter="isOverDropZone = true"
@ -73,6 +120,7 @@ function handleUpload(files: FileList | null | undefined) {
:accept="accept"
@change="handleFileInput"
>
<slot>
<span op-70>
{{ title }}
@ -90,6 +138,22 @@ function handleUpload(files: FileList | null | undefined) {
<c-button>
Browse files
</c-button>
<div v-if="pasteImage">
<!-- separator -->
<div my-4 w-full flex items-center justify-center op-70>
<div class="h-1px max-w-100px flex-1 bg-gray-300 op-50" />
<div class="mx-2 text-gray-400">
or
</div>
<div class="h-1px max-w-100px flex-1 bg-gray-300 op-50" />
</div>
<p>Paste an image from clipboard</p>
</div>
</slot>
<div mt-2>
<img ref="imgPreview" width="150">
</div>
</div>
</template>