Skip to content

4 new features addded | Better algo #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

4 new features addded | Better algo #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6ac115d
background and font selection
Ysajid Feb 27, 2017
965045a
solid bg, fonts, font-color selection
Ysajid Feb 27, 2017
38bb49b
Update README.md
Ysajid Feb 27, 2017
73fe274
bug fix
Ysajid Feb 27, 2017
4a49ad5
Merge branch 'master' of https://github.com/Ysajid/quote-image-generator
Ysajid Feb 27, 2017
3b13bf0
change font-size
Ysajid Feb 28, 2017
5bf4d77
better algo for drawQuoteLine
Ysajid Feb 28, 2017
680ec42
font-padding bug resolve
Ysajid Feb 28, 2017
51f83f1
Update README.md
Ysajid Feb 28, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 8 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ FREE Quote Image Generator
- Inspiration by [freelance.splendith.com](http://freelance.splendith.com/)
- Default width & height: 520px
- Support 5 maximum lines
- Image or solid background selection
- Font style and color selection

## Getting Started
1. Set path (e.g. `cd C:\xampp\htdocs\jojoee.com\quote-image-generator`)
Expand All @@ -15,19 +17,20 @@ FREE Quote Image Generator
4. Start `gulp`

## TODO
- [ ] Add background colors / images (keep last 5 colors / images on localStorage)
- [ ] Add font size
- [ ] Add font color
- [x] Add background colors / images (keep last 5 colors / images both on localStorage and web url)
- [x] Add font size
- [x] Add font color
- [ ] Login via `facebook` for publishing (also keep login session / detail)
- [ ] Automatically publish into your `facebook` status / your `facebook` page (with message)
- [ ] Add multi font weight
- [ ] Add page name input
- [ ] Add page avatar input
- [ ] Remove unused files / configs
- [ ] Support multi-lines
- [x] Support multi-lines
- [ ] Detect `empty` line
- [ ] Detect input width (prevent text-overflow on the canvas)
- [ ] Update algorithm
- [x] Update algorithm
- [ ] Correct algorithm for even number of lines
- [ ] Add english font
- [ ] Port to `Angular`
- [ ] Clear canvas on `text area` only (instead clear all canvas area)
Expand Down
6 changes: 6 additions & 0 deletions css/bootstrap.min.css
View file
Open in desktop

Large diffs are not rendered by default.

64 changes: 63 additions & 1 deletion css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,14 @@ textarea {
width: 100%;
border: 1px solid #F7F7F7;
resize: none;
height: 320px;
padding: 12px;
}

input {
width: 100%;
margin:8px 0px;
}

/* http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css */
::-webkit-input-placeholder,
:-moz-placeholder,
Expand All @@ -71,3 +75,61 @@ textarea {
text-align: center;
margin: 24px 0;
}

#images img {
display:inline-block;
height:100px;
width:100px;
cursor: pointer;
}

#color_blocks {
margin: 8px;
}

#color_blocks div{
display:inline-block;
width: 25px;
height: 25px;
background: black;
cursor: pointer;
margin: -2px;
}

#font-colors {
margin: 8px;
}
#font-colors div {
display:inline-block;
width: 25px;
height: 25px;
background: black;
cursor: pointer;
margin: -2px;
}

#fonts a{
text-decoration: none !important;
padding: 4px;
color: black;
cursor: pointer;
}

#fonts a:hover {
color: #03b48d;
}

#plus , #minus {
display: inline-block;
font-size: 20px;
height: 25px;
width: 25px;
padding: 4px;
text-align: center;
cursor: pointer;
}

#plus:hover , #minus:hover {
background-color: #03b48d;
color: #fff;
}
Binary file added images/1.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/2.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/3.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
125 changes: 88 additions & 37 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,107 @@
<!DOCTYPE html>
<html lang="en-US" prefix="og: http://ogp.me/ns#">

<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Quote Image Generator</title>
<link rel="stylesheet" href="css/reset.css">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Quote Image Generator</title>
<link rel="stylesheet" href="css/reset.css">
</head>

<body>
<div class="page">
<div class="container">
<div class="row">
<div class="test-font">
<p>
quote-image-generator<br>
ยูวีคอร์รัปชั่นแม็กกาซีนมหภาค
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<canvas id="canvas" class="canvas" width="560" height="560"></canvas>
</div>
<div class="col-md-6">
<textarea name="quote-text" id="quote-text" cols="30" rows="10" placeholder="Type Here"></textarea>
<div class="download" id="download" onClick="downloadCanvas()">Download</div>
</div>
</div>
</div>
</div>
<script>
<div class="page">
<div class="container">
<div class="row">
<div class="test-font">
<p>
quote-image-generator<br> ยูวีคอร์รัปชั่นแม็กกาซีนมหภาค
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<canvas id="canvas" class="canvas" width="560" height="560"></canvas>
</div>
<div class="col-md-6">
<textarea name="quote-text" id="quote-text" cols="30" rows="10" placeholder="Type Here"></textarea>
<div id="color_blocks">
<a>
<div style="background:coral;"></div>
</a>
<a>
<div style="background:lightgoldenrodyellow;"></div>
</a>
<a>
<div style="background:#16191a;"></div>
</a>
<a>
<div style="background:bisque;"></div>
</a>
<a>
<div style="background:crimson;"></div>
</a>
<a>
<div style="background:coral;"></div>
</a>
</div>
<div id="images">
<a><img class="img-responsive" src="images/1.jpg" /></a>
<a><img class="img-responsive" src="images/2.jpg" /></a>
<a><img class="img-responsive" src="images/3.jpg" /></a>
</div>
<form id="url_form">
<input id="image_url" type="text" placeholder="Drag and drop image here or provide image url">
</form>
<div id="font-colors">
<p>Font Color</p>
<a>
<div style="background:#222222;"></div>
</a>
<a>
<div style="background:white;"></div>
</a>
<a>
<div style="background:gray;"></div>
</a>
</div>
<p style="display:inline-block;">Font Size</p>
<div id="minus" onclick="changeFontSize(-1)">-</div>
<p style="display:inline-block;" id="font-size" ></p>
<div id="plus" onclick="changeFontSize(1)">+</div>
<div id="fonts">
<p style="display:inline;">Select Font</p>
<a>Kanit</a>
<a>Ubuntu</a>
</div>
<div class="download" id="download" onClick="downloadCanvas()">Download</div>
</div>
</div>
</div>
</div>
<script>
(function(d) {
var wf = d.createElement('script'), s = d.scripts[0];
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js';
s.parentNode.insertBefore(wf, s);
})(document);
</script>
<!-- dev -->
<!--
<!-- dev -->
<!--
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<script src="bower_components/blueimp-canvas-to-blob/js/canvas-to-blob.min.js"></script>
<script src="bower_components/FileSaver/FileSaver.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
-->

<!-- prod -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/javascript-canvas-to-blob/3.1.0/js/canvas-to-blob.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- prod -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/canvas-to-blob.min.js"></script>
<script src="js/filesaver.min.js"></script>
<script src="js/jquery-3.1.1.min.js"></script>

<link rel="stylesheet" href="css/style.css">
<script src="js/main.js"></script>
<link rel="stylesheet" href="css/style.css">
<script src="js/main.js"></script>
</body>
</html>

</html>
2 changes: 2 additions & 0 deletions js/canvas-to-blob.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 7 additions & 0 deletions js/filesaver.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions js/jquery-3.1.1.min.js
View file
Open in desktop

Large diffs are not rendered by default.

Loading