Module Achievements:
Laravel
Certified in Laravel, I've mastered a powerhouse for web development. Laravel's elegance and efficiency have transformed my coding journey, ensuring top-tier solutions and fueling my passion for creating exceptional web applications.
PHP
Successfully completed PHP module, mastering web development with PHP. Proficient in Laravel, SQL, and PHPMyAdmin, delivering robust and dynamic solutions for modern web applications.
JQuery & Ajax
Developed proficiency in jQuery and Ajax, elevating web experiences through dynamic and responsive interactions. Acquired skills in asynchronous requests, DOM manipulation, and seamless data integration. Accomplished in crafting interactive and modern web applications
JavaScript
Excelled in the JavaScript module, demonstrating adeptness in building dynamic and interactive web applications. Mastered key concepts, including DOM manipulation, event handling, and asynchronous programming, to create engaging user experiences.
Databases
Excelled in the Databases module, gaining expertise in data modeling, SQL queries, and database management. Developed a deep understanding of relational databases, ensuring efficient data storage and retrieval. Ready to design robust and scalable database solutions.
Bootstrap
Compleated the Bootstrap module, showcasing proficiency in front-end development. Acquired skills in responsive design, UI components, and dynamic web interfaces. Adept at creating visually stunning and user-friendly websites.
Zlatko
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image to SVG Outline with Line Control</title> <style> body { font-family: Arial, sans-serif; margin: 20px; } .container { display: flex; flex-direction: column; align-items: center; } img, svg { max-width: 100%; margin-top: 20px; } .buttons, .controls { margin-top: 20px; } </style> </head> <body> <div class="container"> <h1>Upload an Image to Convert to SVG Outline</h1> <input type="file" id="upload" accept="image/*"> <!-- Controls for line thickness, sensitivity, and tracing direction --> <div class="controls"> <label for="lineThickness">Line Thickness: </label> <input type="range" id="lineThickness" min="1" max="10" value="1"> <span id="lineThicknessValue">1</span> px <br><br> <label for="sensitivity">Sensitivity (Brightness Threshold): </label> <input type="range" id="sensitivity" min="0" max="255" value="128"> <span id="sensitivityValue">128</span> <br><br> <label for="traceMode">Trace Mode: </label> <select id="traceMode"> <option value="inside">Inside</option> <option value="outside">Outside</option> </select> </div> <canvas id="canvas" style="display:none;"></canvas> <div id="output"></div> <div class="buttons"> <button id="downloadSvg" style="display:none;">Download SVG</button> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.1/svg.min.js"></script> <script> let lineThickness = 1; let sensitivity = 128; let traceMode = 'inside'; // Default mode // Update line thickness document.getElementById('lineThickness').addEventListener('input', function() { lineThickness = this.value; document.getElementById('lineThicknessValue').textContent = lineThickness; }); // Update sensitivity document.getElementById('sensitivity').addEventListener('input', function() { sensitivity = this.value; document.getElementById('sensitivityValue').textContent = sensitivity; }); // Update trace mode (inside or outside) document.getElementById('traceMode').addEventListener('change', function() { traceMode = this.value; }); // Handle file upload and image processing document.getElementById('upload').addEventListener('change', function(event) { const file = event.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = function(e) { const img = new Image(); img.src = e.target.result; img.onload = function() { processImage(img); }; }; reader.readAsDataURL(file); }); // Process image and generate SVG function processImage(image) { const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // Set canvas size to match image canvas.width = image.width; canvas.height = image.height; // Draw the image on canvas ctx.drawImage(image, 0, 0); // Get image data const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imageData.data; // Convert image to grayscale for edge detection for (let i = 0; i < data.length; i += 4) { const grayscale = data[i] * 0.3 + data[i + 1] * 0.59 + data[i + 2] * 0.11; data[i] = grayscale; // Red data[i + 1] = grayscale; // Green data[i + 2] = grayscale; // Blue } ctx.putImageData(imageData, 0, 0); // Apply edge detection const edges = sobelEdgeDetection(imageData, canvas.width, canvas.height); ctx.putImageData(edges, 0, 0); // Create SVG based on edge lines generateSVGFromEdges(edges, canvas.width, canvas.height); } // Sobel edge detection algorithm function sobelEdgeDetection(imageData, width, height) { const grayscale = imageData.data; const sobelData = []; const kernelX = [ [-1, 0, 1], [-2, 0, 2], [-1, 0, 1] ]; const kernelY = [ [-1, -2, -1], [0, 0, 0], [1, 2, 1] ]; for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { const pixelX = ( (kernelX[0][0] * getPixel(grayscale, x - 1, y - 1, width)) + (kernelX[0][1] * getPixel(grayscale, x, y - 1, width)) + (kernelX[0][2] * getPixel(grayscale, x + 1, y - 1, width)) + (kernelX[1][0] * getPixel(grayscale, x - 1, y, width)) + (kernelX[1][2] * getPixel(grayscale, x + 1, y, width)) + (kernelX[2][0] * getPixel(grayscale, x - 1, y + 1, width)) + (kernelX[2][1] * getPixel(grayscale, x, y + 1, width)) + (kernelX[2][2] * getPixel(grayscale, x + 1, y + 1, width)) ); const pixelY = ( (kernelY[0][0] * getPixel(grayscale, x - 1, y - 1, width)) + (kernelY[0][1] * getPixel(grayscale, x, y - 1, width)) + (kernelY[0][2] * getPixel(grayscale, x + 1, y - 1, width)) + (kernelY[1][0] * getPixel(grayscale, x - 1, y, width)) + (kernelY[1][2] * getPixel(grayscale, x + 1, y, width)) + (kernelY[2][0] * getPixel(grayscale, x - 1, y + 1, width)) + (kernelY[2][1] * getPixel(grayscale, x, y + 1, width)) + (kernelY[2][2] * getPixel(grayscale, x + 1, y + 1, width)) ); const magnitude = Math.sqrt((pixelX * pixelX) + (pixelY * pixelY)) >>> 0; const index = (y * width + x) * 4; sobelData[index] = magnitude; sobelData[index + 1] = magnitude; sobelData[index + 2] = magnitude; sobelData[index + 3] = 255; // Alpha } } const newImageData = new ImageData(new Uint8ClampedArray(sobelData), width, height); return newImageData; } // Get pixel data at a specific location function getPixel(data, x, y, width) { if (x < 0 || x >= width || y < 0 || y >= width) { return 0; } const index = (y * width + x) * 4; return data[index]; } // Generate SVG from the edges detected function generateSVGFromEdges(edgeData, width, height) { const svg = SVG().size(width, height); for (let y = 0; y < height; y += 2) { for (let x = 0; x < width; x += 2) { const index = (y * width + x) * 4; const color = edgeData.data[index]; if (traceMode === 'inside' && color > sensitivity) { svg.circle(lineThickness).move(x, y).fill('#000'); // Trace inside the object } else if (traceMode === 'outside' && color < sensitivity) { svg.circle(lineThickness).move(x, y).fill('#000'); // Trace outside the object } } } // Output SVG document.getElementById('output').innerHTML = ''; document.getElementById('output').appendChild(svg.node); // Enable download button const svgData = svg.svg(); const blob = new Blob([svgData], { type: 'image/svg+xml' }); const url = URL.createObjectURL(blob); const downloadButton = document.getElementById('downloadSvg'); downloadButton.href = url; downloadButton.download = 'vectorized_image.svg'; downloadButton.style.display = 'inline-block'; } </script> </body> </html>
View
