Contents of div to clipboard as an image?

Question

Here's an example of what I want: http://gumonshoe.net/magic/card/?card=620

I have a website that blends together data elements with images. It actually goes so far as to apply masking effects to the image based on some of those elements. The result is a series of rather unique graphical cards that I'd like users to be able to keep an image of. An export of sorts.

Unfortunately, as far as I can tell this isn't possible, but I'm hoping one of you can help me. I'd like users to be able to click a button to get a screen shot of the content they are viewing. I have a single div element that contains all of the objects.

I've considered trying to pre-render the images in PHP or using canvas the entire way, but my main problem is this: Determining whether text is overflowing a box is font dependent and a lot of work. Since I don't use a font with monotype characters, like courier new, I really have no idea how much space the words are going to take up in canvas. There also doesn't appear to be a way to measure the height and width of the text you putting in the canvas. Or if there is, I just haven't found the documentation (or its been updated since last I checked).

I'm willing to try a few different things, even, possibly creating a plug in my users could install that would be capable of doing this for them. But the ideal solution would be to have a way for javascript to do this.

Answer 1

You can use Canvas to your create cards by combining your images and text

The code below measures the text-height of whatever font-size and font-face you supply. Then it word wraps your text inside card width you specify.

After you've designed the card for your user, you can let the user save your card by displaying the card as a png image in an html img tag…here's how:

// 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;

在此处输入图片说明

Here is code and a 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>

Contents of div to clipboard as an image?

Question

1 answers

solution1
1 ACCPTED 2013-03-25 03:52:32

Contents of div to clipboard as an image?

Question

1 answers

solution1 1 ACCPTED 2013-03-25 03:52:32

solution1
1 ACCPTED 2013-03-25 03:52:32