Generate & Download Image

by Pranab Dey

HTML

<h2 class="heading">Image Generator</h2>
<div class="button">
      <a href="https://phe0nix.github.io/" id="home" class="button">
        <span>Home</span>
      </a>
      <a href="https://github.com/Phe0nix/anymini" id="view-on-github" class="button">
        <span>View on GitHub</span>
      </a>
    </div>
<p>Width: <input type="text" class="width" placeholder="width without extension"></p>
<p>Height: <input type="text" class="height" placeholder="height without extension"></p>
<p>Background: <input type="color" class="bgColor"></p>
<button class="gen">Generate Image</button>
<p class="result">
  <canvas style="display: none" class="block"></canvas>
</p>
<div class="type_and_download_image" style="display: none">
  <p>Image Format:
    <select name="imageType" id="imageType">
	<option value="" disabled selected>Choose a format</option>
	<option value="png">.png</option>
	<option value="jpeg">.jpg</option>
</select>
    <span class="quality" style="display: none">Jpg Quality: 
    <select id="quality_value">
		<option value="" disabled selected>Choose quality</option>
	<option value="low">Low</option>
	<option value="med">Medium</option>
	<option value="high">High</option>
</select>
</span>
  </p>
  <a href="#" class="download">Download</a>
</div>

CSS

body {
  font-family: helvetica;
  font-size: 15px;
	max-width: 600px;
	padding: 10px;
	margin: auto;
	width: 100%;
}

input {
  vertical-align: middle;
}

input[type=text] {
  border: 1px solid lightgrey;
  height: 20px;
  border-radius: 6px;
  padding: 5px 10px;
}

select {
  border: 1px solid lightgrey;
  border-radius: 6px;
  padding: 5px 10px;
}
#imageType{
	margin-bottom: 10px;
}

input[type=text]:focus {
  border: 1px solid #32809a;
  outline: 0;
  height: 20px;
  border-radius: 6px;
  padding: 5px 10px;
}

input[type=color] {
  padding: 0;
  height: 30px;
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: 0;
  width: 60px;
}
input[type=color]:focus {
  border: 1px solid #32809a;
}
.heading {
    text-align: center;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}
button,
a.download {
  border: 1px solid lightgrey;
  padding: 8px 12px;
  background: linear-gradient(to bottom, white 30%, #e9e9e9 80%);
  cursor: pointer;
	text-decoration: none;
  border-radius: 6px;
  font-size: 15px;
}

button:active,
a.download:active {
  outline: 0;
  background: linear-gradient(to bottom, #e9e9e9 40%, #fff 80%);
}

.result span {
  display: block;
  background: #e04343;
  padding: 12px 13px;
  color: #fff;
  line-height: 1.5;
}
.button{
  text-align: center;
  margin-bottom: 20px;
}
.button a.button {
    display: inline-block;
    padding: 12px 30px;
    margin-right: 14px;
    font-size: 15px;
  text-decoration: none;
    font-weight: bold;
    line-height: 25px;
    color: #303030;
    background: #fdfdfd;
    background: -moz-linear-gradient(top, #fdfdfd 0%, #f2f2f2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #f2f2f2));
    background: -webkit-linear-gradient(top, #fdfdfd 0%, #f2f2f2 100%);
    background: -o-linear-gradient(top, #fdfdfd 0%, #f2f2f2 100%);
    background: -ms-linear-gradient(top, #fdfdfd 0%, #f2f2f2 100%);
    background: linear-gradient(top,...

JavaScript

var w = document.querySelector(".width"),
  h = document.querySelector(".height"),
  r = document.querySelector(".result"),
  bg = document.querySelector(".bgColor"),
  block,
  genBtn = document.querySelector(".gen"),
  dl = document.querySelector(".download"),
  canva = document.querySelector(".block"),
  typeAndDownloadImage = document.querySelector(".type_and_download_image"),
  imageType = document.querySelector("#imageType"),
  quality = document.querySelector(".quality"),
  quality_value = document.querySelector("#quality_value"),
  c, url;

function createCanvas() {
  if (w.value === '' || w.value.match(/\s{1,}/)) {
    r.innerHTML = `<span>Please insert width of the image.</span>`;
    w.focus();
    typeAndDownloadImage.style.display = "none";
  } else if (isNaN(w.value)) {
    r.innerHTML = `<span>"${w.value}" is not a correct width value. Try - 45 / 50 / 85. kiddo!!</span>`;
    w.focus();
    typeAndDownloadImage.style.display = "none";
  } else if (h.value === '' || h.value.match(/\s{1,}/)) {
    r.innerHTML = `<span>Please insert height of the image.</span>`;
    h.focus();
    typeAndDownloadImage.style.display = "none";
  } else if (isNaN(h.value)) {
    r.innerHTML = `<span>"${h.value}" is not a correct height value. Try - 45 / 50 / 85. kiddo!!</span>`;
    h.focus();
    typeAndDownloadImage.style.display = "none";
  } else {
    r.innerHTML = "";
    canva.style.display = "block";
    canva.setAttribute("width", parseInt(w.value) + "px");
    canva.setAttribute("height", parseInt(h.value) + "px");
    c = canva.getContext("2d");
    c.fillStyle = bg.value;
    c.fillRect(0, 0, w.value, h.value);
		c.font= w.value/15 + "px Helvetica";
		c.fillStyle = "#fff";
		c.textAlign = "center";
		c.fillText(""+ w.value +"px / "+ h.value +"px", (w.value/2), (h.value/2));
    r.append(canva);
    typeAndDownloadImage.style.display = "block";
    url = canva.toDataURL();
  }
}

imageType.addEventListener("input", function() {
  if (this.value === "png") {
  ...