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

Question

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

如果没有，我会后我的工作github上时，它的进一步沿着:)

干杯，

艾伦

Answer 1

画布本身可以直接绘制简单地格式化文本。

这些性质可以被用于影响文本如何绘制在画布上

• 字体：大小& fontface

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

• textBaseline（垂直取向）：字母，顶部，挂，中，表意，底部

• 的StrokeStyle（颜色勾勒出的字形）：RGBA，六角，webcolor名，梯度

• 的FillStyle（颜色填充的字形）：RGBA，六角，webcolor名，梯度

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

• lineWidth（粗划行程的厚度）：0。50+

• 变换（刻度&旋转文本）

• 剪切：文本可以由下式定义的路径

• 合成（文本和其他附图的相互作用）被裁剪：

而你c一个使用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>