1

这是我想要的一个例子：http ://gumonshoe.net/magic/card/?card=620

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

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

我考虑过尝试在 PHP 中预渲染图像或全程使用画布，但我的主要问题是：确定文本是否溢出框取决于字体并且需要大量工作。由于我不使用带有单型字符的字体，例如 courier new，所以我真的不知道这些单词将在画布中占用多少空间。似乎也没有一种方法可以测量您放入画布的文本的高度和宽度。或者，如果有，我只是没有找到文档（或者自从我上次检查以来它已经更新）。

我愿意尝试一些不同的东西，甚至，可能会在我的用户中创建一个可以安装的插件，它能够为他们执行此操作。但理想的解决方案是让 javascript 有办法做到这一点。

4

1 回答 1

1

您可以通过组合图像和文本来使用 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>
于 2013-03-25T03:52:32.913 回答