File: /var/www/html/tmpr/..//tmpr/../tmpr/../brandcreator/processLogo.php
<?php
session_start();
$logoReal = $_SESSION['myLogo'];
$imagePath = '../v/uploads/brandcreator/'.$logoReal; // Specify your image path
if (file_exists($imagePath)) {
$imageData = file_get_contents($imagePath);
$base64 = base64_encode($imageData);
$mimeType = mime_content_type($imagePath);
$logodataUri = "data:$mimeType;base64,$base64";
} else {
echo "Image not found:";
}?>
<?php
session_start();
$logoReal = $_SESSION['myLogo'];
if (empty($logoReal)) {
header("Location: https://www.thebrand.ai/brandcreator/choose");
}
?>
<html style=""
class="no-touchevents wf-rubik-n5-active wf-robotomono-n3-active wf-poppins-n7-active wf-poppins-n6-active wf-roboto-n4-active wf-sansitaone-n4-active wf-kameron-n4-active wf-trocchi-n4-active wf-robotocondensed-n4-active wf-raleway-n4-active wf-playfairdisplay-n9-active wf-alice-n4-active wf-ultra-n4-active wf-quattrocento-n4-active wf-fanwoodtext-n4-active wf-archivoblack-n4-active wf-tenorsans-n4-active wf-eczar-n7-active wf-eczar-n4-active wf-worksans-n4-active wf-stintultraexpanded-n4-active wf-pontanosans-n4-active wf-unicaone-n4-active wf-abel-n4-active wf-domine-n4-active wf-cabin-n4-active wf-oswald-n5-active wf-oswald-n4-active wf-opensans-n4-active wf-nixieone-n4-active wf-oldstandard-n4-inactive wf-slabo-n4-inactive wf-active">
<head>
<meta name="author" content="Brand AI"/>
<link rel="shortcut icon" type="image/png" href="https://www.thebrand.ai/i/uploads/logo/logo_6119277f674cd2.png"/>
<meta property="og:locale" content="en-US"/>
<meta property="og:site_name" content="Brand AI"/>
<meta property="og:image" content="https://www.thebrand.ai/i/uploads/logo/logo_62a4de26e93f0.png"/>
<meta property="og:image:width" content="160"/>
<meta property="og:image:height" content="60"/>
<meta property="og:type" content="website"/>
<meta property="og:title" content="Design Like A Pro! Unlock Your Creativity with AI Design Tools | The Brand AI - Brand AI"/>
<meta property="og:description" content="Elevate your brand with AI-powered logo, poster, and brochure designs. Get stunning business cards and banners. Unleash the potential of AI in design."/>
<meta property="og:url" content="https://www.thebrand.ai/i/"/>
<meta property="fb:app_id" content=""/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="@Brand AI"/>
<meta name="twitter:title" content="Design Like A Pro! Unlock Your Creativity with AI Design Tools | The Brand AI - Brand AI"/>
<meta name="twitter:description" content="Elevate your brand with AI-powered logo, poster, and brochure designs. Get stunning business cards and banners. Unleash the potential of AI in design."/>
<link rel="canonical" href="https://www.thebrand.ai/i/"/>
<meta charset="utf-8">
<title>BrandCreator | Professional Brand & Logo Design Made Easy</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://www.thebrand.ai/brandcreator/favicon.png" rel="shortcut icon" type="image/x-icon">
<link href="https://www.thebrand.ai/brandcreator/webclip.png" rel="apple-touch-icon">
<meta name="description"
content="Tap into the power of smart brand design. Create a complete, professional & entirely unique brand in minutes.">
<link href="files/assets/brandcreator.css?ttwet" rel="stylesheet">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Rubik:500,500%7CRoboto+Mono:300%7CPoppins:700,600%7CRoboto:400%7CSansita+One:400,400%7CKameron:400%7CTrocchi:400,400%7CRoboto+Condensed:400%7COld+Standard:400,400%7CRaleway:400%7CPlayfair+Display:900,900%7CAlice:400%7CUltra:400,400%7CSlabo:400%7CQuattrocento:400,400%7CFanwood+Text:400%7CArchivo+Black:400,400%7CTenor+Sans:400%7CEczar:700,400%7CWork+Sans:400%7CStint+Ultra+Expanded:400,400%7CPontano+Sans:400%7CUnica+One:400,400%7CAbel:400%7CDomine:400,400,400%7CCabin:400%7COswald:500,400%7CNixie+One:400,400%7COpen+Sans:400"
media="all">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Rubik:500,500%7CRoboto+Mono:300%7CPoppins:700,600%7CRoboto:400%7CSansita+One:400,400%7CKameron:400%7CTrocchi:400,400%7CRoboto+Condensed:400%7COld+Standard:400,400%7CRaleway:400%7CPlayfair+Display:900,900%7CAlice:400%7CUltra:400,400%7CSlabo:400%7CQuattrocento:400,400%7CFanwood+Text:400%7CArchivo+Black:400,400%7CTenor+Sans:400%7CEczar:700,400%7CWork+Sans:400%7CStint+Ultra+Expanded:400,400%7CPontano+Sans:400%7CUnica+One:400,400%7CAbel:400%7CDomine:400,400,400%7CCabin:400%7COswald:500,400%7CNixie+One:400,400%7COpen+Sans:400"
media="all">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Rubik:500,500%7CRoboto+Mono:300%7CPoppins:700,600%7CRoboto:400%7CSansita+One:400,400%7CKameron:400%7CTrocchi:400,400%7CRoboto+Condensed:400%7COld+Standard:400,400%7CRaleway:400%7CPlayfair+Display:900,900%7CAlice:400%7CUltra:400,400%7CSlabo:400%7CQuattrocento:400,400%7CFanwood+Text:400%7CArchivo+Black:400,400%7CTenor+Sans:400%7CEczar:700,400%7CWork+Sans:400%7CStint+Ultra+Expanded:400,400%7CPontano+Sans:400%7CUnica+One:400,400%7CAbel:400%7CDomine:400,400,400%7CCabin:400%7COswald:500,400%7CNixie+One:400,400%7COpen+Sans:400"
media="all">
<style>
#svg-wrapper {
max-width: 900px; /* Limit max width */
/* Center horizontally with vertical margin */
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 50px;
padding: 0px;
box-sizing: border-box;
font-family: Arial, sans-serif;
overflow:auto;
}
#svg-container {
display: flex;
flex-wrap: wrap; /* Wrap SVG items to next line */
justify-content: center; /* Center items horizontally */
gap: 15px; /* Space between SVG items */
min-height: 200px;
overflow:auto;
/* Optional: reserve space */
}
.pagination {
margin-top: 0px;
text-align: center; /* Center pagination links */
}
/* Example pagination link styles */
.pagination a {
display: inline-block;
margin: 0 6px;
padding-top: 8px;
padding-right: 14px;
padding-left: 14px;
padding-bottom: 8px;
border: 1px solid #ddd;
border-radius: 15px;
color: #333;
text-decoration: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
.pagination a:hover {
background-color: #eee;
}
.pagination a.active {
background-color: #eb008b;
color: white;
border-color: #eb008b;
}
</style>
<style>
.containerLogo { min-width: 600px;background: #fff; padding: 30px; border-radius: 20px; box-shadow: 0 2px 8px #ccc; }
.upload-area {
border: 2px dashed #eb008b;
border-radius: 8px;
padding: 40px;
text-align: center;
color: #888;
cursor: pointer;
transition: background 0.2s;
}
.upload-area.dragover { background: #e3f0ff; }
#preview { margin: 20px auto; display: none; max-width: 100%; border-radius: 6px; }
#progressBar { width: 100%; height: 8px; background: #eee; border-radius: 4px; margin: 20px 0; display: none; }
#progressBar div { height: 100%; width: 0; background: #eb008b; border-radius: 4px; transition: width 0.3s; }
.colors { display: flex; gap: 8px; margin-top: 15px; }
.color-box { width: 28px; height: 28px; border-radius: 4px; border: 1px solid #ddd; }
.uploadbutton
{
margin: 0 6px;
padding-top: 8px;
padding-right: 14px;
padding-left: 14px;
padding-bottom: 8px;
border:0px;
border-radius: 15px;
color: #333;
text-decoration: none;
cursor: pointer;
color:#ffffff;
transition: background-color 0.3s ease;
background: #eb008b;
font-size:20px;
}
#preview
{
max-height:200px;
}
</style>
</head>
<body>
<div id="react">
<div class="brandcreator--header brandcreator--header-dashboard ">
<div class="brandcreator--header-background" style="width: 100vw; z-index: 0;"></div>
<div class="brandcreator--brand-menu" style="top: -100vh;">
<div class="brandcreator--header-item " data-tip="true" data-tip-disable="true"
data-for="footertip_undefined" style="cursor: pointer; background-color: transparent;">
<div class="brandcreator--header-icon-text" style="color: rgb(25, 25, 25);">
<!--<div class="brandcreator--header-profile-picture-menu-icon"><img src="https://lh3.googleusercontent.com/a/ACg8ocImzSnwECRTlo1rZvZ9x1miwqaBUyr6iQgm5sGATnT4ZmJG74ObAQ=s50" style="border-radius: 100%; height: 32px; margin-right: 0px;" class=""></div>-->
</div>
</div>
<div class="brandcreator--header-item " data-tip="true" data-tip-disable="true"
data-for="footertip_undefined" style="cursor: pointer; background-color: transparent;">
<div class="brandcreator--header-icon-text" style="color: rgb(25, 25, 25);"></div>
</div>
</div>
<div class="brandcreator--header-left"><a href="https://www.thebrand.ai/brandcreator/choose">
<div data-tip="true" data-for="footertip_Go to your dashboard" data-tip-disable="false"
class="brandcreator--header-item " style="cursor: pointer; background-color: transparent;"
currentitem="false">
<img src="files/assets/logo-white3.png" alt="" class="image-47 white-logo" style="max-width:60px; margin-top: 10px; display: block;">
</div>
<div class="__react_component_tooltip place-right type-dark " data-id="tooltip"
style="left: 82px; top: 14px;"><!--Go to your dashboard-->
</div>
</a></div>
<div class="brandcreator--header-center"></div>
<div class="brandcreator--header-right">
<div class="brandcreator--header-item " data-tip="true" data-tip-disable="true"
data-for="footertip_undefined" style="cursor: pointer; background-color: transparent;">
<button type="button" class="brandcreator--dropdown" style="position: relative; color: rgb(25, 25, 25);"
aria-haspopup="true" aria-expanded="false">
<div data-for="footertip3"
style="z-index: 10; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;"></div>
<div>
<!--<div class="brandcreator--header-profile-picture-menu-icon"><img
src="https://lh3.googleusercontent.com/a/ACg8ocImzSnwECRTlo1rZvZ9x1miwqaBUyr6iQgm5sGATnT4ZmJG74ObAQ=s50"
style="border-radius: 100%; height: 32px; margin-right: 0px;" class=""></div>
</div>-->
<svg class="" viewBox="-1 -1 9 14"
style="transition: 200ms; transform: rotate(90deg); height: 12px; margin-left: -5px; margin-right: 0px; margin-top: 8px;">
<polyline stroke="rgb(25, 25, 25)" stroke-width="1.5" vector-effect="non-scaling-stroke"
fill="none" points="0 0 6 5.99950763 0 11.9990153"></polyline>
</svg>
</button>
</div>
</div>
</div>
<div class="brandcreator--notifications"></div>
<div class="brandcreator--onboard-screen"><h1>Processing Your Logo...</h1>
<div class="brandcreator--onboard-screen-container">
<div class="containerLogo" style="display:none">
<script src="png2svg/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
<div class="choices" style="display:none" >
<div class="file">
Drag & Drop files or
<input type="file" id="upload" multiple="multiple" accept=".jpg,.jpeg,.png,.gif,.svg" />
</div>
<button id="test">Try a test image: <img src="<?php echo $logodataUri; ?>" id="testImage" /></button>
<button id="clear">Clear Output</button>
</div>
</header>
<div id="output" style="display:none"></div>
<div style="display:none" id="filedrag">Drop images to convert here.</div>
<script src='png2svg/PqvYBB.js'></script>
<script id="rendered-js" >
console.clear();
console.time = console.time || function () {};
console.timeEnd = console.timeEnd || function () {};
(function () {
"use strict";
function each(obj, fn) {
var length = obj.length,
likeArray = length === 0 || length > 0 && length - 1 in obj,
i = 0;
if (likeArray) {
for (; i < length; i++) {if (window.CP.shouldStopExecution(0)) break;if (fn.call(obj[i], i, obj[i]) === false) {break;}}window.CP.exitedLoop(0);
} else {
for (i in obj) {if (fn.call(obj[i], i, obj[i]) === false) {break;}}
}
}
function convertImage(img) {
"use strict";
function each(obj, fn) {
var length = obj.length,
likeArray = length === 0 || length > 0 && length - 1 in obj,
i = 0;
if (likeArray) {
for (; i < length; i++) {if (window.CP.shouldStopExecution(1)) break;if (fn.call(obj[i], i, obj[i]) === false) {break;}}window.CP.exitedLoop(1);
} else {
for (i in obj) {if (fn.call(obj[i], i, obj[i]) === false) {break;}}
}
}
function componentToHex(c) {
var hex = parseInt(c).toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function getColor(r, g, b, a) {
a = parseInt(a);
if (a === undefined || a === 255) {return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);}
if (a === 0) {return false;}
return 'rgba(' + r + ',' + g + ',' + b + ',' + a / 255 + ')';
}
// Optimized for horizontal lines
function makePathData(x, y, w) {return 'M' + x + ' ' + y + 'h' + w + '';}
function makePath(color, data) {return '<path stroke="' + color + '" d="' + data + '" />\n';}
function colorsToPaths(colors) {
var output = "";
// Loop through each color to build paths
each(colors, function (color, values) {
var orig = color;
color = getColor.apply(null, color.split(','));
if (color === false) {return;}
var paths = [];
var curPath;
var w = 1;
// Loops through each color's pixels to optimize paths
each(values, function () {
if (curPath && this[1] === curPath[1] && this[0] === curPath[0] + w) {
w++;
} else {
if (curPath) {
paths.push(makePathData(curPath[0], curPath[1], w));
w = 1;
}
curPath = this;
}
});
paths.push(makePathData(curPath[0], curPath[1], w)); // Finish last path
output += makePath(color, paths.join(''));
});
return output;
}
var getColors = function (img) {
var colors = {},
data = img.data,
len = data.length,
w = img.width,
h = img.height,
x = 0,
y = 0,
i = 0,
color;
for (; i < len; i += 4) {if (window.CP.shouldStopExecution(2)) break;
if (data[i + 3] > 0) {
color = data[i] + ',' + data[i + 1] + ',' + data[i + 2] + ',' + data[i + 3];
colors[color] = colors[color] || [];
x = i / 4 % w;
y = Math.floor(i / 4 / w);
colors[color].push([x, y]);
}
}window.CP.exitedLoop(2);
return colors;
};
var window = window || {};
window.CP = {
shouldStopExecution: function () {return false;},
exitedLoop: function () {} };
var colors = getColors(img),
paths = colorsToPaths(colors),
output = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -0.5 ' + img.width + ' ' + img.height + '" shape-rendering="crispEdges">\n' + paths + '</svg>';
// Send message back to the main script
return output;
};
// File Output
var outputDiv = document.getElementById('output');
function fileSize(str) {
var bytes = encodeURI(str).split(/%..|./).length - 1;
if (bytes === 0) return 0;
var sizes = ['bytes', 'kb', 'mb', 'gb', 'tb'],
i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024))),
size = bytes / Math.pow(1024, i);
return Math.round(size * 100) / 100 + ' ' + sizes[i];
};
function downloadLink(output, fileName, linkContent) {
return '<a href="data:Application/octet-stream,' + encodeURIComponent(output) + '" download="' + fileName + '.svg">' + (linkContent || output) + '</a>';
}
function showOutput(output, fileName) {
outputDiv.innerHTML = '<figure class="output">' + downloadLink(output, fileName) + '<figcaption class="output__details">' + downloadLink(output, fileName, ' ') + '<pre contentEditable="true" class="output__raw">' + output.replace(/</g, '<').replace(/>/g, '>') + '</pre></figcaption></figure>' + outputDiv.innerHTML;
console.timeEnd('conversion');
}
// Convert image to canvas ImageData
function imageToData(img) {
var canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d"),
width = img.width,
height = img.height;
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0);
return ctx.getImageData(0, 0, width, height);
}
var imageWorker = cw(convertImage);
function convert(img, fileName) {
img = img.type ? this : img; // use `this` if `img` is event
if (!img || img === window) {return false;}
console.time('conversion');
fileName = fileName || 'pixels';
var imgData = imageToData(img);
if (!Modernizr.webworkers || !Modernizr.blobworkers) {
console.log('No workers or blog support. Larger images may timeout.');
var converted = convertImage(imgData);
/* showOutput(converted, fileName);*/
var encodedSVG = encodeURIComponent(converted);
// Prepare POST data
var formData = new FormData();
formData.append('svgLogo', encodedSVG);
// Preserve current GET parameters
var params = new URLSearchParams(window.location.search);
// Send the POST request
fetch('https://www.thebrand.ai/brandcreator/files/connect/svgLogoSave.php', {
method: 'POST',
body: formData
}).then(function(response) {
// Redirect to /colors with current GET variables
Math.floor(Math.random() * 1000000);
window.location.href = 'logocolors' + (params.toString() ? '?' + params.toString() : '')+'&'+Math.floor(Math.random() * 1000000);;
});
} else {
imageWorker.data(imgData).then(function (converted) {
showOutput(converted, fileName);
}, function (e) {
outputDiv.innerHTML = outputRaw.innerHTML = "";
console.error(e);
console.timeEnd('conversion');
});
}
}
function makeImage(src, callback) {
var img = new Image();
img.onload = callback;
img.src = src.target ? src.target.result : src;
}
function loadFiles(e) {
var files = e.target.files || e.dataTransfer.files || uploader.files,
len = files.length,
i = 0;
each(files, function (i, file) {
var reader = new FileReader();
var fileName = file.name;
fileName = fileName.slice(0, fileName.lastIndexOf('.')) || fileName + "";
reader.onload = function (e) {
console.log(e, arguments);
makeImage(e, function (img) {convert(this, fileName);});
};
reader.readAsDataURL(files[i]);
});
}
// File Uploader
var uploader = document.getElementById('upload');
uploader.onchange = loadFiles;
// Test Image Conversion
var test = document.getElementById('test');
var testImage = document.getElementById('testImage');
/*test.onclick = function () {convert(testImage, 'test');};*/
window.onload = function () {
convert(testImage, 'test');
};
// Clear Output
var clear = document.getElementById('clear');
clear.onclick = function () {output.innerHTML = "";};
// Drag & Drop
var fileDrag = document.getElementById('filedrag');
function FileDragReset(e) {
e.preventDefault();
fileDrag.className = '';
}
function FileDragDrop(e) {
e = e || window.event;
FileDragReset(e);
loadFiles(e);
}
fileDrag.addEventListener("dragleave", FileDragReset);
document.addEventListener("dragenter", function () {fileDrag.className = 'dragenter';});
document.addEventListener('dragover', function (e) {e.preventDefault(); /* Essential! */});
document.addEventListener("drop", FileDragDrop);
})();
//# sourceURL=pen.js
</script>
</div>
</div>
<!-- <div class="brandcreator--icon-search">
</div>-->
</div>
<div class="brandcreator--onboard-screen-buttons">
<div class="brandcreator--onboard-screen-back ">Back</div>
<div class="brandcreator--onboard-screen-progress ">
<div class="brandcreator--onboard-screen-progress-icon-container">
<div class="brandcreator--onboard-screen-progress-icon">1</div>
</div>
<div class="brandcreator--onboard-screen-progress-icon-container">
<div class="brandcreator--onboard-screen-progress-icon">2</div>
</div>
<div class="brandcreator--onboard-screen-progress-icon-container">
<div class="brandcreator--onboard-screen-progress-icon-active">3</div>
</div>
<div class="brandcreator--onboard-screen-progress-icon-container">
<div class="brandcreator--onboard-screen-progress-icon-disabled">4</div>
</div>
<div class="brandcreator--onboard-screen-progress-icon-container">
<div class="brandcreator--onboard-screen-progress-icon-disabled">5</div>
</div>
</div>
<div class="brandcreator--onboard-screen-next " style="cursor: pointer;">Next</div>
</div>
</div>
</body>
</html>