Javascript, HTML, CSS Code
<html> <head> <script type="text/javascript"> window.addEventListener('error', function(event) { var message = JSON.parse(JSON.stringify(event.message)); var source = event.filename; var lineno = event.lineno; var colno = event.colno; var error = event.error; window.parent.postMessage({ type: 'iframeError', details: { message: message, source: source, lineno: lineno, colno: colno, error: error ? error.stack : '' } }, '*'); }); window.addEventListener('unhandledrejection', function(event) { window.parent.postMessage({ type: 'iframePromiseRejection', details: { reason: event.reason } }, '*'); }); </script> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Kilroy Image Editor</title> <meta name="description" content="A fun image editor that allows users to upload an image, draw on it, add a Kilroy, and download the result as a PNG."> <meta name="keywords" content="image editor, kilroy, draw on image, canvas, download image"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet"> <style> body { font-family: 'Pacifico', cursive; background-color: #f3f3f3; } #main-container { margin-top: 20px; } #canvas-container { position: relative; display: inline-block; } canvas { border: 1px solid #000; } #kilroy { display: none; position: absolute; top: 0; left: 0; pointer-events: none; } .instruction { font-size: 16px; margin-top: 10px; } </style> <script type="text/javascript"> var localStoragePrefix = "ct-16830669032817"; var lastSave = 0; function saveLocal(data) { if (Date.now() - lastSave < 1000) { return; } let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname + "'; SameSite=Strict"; cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString(); document.cookie = cookie; lastSave = Date.now(); } function loadLocal() { var cookiePrefix = localStoragePrefix + "="; var cookieStart = document.cookie.indexOf(cookiePrefix); if (cookieStart > -1) { let cookieEnd = document.cookie.indexOf(";", cookieStart); if (cookieEnd == -1) { cookieEnd = document.cookie.length; } var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd); return JSON.parse(cookieData); } } </script> <script type="text/javascript"> var canvas, ctx, kilroyImg, drawing = false, kilroyAdded = false, kilroyTransform = {x: 0, y: 0, scale: 1, rotation: 0}; function init() { canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); kilroyImg = new Image(); kilroyImg.src = 'https://master.d281utjwoi38r9.amplifyapp.com/static/media/kilroyFull.b0e6d619f8f74e91a5f2.png'; ctx.lineWidth = 5; ctx.lineCap = 'round'; canvas.addEventListener('mousedown', startDrawing); canvas.addEventListener('mousemove', draw); canvas.addEventListener('mouseup', stopDrawing); canvas.addEventListener('mouseout', stopDrawing); } function loadImage() { var input = document.getElementById('imageInput'); var reader = new FileReader(); reader.onload = function(event) { var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0, 512, 512); if (kilroyAdded) drawKilroy(); } img.src = event.target.result; } reader.readAsDataURL(input.files[0]); } function startDrawing(e) { if ($('#draw').hasClass('active')) { drawing = true; ctx.beginPath(); ctx.moveTo(e.clientX - canvas.getBoundingClientRect().left, e.clientY - canvas.getBoundingClientRect().top); } } function draw(e) { if (drawing) { ctx.lineTo(e.clientX - canvas.getBoundingClientRect().left, e.clientY - canvas.getBoundingClientRect().top); ctx.stroke(); } } function stopDrawing() { drawing = false; } function setColor(color) { ctx.strokeStyle = color; } function setOpacity(opacity) { ctx.globalAlpha = opacity; } function addKilroy() { drawKilroy(); kilroyAdded = true; } function drawKilroy() { ctx.save(); ctx.translate(kilroyTransform.x, kilroyTransform.y); ctx.rotate(kilroyTransform.rotation * Math.PI / 180); ctx.scale(kilroyTransform.scale, kilroyTransform.scale); ctx.drawImage(kilroyImg, 0, 0, kilroyImg.width, kilroyImg.height, 0, 0, kilroyImg.width, kilroyImg.height); ctx.restore(); } function downloadImage() { var link = document.createElement('a'); link.href = canvas.toDataURL('image/png'); link.download = 'kilroy-image.png'; link.click(); } function clearCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); kilroyAdded = false; } $(document).ready(function() { init(); }); </script> <link rel="canonical" href="https://calculator.tools/prompt/582/"> <meta charset="utf-8"> </head> <body> <div id="main-container" class="container"> <button onclick="$('#imageInput').click();">Upload Image</button> <input type="file" id="imageInput" onchange="loadImage()" style="display:none;"> <button id="draw" onclick="$(this).toggleClass('active');">Draw</button> <input type="color" value="#000000" onchange="setColor(this.value)"> <input type="range" min="0" max="1" step="0.01" value="1" onchange="setOpacity(this.value)"> <button onclick="addKilroy()">Add Kilroy</button> <button onclick="downloadImage()">Download Image</button> <button onclick="clearCanvas()">Clear Canvas</button> <div id="canvas-container"> <canvas id="canvas" width="512" height="512"></canvas> <img id="kilroy" src="https://master.d281utjwoi38r9.amplifyapp.com/static/media/kilroyFull.b0e6d619f8f74e91a5f2.png"> </div> <div class="instruction"> <p>1. Upload an image using the "Upload Image" button.</p> <p>2. Click the "Draw" button to start drawing on the uploaded image. Choose the drawing color and adjust the brush opacity using sliders.</p> <p>3. Click the "Add Kilroy" button to place a Kilroy on your image. Use the sliders to move, scale, and rotate the Kilroy.</p> <p>4. Click the "Download Image" button to save your edited image as a PNG.</p> <p>5. Click the "Clear Canvas" button to start over.</p> </div> </div> <script type="text/javascript"> var localStoragePrefix = "ct-{{ cachebreaker }}"; var lastSave = 0; function saveLocal(data) { if (Date.now() - lastSave < 1000) { return; } let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname + "'; SameSite=Strict"; cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString(); document.cookie = cookie; lastSave = Date.now(); } function loadLocal() { var cookiePrefix = localStoragePrefix + "="; var cookieStart = document.cookie.indexOf(cookiePrefix); if (cookieStart > -1) { let cookieEnd = document.cookie.indexOf(";", cookieStart); if (cookieEnd == -1) { cookieEnd = document.cookie.length; } var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd); return JSON.parse(cookieData); } } </script> <script type="text/javascript"> window.addEventListener('load', function() { var observer = new MutationObserver(function() { window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); observer.observe(document.body, {attributes: true, childList: true, subtree: true}); window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); </script> </body> </html>
Kilroy Image Editor
Calculator Tools