将文本转换为画布图像，保留格式

Question

我正在构建一个需要将文本转换为图片的Chrome扩展程序，并保留格式。看起来这可以使用window.getSelection的结果，但是对于编写所有边缘情况也会有点麻烦。一直在网上寻找一个现有的解决方案但是没有人看到过 - 有人知道这种技术的存在吗？

如果没有，我会将工作发布到github进一步发布：）

干杯，

艾伦

Answer 1

Canvas本身可以直接绘制简单格式化的文本。

这些属性可用于影响在画布上绘制文本的方式

• font ：size＆amp; fontface

• textAlign （水平对齐）：开始，结束，左，右，中心

• textBaseline （垂直对齐）：字母，顶部，悬挂，中间，表意，底部

• strokeStyle （描绘字形的颜色）：rgba，hex，webcolor名称，渐变

• fillStyle （填充字形的颜色）：rgba，hex，webcolor名称，渐变

• 不透明度：设置为0.00（完全透明）至1.00（完全不透明）比例

• lineWidth （大纲描边的粗细）：0.50 +

• 转换（缩放和旋转文字）

• 剪辑：文字可以按照定义的路径进行剪裁

• 合成（文字和其他图纸的互动）：

您可以使用context.measureText来获取文字的宽度

您可以使用canvasElement.toDataURL

将画布上绘制的文本转换为图像

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

ctx.font='60px verdana';
ctx.textAlign='center';
ctx.textBaseline='middle';
ctx.strokeStyle='black';
ctx.fillStyle='green';
ctx.lineWidth=2;

ctx.translate(100,50);
ctx.rotate(-Math.PI/16);
ctx.fillText("Earth",0,0);
ctx.strokeText("Earth",0,0);
ctx.setTransform(1,0,0,1,0,0);

ctx.translate(275,50);
ctx.rotate(Math.PI/16);
ctx.fillText("quake",0,0);
ctx.strokeText("quake",0,0);
ctx.setTransform(1,0,0,1,0,0);

var textAsImage=new Image();
textAsImage.onload=function(){
  document.body.appendChild(textAsImage);
}
textAsImage.src=canvas.toDataURL();

body{ background-color:white; padding:10px; }
#canvas{border:1px solid red;}

<p>Simple text drawn on a canvas element</p>
<canvas id="canvas" width=400 height=150></canvas>
<p>The canvas converted to an image</p>