Fabric poster maker

fabric-poster-maker.markdown

Fabric poster maker

mock up poster maker using fabric.js and google fonts.

A Pen by Rhys on CodePen.

License.

index.html

<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>

script.js

// 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");
  });

scripts

<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>

style.css

@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;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />