Question

我正在尝试创建一个页面，用两段创建一个div，特别是引用和作者。之后，用户可以更改背景颜色，字体，字体大小和其他属性。到目前为止一切都很好，但后来我想要一个保存按钮，将div转换为一个图像，用户可以右键单击并保存图像。这样的示例包括http://www.teacherfiles.com/free_word_art.html和http://cooltext.com/。我查看了一些脚本和HTML，但它让我陷入了死胡同。也许其他人可以从中得到一些东西？然后我开始搜索并看到很多不同的答案，包括画布，我是新手。

HTML代码：

<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代码：

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();
}

任何帮助将不胜感激。

Answer 1

以下是您可以在项目中使用的一些内容。看到这些例子，可以提供帮助。该脚本允许您直接在用户浏览器上截取网页或部分网页的“屏幕截图”。我希望你能成功。

http://html2canvas.hertzen.com/

这里有一些例子

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

如何使用Javascript将div转换为图像

1 个答案: