繁体   English   中英

如何从画布和文本区域创建图像

[英]How to create an image from a canvas and a textarea

我有一个画布,并且在画布上方有一个文本区域:

<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。

任何人都有想法或经验吗?

以下是在现有画布底部添加标题的方法:

创建画布的副本,并将文本区域文本附加到副本上。

在此处输入图片说明

  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> 

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM