Skip to content

Commit

Permalink
Merge pull request #8 from VerboseDaVinci/professional-wrapper
Browse files Browse the repository at this point in the history 
Professional wrapper
  • Loading branch information
@archie-g-m
archie-g-m authored Jan 24, 2021
2 parents fa697f9 + f27dd9a commit a11e910
Show file tree
Hide file tree
Showing 2 changed files with 128 additions and 43 deletions.
25 changes: 17 additions & 8 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,35 +4,44 @@
margin: auto;
text-align: center;
}
.grid-container {
margin: auto;
display: flex;
justify-content: center;
}
.box-container{
flex: 1;
}
</style>
<html>
<head>
<!-- <link rel="shortcut icon" href="">-->
<meta charset="utf-8">
<title>Verbose DaVinci</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="content">
<h2 class="content">Verbose DaVinci</h2>
<div class="content">
<input type="text" id="input-text" size="30" height="20">
<input type="text" id="input-text" size="30" height="20" placeholder="Insert Text Here" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet.">
<input type="number" placeholder="Font Size" value="12" id="font-input">
<button type="button" onclick="onClickConvert();">Add Text</button>
<a id="download-anchor">
<button type="button" id="download-button">Download</button>
</a>
</div>
<div>
<div class="inputoutput">
<div class="grid-container">
<div class="inputoutput box-container">
<img id="imageSrc" alt="No Image"/>
<div class="caption"> <input type="file" id="fileInput" name="file"/></div>
</div>
<div class="inputoutput">
<div class="inputoutput box-container">
<canvas id="canvasOutput"></canvas>
</div>
<div class="textoutputcanvas">
<canvas id="textOutput"></canvas>
</div>
</div>

<div class="textoutputcanvas">
<canvas id="textOutput"></canvas>
</div>
<script src="convert_image.js" type="text/javascript"></script>
<script src="text_image.js" type="text/javascript"></script>
<script type="text/javascript">
Expand Down
146 changes: 111 additions & 35 deletions text_image.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,43 +3,44 @@ let scaleFactor = 1.0;

let colorCanvas = document.getElementById("canvasOutput");
let textCanvas = document.getElementById("textOutput");
let ignoreColor = "#ffffffff"


function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
function rgbToHex(r, g, b, a) {
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b) + componentToHex(a);
}

function onClickConvert(){
function onClickConvert() {
let text = document.getElementById("input-text");
let colorCanvas = document.getElementById("canvasOutput");
let textCanvas = document.getElementById("textOutput")
let textCanvas = document.getElementById("textOutput");
let canvasContext = colorCanvas.getContext('2d');
let fontSize = document.getElementById('font-input').value;

//canvasContext.clearRect(0,0,canvas.width,canvas.height) // Clear It

canvasContext.font="10px Arial"; // Set Font
console.log({fontSize})
canvasContext.font = fontSize + "px Arial"; // Set Font
//canvasContext.fillText(text.value, 10, 50); // Add the text

resizeCanvas(colorCanvas, textCanvas, text.value)
smartResizeCanvas(colorCanvas, textCanvas, text.value);

wrapText(textCanvas, text.value);
console.log({canvas: colorCanvas, textCanvas})
// Create Downloadable image png
createDownload(colorCanvas)
createDownload(colorCanvas);


//console.log(text.value);

}

function createDownload(canvas){
function createDownload(canvas) {
let link = document.getElementById('download-anchor');
link.addEventListener('click', function(ev) {
link.addEventListener('click', function (ev) {
link.href = textCanvas.toDataURL();
link.download = "davincis-masterpiece.png";
}, false);
Expand All @@ -49,13 +50,13 @@ function getLineHeight(ctx) {
return parseInt(ctx.font.split('px')[0]);
}

function wrapText(canvas, str){
function wrapText(canvas, str) {
/**
* for letter in text{
* if x > canvas_width{
* x = 0
* y+=line_height
* }
* if x > canvas_width{
* x = 0
* y+=line_height
* }
*
* drawLetter(canvas, char, x,y)
* x+= char_width
Expand All @@ -66,25 +67,30 @@ function wrapText(canvas, str){

let x = lineHeight;
let y = lineHeight;
let letter = " "
let letter = " ";


let line = "";
for (var i = 0; i < str.length; i++) {
letter = str.charAt(i);
var metric = ctx.measureText(letter);

if (y > canvas.height){
break;
}

if (x > canvas.width - lineHeight){
y+=lineHeight;
x=lineHeight;
if (x > canvas.width - lineHeight) {
y += lineHeight;
x = lineHeight;
line = "";
}
line += letter;

drawLetter(colorCanvas, letter, x, y);
if (!drawLetter(colorCanvas, letter, x, y)){
i--;
};

x+= metric.width;
x += metric.width;


}
Expand All @@ -93,36 +99,99 @@ function wrapText(canvas, str){
}


function getColor(canvas, x,y){
function getColor(canvas, x, y) {
let ctx = document.getElementById("canvasOutput").getContext('2d')

let colorX = x / scaleFactor;
let colorY = y / scaleFactor;
let data = ctx.getImageData(colorX, colorY, 1, 1).data
let colorHex = rgbToHex(data[0],data[1],data[2])
let data = ctx.getImageData(colorX, colorY, 1, 1).data;
let colorHex = rgbToHex(data[0], data[1], data[2], data[3]);
//"#fe3482"
return colorHex;
}

function resizeCanvas(inputCanvas, outputCanvas, str) {
let ctx = inputCanvas.getContext('2d')
let ctx = inputCanvas.getContext('2d');

let charWidth = ctx.measureText(str).width/str.length;
let charWidth = ctx.measureText(str).width / str.length;
let charHeight = getLineHeight(ctx);

let xRatio = inputCanvas.width / charWidth
let yRatio = inputCanvas.height / charHeight
let xRatio = inputCanvas.width / charWidth;
let yRatio = inputCanvas.height / charHeight;

scaleFactor = Math.sqrt(str.length/(xRatio*yRatio));
scaleFactor = Math.sqrt(str.length / (xRatio * yRatio));
console.log("sqrt man");
outputCanvas.width = inputCanvas.width * scaleFactor;
outputCanvas.height = inputCanvas.height * scaleFactor;

console.table({charWidth, charHeight, xRatio, yRatio, scaleFactor})
console.table({charWidth, charHeight, xRatio, yRatio, scaleFactor});

outputCanvas.getContext('2d').font = ctx.font;
}

function smartResizeCanvas(inputCanvas, outputCanvas, str) {
let ctx = inputCanvas.getContext('2d')

let charWidth = ctx.measureText(str).width / str.length;
let charHeight = getLineHeight(ctx);

scaleFactor = 1;
let pixelRatio = getValidPixelRatio();
let xRatio = inputCanvas.width / charWidth;
let yRatio = inputCanvas.height / charHeight;

scaleFactor = Math.sqrt(str.length / (xRatio * yRatio * pixelRatio));
console.log("sqrt man 2: electric boogaloo");
outputCanvas.width = inputCanvas.width * scaleFactor;
outputCanvas.height = inputCanvas.height * scaleFactor;

console.table({charWidth, charHeight, xRatio, yRatio, scaleFactor});

outputCanvas.getContext('2d').font = ctx.font;
}

function getValidPixelRatio() {
let width = colorCanvas.width;
let height = colorCanvas.height;

ctx = colorCanvas.getContext('2d');
let background = "#ffffffff";
let transparent = "#00000000";

let invalidPixels = 0;


for (var i = 0; i < width; i++) {
for (var j = 0; j < height; j++) {
let color = getColor(colorCanvas, i, j);

// if (i%50 === 1 && j%50 ===1) {
// console.log({color})
// }

if (isWhite(color) || isTransparent(color)) {

invalidPixels++;
//console.log({color, invalidPixels})
}
}
}

let pixelRatio = 1 - (invalidPixels / (width * height));
console.log({pixelRatio, invalidPixels})
return pixelRatio;

}

function isWhite(hex){
return (hex[1] === 'f' && hex[3] ==='f' && hex[5] === 'f');
}

function isTransparent(hex){
return hex[8] === '0';
}


/**
* Draw character at selected position
* @param canvas Canvas to draw character on
Expand All @@ -131,7 +200,7 @@ function resizeCanvas(inputCanvas, outputCanvas, str) {
* @param y
* @return Return if the character has been successfully drawn at position, if not return false
*/
function drawLetter(canvas, char, x, y){
function drawLetter(canvas, char, x, y) {
/**
* if there is color at x,y
* increment the x,y to next pos
Expand All @@ -140,16 +209,23 @@ function drawLetter(canvas, char, x, y){
* filltext
* return true
*/
let ctx = textCanvas.getContext('2d')
let ctx = textCanvas.getContext('2d');
// if(ctx.ucharPtr(x, y)[0] != null || ctx.ucharPtr(x, y)[0] != 0){
// return;
// }else{

let drawColor = getColor(colorCanvas, x,y)
let drawColor = getColor(colorCanvas, x, y);

if (isWhite(drawColor) || isTransparent(drawColor)){
ctx.fillStyle = "#00000000";
ctx.fillText(char, x, y);
return false;
} else {
ctx.fillStyle = drawColor;
ctx.fillText(char,x,y);
ctx.fillText(char, x, y);
return true;
}

// }

}

0 comments on commit a11e910

Please sign in to comment.