Question

以下是我想要的示例：http://gumonshoe.net/magic/card/?card=620

我有一个将数据元素与图像混合在一起的网站。它实际上甚至基于其中一些元素将掩蔽效果应用于图像。结果是一系列相当独特的图形卡，我希望用户能够保留图像。出口各种各样。

不幸的是，据我所知，这是不可能的，但我希望你们中的一个可以帮助我。我希望用户能够点击按钮获取他们正在查看的内容的屏幕截图。我有一个包含所有对象的div元素。

我已经考虑过尝试在PHP中预渲染图像或者使用画布整个方式，但我的主要问题是：确定文本是否溢出一个框是字体依赖和很多工作。由于我没有使用带有单色字符的字体，比如courier new，我真的不知道这些字会占用多少空间。似乎也没有办法测量放在画布中的文本的高度和宽度。或者，如果有，我只是没有找到文档（或自上次检查后它已更新）。

我愿意尝试一些不同的东西，甚至可能在我的用户中创建一个插件，可以为他们安装。但理想的解决方案是为javascript提供一种方法。

Answer 1

您可以通过合并图片和文字

将Canvas用于创建卡片

下面的代码测量您提供的任何font-size和font-face的文本高度。然后它将您的文字包装在您指定的卡片宽度内。

在为用户设计卡片后，您可以让用户通过在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;

enter image description here

这是代码和小提琴：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>

作为图像的div到剪贴板的内容？

1 个答案: