incubated-geek-cc · January 28, 2025 21:12
diff --git a/imagedataToSVGDemo.html b/imagedataToSVGDemo.html
 <!DOCTYPE html>
 <html lang='en'>
  <head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1.0'>
    <title>Demo PNG to SVG</title>
    <style>
      html,body {
        padding:0;
        margin:0;
      }
      body {
        font-family:Segoe UI Symbol;
        height:100vh;
        width:100vw;
        padding: 2.5em 1.5em;
        overflow:hidden;
      }
      .btn {
        cursor: pointer;
        background: #dddddd;
        padding: .25rem .75rem;
        border-radius: 25px;
        margin: 10px;
        display: inline-block;
      }
      #svgPreview, #imageDisplay {
        border: 1px dashed #6c757d;
        margin: 0 auto;
        display: inline-flex;
        overflow:auto;
        height:250px;
        width:250px;
      }
    </style>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <header>
      <label class='btn'>
        📤 𝗨𝗽𝗹𝗼𝗮𝗱 𝗙𝗶𝗹𝗲
        <input type='file' hidden id='uploadPNG' />
      </label>
    </header>
    <main>
      <h2>𝖨𝗆𝖺𝗀𝖾 𝖣𝗂𝗌𝗉𝗅𝖺𝗒</h2>
      <div id='imageDisplay'></div>
      <h2>𝖲𝖵𝖦 𝖯𝗋𝖾𝗏𝗂𝖾𝗐</h2>
      <div id='svgPreview'></div>
    </main>
    <script src="imagetracer_v1.2.6.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', async()=> {
        // upload file interface
        const uploadPNG=document.querySelector('#uploadPNG');
        // Displays uploaded raster image
        const imageDisplay=document.querySelector('#imageDisplay');
        // Renders output SVG
        const svgPreview=document.querySelector('#svgPreview');
        
        // Helper functions
        function readFileAsDataURL(file) {
          return new Promise((resolve,reject) => {
            let fileredr = new FileReader();
            fileredr.onload = () => resolve(fileredr.result);
            fileredr.onerror = () => reject(fileredr);
            fileredr.readAsDataURL(file);
          });
        }
        const loadImage = (url) => new Promise((resolve, reject) => {
          const img = new Image();
          img.addEventListener('load', () => resolve(img));
          img.addEventListener('error', (err) => reject(err));
          img.src = url;
        });
        uploadPNG.addEventListener('click', (evt)=> {
          evt.target.value='';
        });
        uploadPNG.addEventListener('change', async(evt) => {
          if (!window.FileReader) { 
              alert('Browser does not support HTML5 "FileReader".'); 
              return; 
          } 
          let file = evt.target.files[0];
          if(!file) return;

          let b64Str = await readFileAsDataURL(file);
          // Preview image
          let _img=await loadImage(b64Str);
          imageDisplay.appendChild(_img);
          
          // 2) Using function imagedataToSVG (sync)
          const scale = window.devicePixelRatio*2; // adjust resolution accordingly
          
          let imgWidth=_img.naturalWidth;
          let imgHeight=_img.naturalHeight;
          _img['style']['height']=`${imgHeight}px`;
          _img['style']['width']=`${imgWidth}px`;

          let _canvas = document.createElement('canvas');
          _canvas['style']['width'] = `${imgWidth}px`;
          _canvas['style']['height'] = `${imgHeight}px`;

          let cWidth=imgWidth*scale;
          let cHeight=imgHeight*scale;

          _canvas.width=cWidth;
          _canvas.height=cHeight;
          
          _canvas.getContext('2d').scale(scale, scale);
          _canvas.getContext('2d').drawImage(_img, 0, 0, imgWidth, imgHeight);
          
          let imgData = _canvas.getContext('2d').getImageData(0, 0, cWidth, cHeight);
          let svgStr = ImageTracer.imagedataToSVG(imgData, 'detailed'); // (KIV)
          svgPreview.innerHTML=svgStr;
          
          // Generate download link
          let dwnlnk=document.createElement('a');
          dwnlnk.innerHTML='📥 Download File';
          let textblob = new Blob([svgStr], {
              type: 'image/svg+xml'
          });
          dwnlnk.download = `${ (file.name).substr(0,(file.name).length-4) }.svg`;
          dwnlnk.className='btn';
          if (window.webkitURL != null) {
              dwnlnk.href = window.webkitURL.createObjectURL(textblob);
          }
          svgPreview.parentNode.appendChild(dwnlnk);
        });
      });
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang='en'>
	<head>
	<meta charset='UTF-8'>
	<meta name='viewport' content='width=device-width,initial-scale=1.0'>
	<title>Demo PNG to SVG</title>
	<style>
	html,body {
	padding:0;
	margin:0;
	}
	body {
	font-family:Segoe UI Symbol;
	height:100vh;
	width:100vw;
	padding: 2.5em 1.5em;
	overflow:hidden;
	}
	.btn {
	cursor: pointer;
	background: #dddddd;
	padding: .25rem .75rem;
	border-radius: 25px;
	margin: 10px;
	display: inline-block;
	}
	#svgPreview, #imageDisplay {
	border: 1px dashed #6c757d;
	margin: 0 auto;
	display: inline-flex;
	overflow:auto;
	height:250px;
	width:250px;
	}
	</style>
	</head>
	<body>
	<noscript>You need to enable JavaScript to run this app.</noscript>
	<header>
	<label class='btn'>
	📤 𝗨𝗽𝗹𝗼𝗮𝗱 𝗙𝗶𝗹𝗲
	<input type='file' hidden id='uploadPNG' />
	</label>
	</header>
	<main>
	<h2>𝖨𝗆𝖺𝗀𝖾 𝖣𝗂𝗌𝗉𝗅𝖺𝗒</h2>
	<div id='imageDisplay'></div>
	<h2>𝖲𝖵𝖦 𝖯𝗋𝖾𝗏𝗂𝖾𝗐</h2>
	<div id='svgPreview'></div>
	</main>
	<script src="imagetracer_v1.2.6.js"></script>
	<script>
	document.addEventListener('DOMContentLoaded', async()=> {
	// upload file interface
	const uploadPNG=document.querySelector('#uploadPNG');
	// Displays uploaded raster image
	const imageDisplay=document.querySelector('#imageDisplay');
	// Renders output SVG
	const svgPreview=document.querySelector('#svgPreview');

	// Helper functions
	function readFileAsDataURL(file) {
	return new Promise((resolve,reject) => {
	let fileredr = new FileReader();
	fileredr.onload = () => resolve(fileredr.result);
	fileredr.onerror = () => reject(fileredr);
	fileredr.readAsDataURL(file);
	});
	}
	const loadImage = (url) => new Promise((resolve, reject) => {
	const img = new Image();
	img.addEventListener('load', () => resolve(img));
	img.addEventListener('error', (err) => reject(err));
	img.src = url;
	});
	uploadPNG.addEventListener('click', (evt)=> {
	evt.target.value='';
	});
	uploadPNG.addEventListener('change', async(evt) => {
	if (!window.FileReader) {
	alert('Browser does not support HTML5 "FileReader".');
	return;
	}
	let file = evt.target.files[0];
	if(!file) return;

	let b64Str = await readFileAsDataURL(file);
	// Preview image
	let _img=await loadImage(b64Str);
	imageDisplay.appendChild(_img);

	// 2) Using function imagedataToSVG (sync)
	const scale = window.devicePixelRatio*2; // adjust resolution accordingly

	let imgWidth=_img.naturalWidth;
	let imgHeight=_img.naturalHeight;
	_img['style']['height']=`${imgHeight}px`;
	_img['style']['width']=`${imgWidth}px`;

	let _canvas = document.createElement('canvas');
	_canvas['style']['width'] = `${imgWidth}px`;
	_canvas['style']['height'] = `${imgHeight}px`;

	let cWidth=imgWidth*scale;
	let cHeight=imgHeight*scale;

	_canvas.width=cWidth;
	_canvas.height=cHeight;

	_canvas.getContext('2d').scale(scale, scale);
	_canvas.getContext('2d').drawImage(_img, 0, 0, imgWidth, imgHeight);

	let imgData = _canvas.getContext('2d').getImageData(0, 0, cWidth, cHeight);
	let svgStr = ImageTracer.imagedataToSVG(imgData, 'detailed'); // (KIV)
	svgPreview.innerHTML=svgStr;

	// Generate download link
	let dwnlnk=document.createElement('a');
	dwnlnk.innerHTML='📥 Download File';
	let textblob = new Blob([svgStr], {
	type: 'image/svg+xml'
	});
	dwnlnk.download = `${ (file.name).substr(0,(file.name).length-4) }.svg`;
	dwnlnk.className='btn';
	if (window.webkitURL != null) {
	dwnlnk.href = window.webkitURL.createObjectURL(textblob);
	}
	svgPreview.parentNode.appendChild(dwnlnk);
	});
	});
	</script>
	</body>
	</html>