这是我想要的示例：http://gumonshoe.net/magic/card/?card=620
我有一个将数据元素和图像融合在一起的网站。实际上，它甚至可以根据其中一些元素对图像应用遮罩效果。结果是我希望用户能够保留图像的一系列相当独特的图形卡。各种出口。
不幸的是，据我所知这是不可能的，但我希望你们中的一个能帮助我。我希望用户能够单击按钮以获取他们正在查看的内容的屏幕截图。我有一个包含所有对象的div元素。
我已经考虑过尝试使用PHP预先渲染图像或使用画布全程渲染图像，但是我的主要问题是：确定文本是否溢出框取决于字体和大量工作。由于我不使用单字型字体，例如courier new，所以我真的不知道这些单词将在画布上占用多少空间。似乎也没有一种方法可以测量放置在画布中的文本的高度和宽度。或者，如果有，我只是没有找到该文档（或者自上次检查以来已对其进行了更新）。
我愿意尝试一些不同的方法，甚至可能在我的用户中创建一个插件即可安装，从而能够为他们完成此操作。但是理想的解决方案是为javascript提供一种实现此目的的方法。
最佳答案
您可以通过合并图像和文字来使用Canvas来创建卡片
下面的代码测量您提供的任何字体大小和字体样式的文本高度。然后，它会将您的文字自动换成您指定的卡片宽度。
为用户设计卡片后，可以通过在html img标签中将卡片显示为png图像的方式，让用户保存您的卡片，方法如下：
// html image element where the card will be displayed in PNG format
<p>Right-click the card image below to save it</p>
<img id="card" >
// javascript: save canvas image to a dataURL and then
// put that dataURL into the html image tag so the user can see/save the card
var dataURL = canvas.toDataURL();
document.getElementById('card').src = dataURL;
这是代码和小提琴：http://jsfiddle.net/m1erickson/RtWwF/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.onload=function(){
canvas.width=img.width;
canvas.height=img.height;
ctx.drawImage(img,0,0);
var text="Whenever Cowardly Lion becomes the target of a spell or ability exile Cowardly Lion; or whenever another creature enters the battlefield exile Cowardly Lion. Then you may return it to the battlefield.";
wrapText(ctx,text,19,330,300,"14px Verdana");
text="You're right, I am a coward! I haven't any courage at all. I even scare myself.";
wrapText(ctx,text,19,425,300,"italic 14px Verdana");
}
img.src="http://dl.dropbox.com/u/139992952/stackoverflow/card.png";
function wrapText(context, text, x, y, maxWidth, fontSizeFace) {
var words = text.split(' ');
var line = '';
var lineHeight=measureTextHeight(fontSizeFace);
// +40% = lead
lineHeight=parseInt(lineHeight*1.4);
context.font=fontSizeFace;
for(var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if(testWidth > maxWidth) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
}
else {
line = testLine;
}
}
context.fillText(line, x, y);
}
function measureTextHeight(fontSizeFace) {
// create a temp canvas
var width=1000;
var height=60;
var canvas=document.createElement("canvas");
canvas.width=width;
canvas.height=height;
var ctx=canvas.getContext("2d");
// Draw the entire a-z/A-Z alphabet in the canvas
var text="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
ctx.save();
ctx.font=fontSizeFace;
ctx.clearRect(0,0,width,height);
ctx.fillText(text, 0, 40);
ctx.restore();
// Get the pixel data from the canvas
var data = ctx.getImageData(0,0,width,height).data,
first = false,
last = false,
r = height,
c = 0;
// Find the last line with a non-transparent pixel
while(!last && r) {
r--;
for(c = 0; c < width; c++) {
if(data[r * width * 4 + c * 4 + 3]) {
last = r;
break;
}
}
}
// Find the first line with a non-transparent pixel
while(r) {
r--;
for(c = 0; c < width; c++) {
if(data[r * width * 4 + c * 4 + 3]) {
first = r;
break;
}
}
// If we've got it then return the height
if(first != r) return last - first;
}
// error condition if we get here
return 0;
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>