[英]How to create an image from a canvas and a textarea
I have a canvas, and a textarea that resides on top of the canvas: 我有一个画布,并且在画布上方有一个文本区域:
<canvas id="ideaBox" width="400" height="400"></canvas>
<textarea id="ideaTextArea" rows="15"></textarea>
I want to capture the contents of the box, including the textarea, into an image. 我想将包括文本区域在内的框内容捕获到图像中。 Is that possible? 那可能吗?
I tried using: 我尝试使用:
var MIME_TYPE = "image/png";
var imgURL = canvas.toDataURL(MIME_TYPE);
but it omits the text, because the text is in the textarea, not in the canvas. 但它会省略文本,因为文本在文本区域中,而不是在画布中。
I also tried using html2canvas ( http://html2canvas.hertzen.com/ ), but you can only pass one element into the script, so I can't pass both the canvas and the textarea. 我也尝试使用html2canvas( http://html2canvas.hertzen.com/ ),但您只能将一个元素传递到脚本中,因此无法同时传递canvas和textarea。
Anyone have ideas, or experience with this? 任何人都有想法或经验吗?
Here's how to append a caption to the bottom of an existing canvas: 以下是在现有画布底部添加标题的方法:
Create a copy of the canvas with the textarea text appended to the copy. 创建画布的副本,并将文本区域文本附加到副本上。
Size the new canvas to the original canvas width but to the original canvas height plus the wrapped text height. 将新画布的大小调整为原始画布的宽度,但调整为原始画布的高度加上包裹的文字的高度。
newCanvas.width=originalCanvas.width; newCanvas.height=originalCanvas.height+wrappedTextHeight;
DrawImage
the original canvas contents to the new canvas. DrawImage
将原始画布内容添加到新画布。 .toDataURL
. 使用.toDataURL
从新画布创建新图像。 Example code and a Demo: 示例代码和演示:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.