PixelSVG
{fileName ? `File: ${fileName}` : 'Upload a File'}
{ const imgEl = e.currentTarget as HTMLImageElement; const rect = { width: imgEl.naturalWidth, height: imgEl.naturalHeight, }; if ( rect.width * rect.height > 65536 && !(await confirm( `This image isn't small; it's made up of ${rect.width * rect.height} pixels. The outputted file could be up to ${((`
`.length + `
`.length * rect.width * rect.height) / 1024 / 1024).toFixed(1)} MB large. It may crash your browser. Are you sure you wish to continue?`, { title: 'Confirmation', } )) ) return (imgUrl = ''), (fileName = ''); canvas.width = rect.width; canvas.height = rect.height; const ctx = canvas.getContext('2d', { alpha: true, colorSpace: 'display-p3', }); if (!ctx) throw new Error('no 2d context obtainable'); try { ctx.drawImage(e.currentTarget as HTMLImageElement, 0, 0); } catch (error) { await alert( "Failed to draw image to canvas. The image's data may be invalid or the image may be too big. Check the Console.", { title: 'Failed to draw image', } ); throw error; } const data = ctx.getImageData(0, 0, rect.width, rect.height, { colorSpace: 'display-p3', }); let out = [] as [r: number, g: number, b: number, a: number][]; for (let i = 0; i < data.data.length; i += 4) { const r = data.data[i + 0]; const g = data.data[i + 1]; const b = data.data[i + 2]; const a = data.data[i + 3]; out.push([r, g, b, a]); } save(out, rect.width, rect.height); }} onerror={(e) => { if (imgUrl !== '') alert( 'Failed to load the image into an HTML Image Element. Please make sure the image you provided is valid and in a format your browser understands.', { title: 'Failed to load image', } ); }} />
{ if (fileInput?.files?.length) { const file = fileInput.files![0]; fileName = file.name; fileRaw = file ?? null; } }} style="opacity:0;position:fixed;top:0;left:0;width:0;height:0;pointer-events:none;" />
{#if output}
Output:
(open)
{/if}
{imgUrl ? 'Canvas:' : ''}
(open)