如何使用 Javascript 将 div 转换为图像
Posted
技术标签:
【中文标题】如何使用 Javascript 将 div 转换为图像【英文标题】：How to turn a div into an image using Javascript 【发布时间】：2013-07-27 19:59:54 【问题描述】：我正在尝试创建一个页面，该页面创建一个包含两个段落的 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 & 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();
任何帮助将不胜感激。
【问题讨论】：
如果所有其他答案都使用画布，那么这是有充分理由的。除非您对浏览器进行截图，否则您无法以任何其他方式在客户端上执行此操作 你会怎么做？任何关于画布的答案都是模糊的。有链接吗？ 【参考方案1】：这里有一些你可以在你的项目中使用的东西。请参阅示例，这可能会有所帮助。该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。我希望你能做到。
http://html2canvas.hertzen.com/
这里有一些例子
http://experiments.hertzen.com/jsfeedback/
【讨论】：
以上是关于如何使用 Javascript 将 div 转换为图像的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 jquery 将 Div 数据转换为 json 格式
如何在不使用画布的情况下将整个 div 数据转换为图像并将其保存到目录中？