mock up poster maker using fabric.js and google fonts.
Created
September 20, 2019 04:03
-
-
Save jackd942/1ac525e680f81d84891432a7c0c33915 to your computer and use it in GitHub Desktop.
Fabric poster maker
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"> | |
<div class="row"> | |
<div class="col-sm-6"> | |
<div class="canvas-wrapper"> | |
<canvas id="c" width="360px" height="570px"></canvas> | |
</div> | |
<div class="btn-group"> | |
<button class="btn btn-default" id="trash"><i class="fas fa-trash"></i></button> | |
<button class="btn btn-default" id="bringFront-btn">Bring forward</button> | |
<button class="btn btn-default" id="sendBack-btn">Send back</button> | |
</div> | |
</div> | |
<div class="col-sm-6"> | |
<div class="form-group"> | |
<label>Input text | |
<button class="btn btn-default" type="button" onClick="addText()">Add Text</button> | |
</label> | |
<div class="btn-group"> | |
<button type="button" class="btn btn-default" id="font-alignLeft"><i class="fas fa-align-left"></i></button> | |
<button type="button" class="btn btn-default" id="font-alignCenter"><i class="fas fa-align-center"></i></button> | |
<button type="button" class="btn btn-default" id="font-alignRight"><i class="fas fa-align-right"></i></button> | |
</div> | |
</div> | |
<div class="form-group"> | |
<label> | |
<input id="fontShadow" type="checkbox"/> | |
Text Shadow | |
</label> | |
</div> | |
<div class="form-group"> | |
<label>Font Family | |
<select id="chooseFont" class="form-control"></select> | |
</label> | |
</div> | |
<div class="form-group"> | |
<label>Font Size | |
<input id="fontSize-input" type="range" min="10" max="60"> | |
</label> | |
</div> | |
<div class="form-inline form-group"> | |
<label>Font Colour</label> | |
<input id="fontColor-input" type="color" class="form-control"> | |
<label>Background Color</label> | |
<input type="color" id="fontBg-input" class="form-control"> | |
</div> | |
<div class="input-wrapper"> | |
<label>Background image:</label> | |
<input id="bg-image" accept="image/png, image/jpeg" type="file"> | |
</div> | |
</div> | |
</div></div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// create a wrapper around native canvas element (with id="c") | |
var canvas = new fabric.Canvas("c", { | |
preserveObjectStacking: true | |
}); | |
var fonts = [ | |
"Pacifico", | |
"VT323", | |
"Quicksand", | |
"Inconsolata", | |
"Bungee", | |
"Permanent Marker", | |
"Monoton", | |
"Modak" | |
]; | |
document.getElementById("bg-image").addEventListener("change", function(e) { | |
var file = e.target.files[0]; | |
var reader = new FileReader(); | |
reader.onload = function(f) { | |
var data = f.target.result; | |
fabric.Image.fromURL(data, function(img) { | |
var oImg = img.set(); | |
canvas.add(oImg).renderAll(); | |
var a = canvas.setActiveObject(oImg); | |
var dataURL = canvas.toDataURL({ fromat: "png" }); | |
}); | |
}; | |
reader.readAsDataURL(file); | |
}); | |
function addText() { | |
var str = prompt("Enter Text"); | |
clearOptions(); | |
var textbox = new fabric.Textbox(str, { | |
left: 50, | |
top: 50, | |
width: 150, | |
fontSize: 20 | |
}); | |
canvas.add(textbox).setActiveObject(textbox); | |
} | |
fonts.unshift("Times New Roman"); | |
document.getElementById("chooseFont").addEventListener("change", function() { | |
if (this.value !== "Times New Roman") { | |
loadAndUse(this.value); | |
} else { | |
canvas.getActiveObject().set("fontFamily", this.value); | |
canvas.requestRenderAll(); | |
} | |
}); | |
function loadAndUse(font) { | |
var myFont = new FontFaceObserver(font); | |
myFont | |
.load() | |
.then(function() { | |
canvas.getActiveObject().set("fontFamily", font); | |
canvas.requestRenderAll(); | |
}) | |
.catch(function(e) { | |
console.log(e); | |
alert("font loading failed " + font); | |
}); | |
} | |
document | |
.getElementById("fontSize-input") | |
.addEventListener("change", function() { | |
changeAttr("fontSize", this.value); | |
}); | |
document | |
.getElementById("fontColor-input") | |
.addEventListener("change", function() { | |
changeAttr("fill", this.value); | |
}); | |
function changeAttr(attr, value) { | |
canvas.getActiveObject().set(attr, value); | |
canvas.requestRenderAll(); | |
} | |
function makeOptions() { | |
for (var i = 0; i < fonts.length; i++) { | |
var a = document.getElementById("chooseFont"); | |
var option = document.createElement("option"); | |
option.value = fonts[i]; | |
option.text = fonts[i]; | |
a.append(option); | |
} | |
} | |
makeOptions(); | |
document.getElementById("fontShadow").addEventListener("change", function(e) { | |
if (e.target.checked) { | |
changeAttr("shadow", "rgba(0,0,0,0.5) 5px 5px 5px"); | |
} else { | |
changeAttr("shadow", "rgba(0,0,0,0),0 0 0"); | |
} | |
}); | |
function clearOptions() { | |
document.getElementById("fontShadow").checked = false; | |
document.getElementById("fontColor-input").value = ""; | |
} | |
document.getElementById("trash").addEventListener("click", function() { | |
canvas.remove(canvas.getActiveObject()); | |
}); | |
document.getElementById("bringFront-btn").addEventListener("click", function() { | |
var items = canvas.getActiveObject() || canvas.getActiveGroup(); | |
if (items) { | |
items.bringForward(); | |
} | |
}); | |
document.getElementById("fontBg-input").addEventListener("change", function(e) { | |
changeAttr("textBackgroundColor", this.value); | |
}); | |
document.getElementById("sendBack-btn").addEventListener("click", function() { | |
var items = canvas.getActiveObject() || canvas.getActiveGroup(); | |
if (items) { | |
items.sendBackwards(); | |
} | |
}); | |
document.getElementById("font-alignLeft").addEventListener("click", function() { | |
changeAttr("textAlign", "left"); | |
}); | |
document | |
.getElementById("font-alignCenter") | |
.addEventListener("click", function() { | |
changeAttr("textAlign", "center"); | |
}); | |
document | |
.getElementById("font-alignRight") | |
.addEventListener("click", function() { | |
changeAttr("textAlign", "right"); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.4/fabric.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.1.0/fontfaceobserver.standalone.js"></script> | |
<script src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url("https://fonts.googleapis.com/css?family=Pacifico|VT323|Quicksand|Inconsolata|Bungee|Permanent+Marker|Monoton|Modak"); | |
.container { | |
margin-top:10px; | |
} | |
.canvas-wrapper { | |
border: solid; | |
box-sizing: border-box; | |
width:100%; | |
height:auto; | |
overflow:hidden; | |
} | |
input[type=color].form-control { | |
padding:0px; | |
height:1.8em; | |
width:1.8em; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment