thorvg.web/examples/picture-example.html at main · thorvg/thorvg.web · GitHub

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ThorVG WebCanvas - Picture API Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background: #f0f0f0;
        }
        #canvas {
            border: 1px solid #333;
            background: white;
            margin: 20px 0;
        }
        .controls {
            margin: 10px 0;
        }
        button {
            padding: 10px 20px;
            margin: 5px;
            cursor: pointer;
        }
        .info {
            background: #fff;
            padding: 15px;
            border-radius: 5px;
            margin: 10px 0;
        }
        input[type="file"] {
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <h1>ThorVG WebCanvas - Picture API Example</h1>

    <div class="info">
        <h3>Picture API Features:</h3>
        <ul>
            <li>Load SVG, PNG, JPG, WebP, and Lottie files</li>
            <li>Resize and scale pictures with <code>.size(width, height)</code></li>
            <li>Transform pictures with <code>.translate()</code>, <code>.rotate()</code>, <code>.scale()</code></li>
            <li>Picture opacity with <code>.opacity()</code></li>
            <li>Load from file or raw data</li>
            <li>Async methods: <code>.loadFile()</code>, <code>.loadUrl()</code></li>
        </ul>
    </div>

    <div class="controls">
        <label>Backend:
            <select id="backend">
                <option value="sw">Software</option>
                <option value="gl">WebGL</option>
                <option value="wg">WebGPU</option>
            </select>
        </label>
        <button onclick="init()">Initialize</button>
        <button onclick="drawPictures()">Draw SVG Examples</button>
        <button onclick="clearCanvas()">Clear</button>
        <br>
        <label>Load Image File:
            <input type="file" id="fileInput" accept="image/*,.svg" onchange="loadImageFile(event)">
        </label>
    </div>

    <canvas id="canvas" width="800" height="600"></canvas>

    <div class="info">
        <h3>Status:</h3>
        <pre id="log"></pre>
    </div>

    <script type="module">
        import ThorVG from '../packages/webcanvas/dist/webcanvas.esm.js';

        let TVG;
        let canvas;

        function log(msg) {
            const logEl = document.getElementById('log');
            logEl.textContent += msg + '\n';
            console.log(msg);
        }

        window.init = async function() {
            const renderer = document.getElementById('backend').value;
            log(`Initializing ThorVG with ${renderer} backend...`);

            try {
                // Initialize ThorVG with backend
                TVG = await ThorVG.init({
                    renderer: renderer,
                    locateFile: (path) => '../packages/webcanvas/dist/' + path.split('/').pop()
                });

                // Create canvas
                canvas = new TVG.Canvas('#canvas', {
                    renderer: renderer,
                    width: 800,
                    height: 600
                });

                log('✓ ThorVG initialized successfully!');
                log('Ready to draw!');
            } catch (error) {
                log('ERROR: ' + error.message);
            }
        };

        window.drawPictures = function() {
            if (!canvas) {
                log('ERROR: Canvas not initialized. Click Initialize first!');
                return;
            }

            log('Drawing SVG pictures...');

            // Create a simple SVG
            const svgData = `
                <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="100" cy="100" r="80" fill="none" stroke="#4CAF50" stroke-width="8"/>
                    <path d="M 60 100 L 90 130 L 140 70" fill="none" stroke="#4CAF50" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            `;

            // Picture 1: Original size
            const picture1 = new TVG.Picture();
            picture1.load(svgData, { type: 'svg' })
                .translate(50, 50);
            canvas.add(picture1);
            log('1. SVG check mark (original size) at (50, 50)');

            // Picture 2: Scaled version
            const picture2 = new TVG.Picture();
            picture2.load(svgData, { type: 'svg' })
                .size(100, 100)
                .translate(300, 50);
            canvas.add(picture2);
            log('2. SVG check mark (scaled 100x100) at (300, 50)');

            // Picture 3: Rotated and scaled
            const picture3 = new TVG.Picture();
            picture3.load(svgData, { type: 'svg' })
                .size(150, 150)
                .translate(550, 50)
                .rotate(45);
            canvas.add(picture3);
            log('3. SVG check mark (scaled 150x150, rotated 45°) at (550, 50)');

            // Picture 4: Semi-transparent
            const picture4 = new TVG.Picture();
            picture4.load(svgData, { type: 'svg' })
                .size(120, 120)
                .translate(50, 300)
                .opacity(0.5);
            canvas.add(picture4);
            log('4. SVG check mark (120x120, 50% opacity) at (50, 300)');

            // Complex SVG with gradient
            const complexSvg = `
                <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
                            <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
                        </linearGradient>
                    </defs>
                    <rect x="20" y="20" width="160" height="160" rx="20" fill="url(#grad1)"/>
                    <text x="100" y="110" font-size="40" text-anchor="middle" fill="white">SVG</text>
                </svg>
            `;

            // Picture 5: Complex SVG
            const picture5 = new TVG.Picture();
            picture5.load(complexSvg, { type: 'svg' })
                .size(180, 180)
                .translate(300, 280);
            canvas.add(picture5);
            log('5. Complex SVG with gradient (180x180) at (300, 280)');

            // Render all
            canvas.render();
            log('✓ Picture rendering complete!');
        };

        window.loadImageFile = async function(event) {
            if (!canvas) {
                log('ERROR: Canvas not initialized. Click Initialize first!');
                return;
            }

            const file = event.target.files[0];
            if (!file) return;

            log(`Loading file: ${file.name} (${file.type})...`);

            try {
                // Clear canvas first
                canvas.clear();

                // User handles file reading
                const arrayBuffer = await file.arrayBuffer();
                const uint8Array = new Uint8Array(arrayBuffer);

                // Determine format from file extension
                let format = 'svg';
                const ext = file.name.split('.').pop()?.toLowerCase();
                if (ext === 'jpg' || ext === 'jpeg') {
                    format = 'jpg';
                } else if (ext === 'png') {
                    format = 'png';
                } else if (ext === 'webp') {
                    format = 'webp';
                } else if (ext === 'svg') {
                    format = 'svg';
                }

                // Create picture and load data
                const picture = new TVG.Picture();
                picture.load(uint8Array, { type: format });

                // Get original size
                const originalSize = picture.size();
                log(`Original size: ${originalSize.width}x${originalSize.height}`);

                // Fit the picture to canvas (max 600x500)
                const maxWidth = 600;
                const maxHeight = 500;
                const scale = Math.min(
                    maxWidth / originalSize.width,
                    maxHeight / originalSize.height
                );
                const newWidth = originalSize.width * scale;
                const newHeight = originalSize.height * scale;

                picture.size(newWidth, newHeight)
                    .translate(100, 50);

                canvas.add(picture);
                canvas.render();

                log(`✓ Loaded ${file.name}: ${originalSize.width}x${originalSize.height} → ${newWidth.toFixed(0)}x${newHeight.toFixed(0)}`);
            } catch (error) {
                log(`ERROR: Failed to load ${file.name}: ${error.message}`);
            }
        };

        window.clearCanvas = function() {
            if (!canvas) {
                log('ERROR: Canvas not initialized!');
                return;
            }

            canvas.clear();
            canvas.render();
            log('✓ Canvas cleared!');
        };

        // Auto-initialize on load
        log('Ready! Click "Initialize" to start.');
    </script>
</body>
</html>