mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-04-26 17:56:13 -04:00
feat: externalized tool configuration
This commit is contained in:
Corentin Thomasset
parent
c3adfe30ec
commit
690bd099ef
31 changed files with 387 additions and 300 deletions
103
tools/web/file-to-base64.vue
Normal file
103
tools/web/file-to-base64.vue
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
<template>
|
||||
<ToolWrapper :config="$toolConfig" no-card="true">
|
||||
<FileUploader v-model="file" />
|
||||
|
||||
<div v-if="base64 || loading" class="mt-10">
|
||||
<v-card>
|
||||
<v-card-title>Result</v-card-title>
|
||||
<v-card-text>
|
||||
<v-textarea
|
||||
v-model="base64"
|
||||
label="File in base 64"
|
||||
outlined
|
||||
readonly
|
||||
hide-details
|
||||
:loading="loading"
|
||||
/>
|
||||
<div class="text-center mt-4">
|
||||
<v-btn depressed @click="copy(base64)">
|
||||
Copy base64
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</div>
|
||||
</ToolWrapper>
|
||||
</template>
|
||||
|
||||
<tool>
|
||||
title: 'File to base64'
|
||||
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus distinctio dolor dolorum eaque eligendi, facilis impedit laboriosam odit placeat.'
|
||||
icon: 'mdi-file-link-outline'
|
||||
keywords: ['file', 'base64']
|
||||
path: '/file-to-base64'
|
||||
</tool>
|
||||
|
||||
<script lang="ts">
|
||||
import {Component, Watch} from 'nuxt-property-decorator'
|
||||
import {CopyableMixin} from '@/mixins/copyable.mixin'
|
||||
import Tool from '@/components/Tool.vue'
|
||||
import FileUploader from '~/components/FileUploader.vue'
|
||||
|
||||
@Component({
|
||||
mixins: [CopyableMixin],
|
||||
components: {FileUploader}
|
||||
})
|
||||
export default class FileToBase64 extends Tool {
|
||||
file: Blob | null = null
|
||||
loading = false
|
||||
base64 = ''
|
||||
|
||||
handleBase64(base64: string) {
|
||||
this.base64 = base64
|
||||
this.loading = false
|
||||
}
|
||||
|
||||
@Watch('file')
|
||||
onFile() {
|
||||
if (this.file) {
|
||||
this.loading = true
|
||||
this.base64 = ''
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => this.handleBase64(reader.result as string)
|
||||
reader.onerror = () => this.handleBase64('[An error as occurred]')
|
||||
reader.readAsDataURL(this.file)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// export default {
|
||||
// name: 'FileToBase64',
|
||||
// components: {FileUploader},
|
||||
// data() {
|
||||
// return {
|
||||
// file: undefined,
|
||||
// loading: false,
|
||||
// base64: '',
|
||||
// copyBase64() {
|
||||
// copyToClipboard(this.base64)
|
||||
// this.$toast.success('Copied to clipboard.')
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// watch: {
|
||||
// file() {
|
||||
// this.loading = true
|
||||
// this.base64 = ''
|
||||
// const reader = new FileReader()
|
||||
// reader.onload = () => this.handleBase64(reader.result)
|
||||
// reader.onerror = () => this.handleBase64('[An error as occurred]')
|
||||
// reader.readAsDataURL(this.file)
|
||||
// }
|
||||
// },
|
||||
// methods: {
|
||||
// handleBase64(base64) {
|
||||
// this.base64 = base64
|
||||
// this.loading = false
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
136
tools/web/qrcode-generator.vue
Normal file
136
tools/web/qrcode-generator.vue
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
<template>
|
||||
<ToolWrapper :config="$toolConfig">
|
||||
<v-row justify="center" align="center">
|
||||
<v-col cols="12" lg="6" sm="12">
|
||||
<v-text-field
|
||||
v-model="value"
|
||||
outlined
|
||||
label="Data"
|
||||
:rules="rules.value"
|
||||
/>
|
||||
<v-slider v-model="size" min="100" max="1920" label="Size (preview will not change): " thumb-label />
|
||||
<v-select
|
||||
v-model="level"
|
||||
outlined
|
||||
:items="levels"
|
||||
label="Error resistance"
|
||||
/>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6" sm="12">
|
||||
<ColorInput v-model="fgColor" label="Foreground color" />
|
||||
</v-col>
|
||||
<v-col cols="12" md="6" sm="12">
|
||||
<ColorInput v-model="bgColor" label="Background color" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" lg="6" sm="12" class="text-center mt-5 ">
|
||||
<qrcode-vue
|
||||
:value="value"
|
||||
:size="size"
|
||||
:level="level"
|
||||
:background="bgColor"
|
||||
:foreground="fgColor"
|
||||
render-as="svg"
|
||||
class-name="qrcode-wrapper"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<div class="text-center mb-sm-2 mt-4">
|
||||
<v-btn class="mr-1" color="primary" @click="download('png')">
|
||||
download as png
|
||||
</v-btn>
|
||||
<v-btn class="ml-1" color="primary" @click="download('svg')">
|
||||
download as svg
|
||||
</v-btn>
|
||||
</div>
|
||||
</ToolWrapper>
|
||||
</template>
|
||||
|
||||
<tool>
|
||||
title: 'QR-code generator'
|
||||
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus distinctio dolor dolorum eaque eligendi, facilis impedit laboriosam odit placeat.'
|
||||
icon: 'mdi-qrcode'
|
||||
keywords: ['editor']
|
||||
path: '/qrcode-generator'
|
||||
</tool>
|
||||
|
||||
<script lang="ts">
|
||||
import {Component} from 'nuxt-property-decorator'
|
||||
import QrcodeVue from 'qrcode.vue'
|
||||
import colors from 'color-name'
|
||||
import {CopyableMixin} from '~/mixins/copyable.mixin'
|
||||
import Tool from '~/components/Tool.vue'
|
||||
import {downloadBase64File} from '~/utils/file'
|
||||
import {stringToBase64} from '~/utils/convert'
|
||||
import ColorInput from '~/components/ColorInput.vue'
|
||||
|
||||
@Component({
|
||||
components: {QrcodeVue, ColorInput},
|
||||
mixins: [CopyableMixin]
|
||||
})
|
||||
export default class QrcodeGenerator extends Tool {
|
||||
value = 'https://it-tools.tech'
|
||||
size = 300
|
||||
level = 'M'
|
||||
bgColor = 'transparent'
|
||||
fgColor = '#ffffff'
|
||||
levels = [
|
||||
{text: 'Low', value: 'L'},
|
||||
{text: 'Medium', value: 'M'},
|
||||
{text: 'Quartile', value: 'Q'},
|
||||
{text: 'High', value: 'H'}
|
||||
]
|
||||
|
||||
rules = {
|
||||
value: [
|
||||
(v: string) => v.length > 0 || 'Value is needed'
|
||||
],
|
||||
color: [
|
||||
(v: string) => {
|
||||
v = v.trim()
|
||||
const isFFFFFF = /^#[0-9a-fA-F]{6}$/.test(v)
|
||||
const isFFF = /^#[0-9a-fA-F]{3}$/.test(v)
|
||||
const isRGB = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/.test(v)
|
||||
const isHSL = /^hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)$/.test(v)
|
||||
const isKeyword = v in colors
|
||||
const isTransparent = v === 'transparent'
|
||||
return isFFFFFF || isFFF || isKeyword || isTransparent || isRGB || isHSL || 'Incorrect color.'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
download(type: string) {
|
||||
const svgEl = this.$el.querySelector('.qrcode-wrapper svg')!
|
||||
const svgString = new XMLSerializer().serializeToString(svgEl)
|
||||
const svgUrl = `data:image/svg+xml;base64,${stringToBase64(svgString)}`
|
||||
if (type === 'png') {
|
||||
const canvas = document.createElement('canvas')
|
||||
canvas.width = this.size
|
||||
canvas.height = this.size
|
||||
const ctx = canvas.getContext('2d')!
|
||||
const image = new Image()
|
||||
image.onload = function () {
|
||||
ctx.drawImage(image, 0, 0)
|
||||
const result = canvas.toDataURL()
|
||||
downloadBase64File(result, 'qr-code')
|
||||
}
|
||||
image.src = svgUrl
|
||||
} else {
|
||||
downloadBase64File(svgUrl, 'qr-code')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
::v-deep .qrcode-wrapper {
|
||||
& > * {
|
||||
width: 300px !important;
|
||||
height: 300px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue