javascript - 将文本转换为 Canvas 图像，保留格式

Question

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

如果没有，当我的工作进展顺利时，我会将其发布到 github :)

干杯，

艾伦

Answer 1

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

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

• 字体:大小和字体

• textAlign(水平对齐):开始、结束、左、右、居中

• textBaseline(垂直对齐):字母、顶部、悬挂、中间、表意文字、底部

• 描边样式(轮廓颜色的字形):rgba、十六进制、网络颜色名称、渐变

• fillStyle(填充字形的颜色):rgba、十六进制、webcolor 名称、渐变

• 不透明度:设置为 0.00(完全透明)到 1.00(完全不透明)比例

• lineWidth(轮廓笔划的粗细):0.50+

• 转换(缩放和旋转文本)

• 剪切:可以通过定义的路径剪切文本

• 合成(文本和其他绘图的交互):

并且您可以使用context.measureText来获取文本的宽度

您可以使用 canvasElement.toDataURL 将 Canvas 上绘制的文本转换为图像

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>