如何從畫布和文本區域創建圖像

Question

我有一個畫布，並且在畫布上方有一個文本區域：

<canvas id="ideaBox" width="400" height="400"></canvas>
<textarea id="ideaTextArea" rows="15"></textarea>

我想將包括文本區域在內的框內容捕獲到圖像中。 那可能嗎？

我嘗試使用：

var MIME_TYPE = "image/png";
var imgURL = canvas.toDataURL(MIME_TYPE);

但它會省略文本，因為文本在文本區域中，而不是在畫布中。

我也嘗試使用html2canvas（ http://html2canvas.hertzen.com/ ），但您只能將一個元素傳遞到腳本中，因此無法同時傳遞canvas和textarea。

任何人都有想法或經驗嗎？

Answer 1

以下是在現有畫布底部添加標題的方法：

創建畫布的副本，並將文本區域文本附加到副本上。

1. 假定必須在原始畫布的寬度內包裹文本，請從文本區域計算包裹文本的高度（請參見下面的示例代碼）。
2. 創建一個新的內存畫布。

3. 將新畫布的大小調整為原始畫布的寬度，但調整為原始畫布的高度加上包裹的文字的高度。

    newCanvas.width=originalCanvas.width; newCanvas.height=originalCanvas.height+wrappedTextHeight; 

4. DrawImage將原始畫布內容添加到新畫布。
5. 在新畫布的底部繪制換行的文本。
6. 使用.toDataURL從新畫布創建新圖像。

示例代碼和演示：

 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; var text='Now is the time for all good men to come to the aid of their country.' var fontsize=14; var fontface='verdana'; // testing: draw something on the canvas ctx.fillStyle='gold'; ctx.fillRect(0,0,cw,ch); ctx.beginPath(); ctx.moveTo(50,50); ctx.lineTo(75,270); ctx.lineTo(100,50); ctx.lineTo(125,270); ctx.lineTo(150,50); ctx.quadraticCurveTo(250,160,150,270); ctx.lineWidth=15; ctx.strokeStyle='purple'; ctx.lineCap='round'; ctx.lineJoin='round'; ctx.stroke(); // append a caption at the bottom of the canvas applyCaption(canvas,text,fontsize,fontface); function applyCaption(origCanvas,text,fontsize,fontface){ // calc the height of the wrapped text var height=wrapText(0,0,text,fontsize,fontface,canvas.width-20); // Create a new canvas // Resize the new canvas same as original canvas // but taller by the text height var c=document.createElement('canvas'); var cctx=c.getContext('2d'); c.width=origCanvas.width; c.height=origCanvas.height+height; // draw the original canvas contents to the new canvas cctx.drawImage(origCanvas,0,0); // draw the wrapped text at the bottom of the new canvas cctx.fillStyle='white'; cctx.fillRect(0,c.height-height,c.width,height); cctx.fillStyle='black'; wrapText(10,c.height-height,text,fontsize,fontface,canvas.width-20,cctx); // create an image from the new canvas var img=new Image(); img.onload=function(){ document.body.appendChild(img); } img.src=c.toDataURL(); } function wrapText(x,y,text,fontsize,fontface,maxwidth,context){ if(!context){ // we're just calculating the wrapped text height // so create a throw-away context to work with var context=document.createElement('canvas').getContext('2d'); } var startingY=y; var words = text.split(' '); var line = ''; var space=''; var lineHeight = fontsize*1.286; context.font = fontsize + "px " + fontface; context.textAlign='left'; context.textBaseline='top' for (var n=0; n<words.length; n++) { var testLine = line + space + words[n]; space=' '; if (context.measureText(testLine).width > maxwidth) { context.fillText(line,x,y); line = words[n] + ' '; y += lineHeight; space=''; } else { line = testLine; } } context.fillText(line, x,y); return(y+lineHeight-startingY); } 

 body{ background-color: ivory; } #canvas{border:1px solid red; } img{border:1px solid lightgray; } 

 <h4>Original canvas & New canvas with appended caption</h4> <canvas id="canvas" width=250 height=300></canvas>