How to turn a div into an image using Javascript

Question

I'm attempting to create a page that creates a div with two paragraphs, specifically a quote and author. Afterwards, the user can change things like background color, font, font-size, and other attributes. So far everything works good, but then I want to have a save button that turns the div into one image that the user can right-click and save the image. Examples like this include http://www.teacherfiles.com/free_word_art.html and http://cooltext.com/. I looked into some of the script and HTML, but it led me to a dead end. Maybe somebody else can get something out of those? Then I started searching and saw a lot of different answers involving canvas, which I'm new to.

HTML Code:

<head>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<title>Quote It!</title>
<link rel = "stylesheet"
      type = "text/css"
  href = "passext.css" />
<script type = "text/javascript" src = "js2.js"></script>
</head>

<body>
<h1>It's as easy as One...Two...Three!</h1>
<div id = "instructions">
<p style = "text-align:center;">Instructions:</p>
<ol>
<li>Fill out quote and author fields, then press "Create Quote".</li>
<li>Adjust attributes and watch as it updates in real-time!</li>
<li>Click save and it will convert to a versatile image.</li>
</ol>
</div>
<div id = "tips_warnings">
<p style = "text-align:center;">Tips &amp; Warnings:</p>
<ul>
<li>Don't forget to add quotation marks!</li>
<li>Don't forget a dash before the author.</li>
<li>To create a new quote, hit "Reset", and fill out the form.</li>
</ul>
</div>
<form name = "personalize" id = "personalize">
<fieldset class = "person">
  <legend class = "legend">Personalize</legend>
  <p>
<label class = "uinfo">Quote (One you make up or one you know):</label>
  </p>
  <p>
    <textarea id = "quote"
    rows = "10"
    cols = "45"></textarea>
  </p>
  <p>
<label class = "uinfo">Author:</label>
<input type="text"
      id = "write_author"
  name = "author"
  value = "eg. (-Billy Joe)" 
      onclick = "this.value = ''"/>
  </p>
  <p>
<label class = "uinfo">Text Color:</label>
<select id = "selColor" onchange="myFunction()">
  <option value = "#ffffff">White</option>
  <option value = "#000000">Black</option>
  <option value = "#f09dee">Pink</option>
  <option value = "#ff0000">Red</option>
  <option value = "#1e4d0c">Green</option>
  <option value = "#00ff00">Neon Green</option>
  <option value = "#0000ff">Blue</option>
  <option value = "#00ffff">Cyan</option>
  <option value = "#ff00ff">Magenta</option>
  <option value = "#ffff00">Yellow</option>
  <option value = "#cccccc">Grey</option>
</select>
  </p>
  <p>
<label class = "uinfo">Text Style:</label>
<select id = "selStyle" onchange = "myFunction()">
  <option value = "default">None</option>
  <option value = "italic">Italics</option>
  <option value = "underline">Underline</option>
  <option value = "bold">Bold</option>
</select>
  </p>
  <p>
<label class = "uinfo">Background Color:</label>
<select id = "selBack" onchange = "myFunction()">
  <option value = "null">None</option>
  <option value = "#000000">Black</option>
  <option value = "#ff0000">Red</option>
  <option value = "#00ff00">Green</option>
  <option value = "#0000ff">Blue</option>
  <option value = "#00ffff">Cyan</option>
  <option value = "#ff00ff">Magenta</option>
  <option value = "#ffff00">Yellow</option>
  <option value = "#ffffff">White</option>
  <option value = "#cccccc">Grey</option>
</select>
  </p>
  <p>
    <label class = "uinfo">Border:</label>
    <select id = "selBorder" onchange="myFunction()">
  <option value = "none">None</option>
  <option value = "solid">Solid</option>
  <option value = "double">Double</option>
  <option value = "groove">Groove</option>
  <option value = "ridge">Ridge</option>
  <option value = "inset">Inset</option>
  <option value = "outset">Outset</option>
  <option value = "dashed">Dashed</option>
  <option value = "dotted">Dotted</option>
</select>
  </p>
  <p>
<label class = "uinfo">Border Width:</label>
<select id = "selWidth" onchange = "myFunction()">
  <option value = "500px">Large</option>
  <option value = "375px">Medium</option>
  <option value = "250px">Small</option>
</select>
  </p>
  <p>
<label class = "uinfo">Font:</label>
<select id = "selFont" onchange = "myFunction()">
  <option value = "Times New Roman">Times New Roman</option>
  <option value = "Serif">Serif</option>
      <option value = "Sans-Serif">Sans Serif</option>
  <option value = "Fantasy">Fantasy</option>
  <option value = "Monospace">Monospace</option>
  <option value = "Cursive">Cursive</option>
</select>
  </p>
  <p>
<label class = "uinfo">Font Size:</label>
<select id = "selSize" onchange = "myFunction()">
  <option value = "105%">13pt</option>
  <option value = "120%">14pt</option>
  <option value = "130%">15pt</option>
  <option value = "140%">16pt</option>
      <option value = "150%">18pt</option>
</select>
  </p>
  <p class = "create_quote">
    <input type = "button"
  value = "Create Quote"
  onclick = "myFunction()"/>
  <script type = "text/javascript" src = "js2.js"></script>
    <input type = "reset"/>
  </p>
</fieldset>
</form>
<canvas id = "blank">
  <p id = "blank1"></p>
  <p id = "author"></p>
</canvas>
<input type = "button"
  id = "save"
  value = "Save"
  onclick = "saveFuction()"/>
<script type = "text/javascript" src = "js2.js"></script>
</body>
</html>

Javascript Code:

function myFunction(){
var quote, quote1, fsize, fsize1, fColor, fcolor1, bcolor, bcolor1, font, font1, width, width1, border, border1, author, author1, author2, format, fstyle, fstyle1;
format = document.getElementById("blank");
var context = format.getContext("2d");
quote=document.getElementById("quote");
quote1=quote.value;
outPut = document.getElementById("blank1");
if (quote1 != "") {
  outPut.innerHTML = quote1;
} else {
  alert("You need to enter a quote!");
}

author = document.getElementById("write_author");
author1 = author.value;
author2 = document.getElementById("author")
if (author1 == "" || author1 == "eg. (-Billy Joe)") {
  alert("Who wrote this?");
} else {
  author2.innerHTML = author1;
}

fcolor = document.getElementById("selColor");
fcolor1 = fcolor.value;
format.style.color=(fcolor1);

fstyle = document.getElementById("selStyle");
fstyle1 = fstyle.value;
if (fstyle1 == "italic") {
  format.style.fontStyle=("italic");
  format.style.textDecoration=("");
  format.style.fontWeight=("");
} else if (fstyle1 == "underline"){
    format.style.textDecoration=("underline");
    format.style.fontStyle=("");
    format.style.fontWeight=("");
  } else if (fstyle1 == "bold") {
      format.style.fontWeight=("bold");
format.style.textDecoration=("");
format.style.fontStyle = ("");
    } else if (fstyle1 == "default") {
  format.style.fontWeight=("");
  format.style.textDecoration=("");
  format.style.fontStyle = ("");
}

bcolor = document.getElementById("selBack");
bcolor1 = bcolor.value;
format.style.backgroundColor=(bcolor1);

border = document.getElementById("selBorder");
border1 = border.value;
format.style.border=( border1);
if (border1 == "dashed") {
  format.style.borderWidth=("3px");
} else {
  format.style.borderWidth=("5px");
}

width = document.getElementById("selWidth");
width1 = width.value;
format.style.width=(width1);

if (width1 == "375px") {
  document.getElementById("blank").style.position = "absolute";
  document.getElementById("blank").style.left = "962.5px";
}else if (width1 == "250px") {
  document.getElementById("blank").style.position = "absolute";
  document.getElementById("blank").style.left = "1025px";
}else if (width1 == "500px") {
  document.getElementById("blank").style.position = "absolute";
  document.getElementById("blank").style.left = "900px";
}
font = document.getElementById("selFont");
font1 = font.value;
format.style.fontFamily=(font1);

fsize = document.getElementById("selSize");
fsize1 = fsize.value;
format.style.fontSize=(fsize1);
}

function saveFunction(){
  format.location.href = format.toDataURL();
}

Any help would be appreciated.

If all the other answers use a canvas then it's for good reason. You can't do it on the client in any other way unless you screenshot the browser — Bojangles
– Bojangles, Commented Jul 28, 2013 at 20:34
How would you do that? Any answers concerning canvas were vague. Do you have a link or anything? — Time
– Time, Commented Jul 28, 2013 at 20:51

user2337191 · Accepted Answer · 2013-07-28 23:33:02Z

2

Here is some stuff that you can use in your project. See the examples, it can be help. That script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. I hope you make it.

http://html2canvas.hertzen.com/

and here some examples

http://experiments.hertzen.com/jsfeedback/

answered Jul 28, 2013 at 23:33

user2337191

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to turn a div into an image using Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related