Base64

Convert a value to a base64 string.

Usage

<script>
    import { base64 } from "@sveu/browser"

    const result = base64("text")
</script>
<script>
    import { base64 } from "@sveu/browser"

    const result = base64("text")
</script>
svelte

Example

Text Input
Base64
Buffer Input 
new ArrayBuffer(1024)
Base64
File Input
Base64
Image Input Mila Kunis
Base64 
<script lang="ts">
    import { base64 } from "@sveu/browser" 

    let text = ""

    let file: File, image: HTMLImageElement

    $: text_result = base64(text) 

    $: file_result = base64(file) 

    $: image_result = base64(image) 

    const buffer_result = base64(new ArrayBuffer(8)) 

    function on_file_input(e: Event) {
        file = (e.target as HTMLInputElement).files![0]
    }
</script>

<div class="space-y-4 my-20 mx-10">
    <div class="grid gap-2 md:grid-cols-2">
        <div>
            <span>Text Input</span>
            <textarea
                bind:value="{text}"
                class="h-40"
                placeholder="Type something..."></textarea>
        </div>
        <div>
            <span>Base64</span>
            <textarea class="h-40" value="{$text_result}" readonly></textarea>
        </div>
    </div>

    <div class="grid gap-2 md:grid-cols-2">
        <div>
            <span>Buffer Input</span>
            <pre class="mt-2">new ArrayBuffer(1024)</pre>
        </div>
        <div>
            <span>Base64</span>
            <textarea class="h-40" value="{$buffer_result}" readonly></textarea>
        </div>
    </div>

    <div class="grid gap-2 md:grid-cols-2">
        <div>
            <span>File Input</span>
            <div>
                <input class="mt-2" type="file" on:input="{on_file_input}" />
            </div>
        </div>
        <div>
            <span>Base64</span>
            <textarea class="h-40" value="{$file_result}" readonly></textarea>
        </div>
    </div>

    <div class="grid gap-2 md:grid-cols-2">
        <div>
            <span>Image Input</span>
            <img
                bind:this="{image}"
                class="rounded  object-fill h-150 mt-2 w-full"
                src="https://avatars.githubusercontent.com/u/120715197?s=400&u=550f53b3615712b450969ba6d61f82f384c926d2&v=4"
                alt="Mila Kunis" />
        </div>
        <div>
            <span>Base64</span>
            <textarea class="h-40" value="{$image_result}" readonly></textarea>
        </div>
    </div>
</div>

<style>
    textarea {
        min-width: 0 !important;
        width: 100%;
    }
</style>
<script lang="ts">
    import { base64 } from "@sveu/browser" 

    let text = ""

    let file: File, image: HTMLImageElement

    $: text_result = base64(text) 

    $: file_result = base64(file) 

    $: image_result = base64(image) 

    const buffer_result = base64(new ArrayBuffer(8)) 

    function on_file_input(e: Event) {
        file = (e.target as HTMLInputElement).files![0]
    }
</script>

<div class="space-y-4 my-20 mx-10">
    <div class="grid gap-2 md:grid-cols-2">
        <div>
            <span>Text Input</span>
            <textarea
                bind:value="{text}"
                class="h-40"
                placeholder="Type something..."></textarea>
        </div>
        <div>
            <span>Base64</span>
            <textarea class="h-40" value="{$text_result}" readonly></textarea>
        </div>
    </div>

    <div class="grid gap-2 md:grid-cols-2">
        <div>
            <span>Buffer Input</span>
            <pre class="mt-2">new ArrayBuffer(1024)</pre>
        </div>
        <div>
            <span>Base64</span>
            <textarea class="h-40" value="{$buffer_result}" readonly></textarea>
        </div>
    </div>

    <div class="grid gap-2 md:grid-cols-2">
        <div>
            <span>File Input</span>
            <div>
                <input class="mt-2" type="file" on:input="{on_file_input}" />
            </div>
        </div>
        <div>
            <span>Base64</span>
            <textarea class="h-40" value="{$file_result}" readonly></textarea>
        </div>
    </div>

    <div class="grid gap-2 md:grid-cols-2">
        <div>
            <span>Image Input</span>
            <img
                bind:this="{image}"
                class="rounded  object-fill h-150 mt-2 w-full"
                src="https://avatars.githubusercontent.com/u/120715197?s=400&u=550f53b3615712b450969ba6d61f82f384c926d2&v=4"
                alt="Mila Kunis" />
        </div>
        <div>
            <span>Base64</span>
            <textarea class="h-40" value="{$image_result}" readonly></textarea>
        </div>
    </div>
</div>

<style>
    textarea {
        min-width: 0 !important;
        width: 100%;
    }
</style>
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
Click fold/expand code

API

Arguments

Name Description Type Required
target The value to convert. any Yes


Options

Nam Description Type
serializer The serializer to use. Only used if the target is an object. (v: T) => string
type The MIME type to use. Only used if the target is a canvas or image. string
quality The image quality to use. Only used if the target is a canvas or image. number
Last update at: Invalid Date