blob: 04127c14fc8abc8743410b4435abebb371c4dfa1 (
plain) (
blame)
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
|
<script>
import CanvasCopy from '$/lib/test/canvas/CanvasCopy.svelte';
import CanvasImg from '$/lib/test/canvas/CanvasImg.svelte';
import { resolve } from '$app/paths';
let fixPaddingArtifacts = $state(false);
let useBg = $state(true);
let src = $state(resolve('/') + 'estrogen-half.png');
let alt = $state('Favicon');
</script>
<h1 class="text-3xl">Canvas Playground</h1>
<p>
Here's some fucking around with the HTML canvas element, initially mostly to
do a funny bit of obscuring images as found in the DOM.
</p>
<h2 class="text-xl">Plain Img</h2>
<p>Normal image tag.</p>
<div class="rounded-2xl"><img {src} {alt} /></div>
<h2 class="text-xl">CanvasImg</h2>
<p>
Simple <code>canvas</code>-based copying of the contents and converting to
blob. Falls back to source image.
</p>
<div class="rounded-2xl"><CanvasImg {src} {alt} /></div>
<h2 class="text-xl">CanvasCopy</h2>
<p>
A more involved technique, copying sections of the canvas source and rendering
them in separate image elements, still falling back to source image.
</p>
<p>
Single-pixel artifacts on high-dpi and non-1:1 scaled images can be solved by
creating an overlapping pixel on each edge. This, however, messes up partial
transparency.<br />
<label
><input type="checkbox" bind:checked={fixPaddingArtifacts} /> Fix Artifacts</label
>
<label
><input type="checkbox" bind:checked={useBg} /> Use background-image to reduce
element count</label
>
</p>
<div class="rounded-2xl">
<CanvasCopy
{src}
{alt}
artifacts={fixPaddingArtifacts ? 'fix' : 'keep'}
{useBg}
/>
</div>
|
