这是我想要的示例:http://gumonshoe.net/magic/card/?card=620
我有一个将数据元素与图像混合在一起的网站。实际上，它甚至可以根据其中一些元素对图像应用 mask 效果。结果是一系列相当独特的图形卡，我希望用户能够保留它们的图像。某种导出。
不幸的是，据我所知这是不可能的，但我希望你们中的一个能帮助我。我希望用户能够单击一个按钮来获取他们正在查看的内容的屏幕截图。我有一个包含所有对象的 div 元素。
我考虑过尝试在 PHP 中预呈现图像或在整个过程中使用 Canvas ，但我的主要问题是:确定文本是否溢出框取决于字体并且需要大量工作。因为我不使用单字字体，比如 courier new，所以我真的不知道这些文字会在 Canvas 上占用多少空间。似乎也没有办法测量您放入 Canvas 中的文本的高度和宽度。或者如果有，我只是还没有找到文档(或者自上次检查以来它已经更新)。
我愿意尝试一些不同的事情，甚至可能在我的用户可以安装的插件中创建一个能够为他们执行此操作的插件。但理想的解决方案是让 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;
这是代码和 fiddle :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>
关于javascript - div 的内容作为图像到剪贴板？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15605105/