作爲圖像的剪貼板div的內容？

這裏是我想要的一個例子：http://gumonshoe.net/magic/card/?card=620 作爲圖像的剪貼板div的內容？

我有一個網站，數據元素與圖像混合在一起。它實際上甚至可以基於某些元素對圖像應用遮罩效果。其結果是一系列相當獨特的圖形卡，我希望用戶能夠保留圖像。各種出口。

不幸的是，據我所知這是不可能的，但我希望你可以幫我。我希望用戶能夠點擊一個按鈕來獲取他們正在查看的內容的屏幕截圖。我有一個包含所有對象的div元素。

我認爲試圖預渲染的PHP或使用帆布整個路圖像，但我的主要問題是：確定文本是否滿溢的盒子是字體依賴和大量的工作。因爲我不使用與單一型字符的字體，如宋體，我真的不知道的話有多少空間將在畫布佔用。此外，似乎還沒有辦法測量您放入畫布中的文字的高度和寬度。或者如果有的話，我只是沒有找到文件（或從上次檢查後更新過）。

我願意嘗試一些不同的東西，甚至可能創造了我的用戶一個插件可以安裝，這將是能夠這樣做對他們的。但理想的解決方案是有一個JavaScript的方式來做到這一點。

來源

2013-03-24 Kirk

您可以通過合併圖像和文字

下面的代碼衡量字體大小和字體臉你提供任何的文字高度使用畫布您創建的卡。然後它將您的文本包裹在您指定的卡片寬度內。

您所設計的卡爲您的用戶之後，可以讓用戶通過顯示卡在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>

來源

2013-03-25 03:52:32 markE

太謝謝你了！我將不得不嘗試將所有元素加載到畫布中。我假設它很容易把一個PNG作爲一個元素，我已經用帆布生成背景圖像，所以它可能可能過於結合的。非常感謝，我認爲唯一可怕的問題是reallllyyyyyylongstringsfromannoyingusers。 – Kirk 2013-03-26 02:06:53

作爲圖像的剪貼板div的內容？

回答

相關問題