|
| 1 | +<script setup lang="ts"> |
| 2 | +import { Base64 } from 'js-base64'; |
| 3 | +import type { MemoryImage } from 'image-in-browser'; |
| 4 | +import { decodeImage, encodeBmp, encodeGif, encodeIco, encodeJpg, encodePng, encodePvr, encodeTga, encodeTiff } from 'image-in-browser'; |
| 5 | +import { arrayBufferToWebP } from 'webp-converter-browser'; |
| 6 | +import { createSvg2png, initialize } from 'svg2png-wasm'; |
| 7 | +import { normal as robotoBase64 } from 'roboto-base64'; |
| 8 | +import { useDownloadFileFromBase64 } from '@/composable/downloadBase64'; |
| 9 | +import { useQueryParamOrStorage } from '@/composable/queryParams'; |
| 10 | +
|
| 11 | +function readAsText(file: File) { |
| 12 | + return new Promise<string>((resolve, reject) => { |
| 13 | + const reader = new FileReader(); |
| 14 | + reader.readAsText(file); |
| 15 | + reader.onload = () => resolve(reader.result?.toString() ?? ''); |
| 16 | + reader.onerror = error => reject(error); |
| 17 | + }); |
| 18 | +} |
| 19 | +
|
| 20 | +const status = ref<'idle' | 'done' | 'error' | 'processing'>('idle'); |
| 21 | +const file = ref<File | null>(null); |
| 22 | +
|
| 23 | +const svgScale = ref(2); |
| 24 | +const base64OutputFile = ref(''); |
| 25 | +const fileName = ref(''); |
| 26 | +const fileExtension = ref(''); |
| 27 | +const { download } = useDownloadFileFromBase64( |
| 28 | + { |
| 29 | + source: base64OutputFile, |
| 30 | + filename: fileName, |
| 31 | + extension: fileExtension, |
| 32 | + }); |
| 33 | +
|
| 34 | +const outputQuality = useQueryParamOrStorage({ name: 'qual', storageName: 'imgconv:q', defaultValue: 0.95 }); |
| 35 | +const outputFormats = { |
| 36 | + png: { |
| 37 | + mime: 'image/png', |
| 38 | + save: (image: MemoryImage) => encodePng({ image }), |
| 39 | + }, |
| 40 | + jpg: { |
| 41 | + mime: 'image/jpeg', |
| 42 | + save: (image: MemoryImage) => encodeJpg({ image, quality: outputQuality.value }), |
| 43 | + }, |
| 44 | + bmp: { |
| 45 | + mime: 'image/bmp', |
| 46 | + save: (image: MemoryImage) => encodeBmp({ image }), |
| 47 | + }, |
| 48 | + gif: { |
| 49 | + mime: 'image/gif', |
| 50 | + save: (image: MemoryImage) => encodeGif({ image }), |
| 51 | + }, |
| 52 | + ico: { |
| 53 | + mime: 'image/x-icon', |
| 54 | + save: (image: MemoryImage) => encodeIco({ image }), |
| 55 | + }, |
| 56 | + tga: { |
| 57 | + mime: 'image/tga', |
| 58 | + save: (image: MemoryImage) => encodeTga({ image }), |
| 59 | + }, |
| 60 | + pvr: { |
| 61 | + mime: 'image/pvr', |
| 62 | + save: (image: MemoryImage) => encodePvr({ image }), |
| 63 | + }, |
| 64 | + tif: { |
| 65 | + mime: 'image/tif', |
| 66 | + save: (image: MemoryImage) => encodeTiff({ image }), |
| 67 | + }, |
| 68 | + webp: { |
| 69 | + mime: 'image/webp', |
| 70 | + save: () => null, |
| 71 | + }, |
| 72 | +}; |
| 73 | +
|
| 74 | +const outputFormat = useQueryParamOrStorage({ name: 'fmt', storageName: 'imgconv:fmt', defaultValue: 'png' }); |
| 75 | +const outputFormatHasQuality = computed(() => { |
| 76 | + return outputFormat.value === 'jpg'; |
| 77 | +}); |
| 78 | +
|
| 79 | +const svgWasmLoaded = ref(false); |
| 80 | +
|
| 81 | +async function onFileUploaded(uploadedFile: File) { |
| 82 | + const outputFormatValue = outputFormat.value; |
| 83 | + file.value = uploadedFile; |
| 84 | + let fileBuffer = new Uint8Array(await uploadedFile.arrayBuffer()); |
| 85 | +
|
| 86 | + fileName.value = `${uploadedFile.name}`; |
| 87 | + status.value = 'processing'; |
| 88 | + try { |
| 89 | + if (outputFormatValue === 'webp') { |
| 90 | + const encodedImage = await arrayBufferToWebP(fileBuffer); |
| 91 | + fileExtension.value = 'webp'; |
| 92 | + base64OutputFile.value = `data:image/webp;base64,${Base64.fromUint8Array(new Uint8Array(await encodedImage.arrayBuffer()))}`; |
| 93 | + } |
| 94 | + else { |
| 95 | + if (uploadedFile.type === 'image/svg+xml') { |
| 96 | + if (!svgWasmLoaded.value) { |
| 97 | + await initialize(fetch('/svg2png_wasm_bg.wasm')); |
| 98 | + svgWasmLoaded.value = true; |
| 99 | + } |
| 100 | + const svg2png = createSvg2png({ |
| 101 | + fonts: [Base64.toUint8Array(robotoBase64)], |
| 102 | + }); |
| 103 | + fileBuffer = await svg2png(await readAsText(uploadedFile), { scale: svgScale.value }); |
| 104 | + svg2png.dispose(); |
| 105 | + } |
| 106 | + const decodedImage = decodeImage({ |
| 107 | + data: fileBuffer, |
| 108 | + }); |
| 109 | +
|
| 110 | + if (decodedImage == null) { |
| 111 | + throw new Error('Invalid Image file!'); |
| 112 | + }; |
| 113 | +
|
| 114 | + const outConfig = outputFormats[outputFormatValue as (keyof typeof outputFormats)]; |
| 115 | + const encodedImage = outConfig.save(decodedImage); |
| 116 | + fileExtension.value = outputFormatValue; |
| 117 | + base64OutputFile.value = `data:${outConfig.mime};base64,${Base64.fromUint8Array(encodedImage!)}`; |
| 118 | + } |
| 119 | + status.value = 'done'; |
| 120 | +
|
| 121 | + download(); |
| 122 | + } |
| 123 | + catch (e) { |
| 124 | + status.value = 'error'; |
| 125 | + } |
| 126 | +} |
| 127 | +</script> |
| 128 | + |
| 129 | +<template> |
| 130 | + <div> |
| 131 | + <div style="flex: 0 0 100%" mb-2> |
| 132 | + <div mx-auto max-w-600px> |
| 133 | + <c-file-upload |
| 134 | + title="Drag and drop an image file here, or click to select a file" |
| 135 | + accept="image/*" |
| 136 | + paste-image |
| 137 | + @file-upload="onFileUploaded" |
| 138 | + /> |
| 139 | + </div> |
| 140 | + </div> |
| 141 | + |
| 142 | + <c-select |
| 143 | + v-model:value="outputFormat" |
| 144 | + label="Output format:" |
| 145 | + label-position="left" |
| 146 | + :options="Object.keys(outputFormats)" |
| 147 | + placeholder="Select output format" |
| 148 | + mb-2 |
| 149 | + /> |
| 150 | + |
| 151 | + <div mb-2 flex justify-center> |
| 152 | + <n-form-item v-if="outputFormatHasQuality" label="Output quality:" label-placement="left"> |
| 153 | + <n-input-number v-model:value="outputQuality" :max="100" :min="0" w-full /> |
| 154 | + </n-form-item> |
| 155 | + <n-form-item label="SVG scaling:" label-placement="left"> |
| 156 | + <n-input-number v-model:value="svgScale" :min="0" /> |
| 157 | + </n-form-item> |
| 158 | + </div> |
| 159 | + |
| 160 | + <div mt-3 flex justify-center> |
| 161 | + <c-alert v-if="status === 'error'" type="error"> |
| 162 | + An error occured processing {{ fileName }} |
| 163 | + </c-alert> |
| 164 | + <n-spin |
| 165 | + v-if="status === 'processing'" |
| 166 | + size="small" |
| 167 | + /> |
| 168 | + </div> |
| 169 | + </div> |
| 170 | +</template> |
0 commit comments