如何在画布上绘制两段 div答案

【问题标题】：How to draw a two paragraph div onto a canvas如何在画布上绘制两段 div
【发布时间】：2013-07-29 13:55:48
【问题描述】：

我正在尝试将整个两段 div 绘制到画布上。在不必使用所有画布标签并画出每一行的情况下，我主要在画布上获取 div 时遇到问题。我认为这是可能的，如果不是，请告诉我。我是 Javascript 和 Php 的中级，对 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();
}

任何帮助将不胜感激。

【问题讨论】：

标签： javascript html canvas xhtml merge

【解决方案1】：

您不能直接在画布上绘制 html 元素。

您必须学习/使用画布绘图命令。

然而，有些人已经成功地使用了这个在画布上模拟 html 元素的库：

http://html2canvas.hertzen.com/

出于安全原因，您可能还想知道 canvas.toDataURL 不允许您将图像数据保存到用户的本地文件系统。

或者，

那里有很多屏幕抓取工具。 SnagIt 不错：http://www.techsmith.com/snagit.html

【讨论】：

好的，我找到了link。我认为这应该可以解决我的问题，但我无法让它首先工作。
是的，这是一个众所周知的 hack。问题是它也是一个安全漏洞，所以浏览器已经关闭了它。 Firefox 现在可能仍然允许它——最近没有检查过。认为这是一个死胡同。
你确定我不能以某种方式使用它吗？这似乎是我问题的完美解决方案。

【解决方案2】：

查看 html2Canvas，正如 markE 所说，它需要一个 dom 元素并将其转换为画布，然后您可以将该画布绘制到另一个画布上，如下所示：

http://html2canvas.hertzen.com/

var domElement = document.getElementById('myElementId');
html2canvas(domElement, {
    onrendered: function (domElementCanvas) {
        var canvas = document.createElement('canvas');
        canvas.getContext('2d').drawImage(domElementCanvas, 0, 0, 100, 100);

        // do something with canvas
    }
}

【讨论】：