happypeter
commented
7 years ago 把任意字体的汉字转换成 svg 图（ potrace + canvas + .ttf )
基本思路，先把自定制的字体写到画布上，然后利用 canvas.toDataUrl 转换成 png 图，然后用 potrace 把 png 转换成 svg 矢量图
第一步：canvas 转出 png
sj.ttf 文件托管到了：https://coding.net/u/happypeter/p/logomind/attachment/default
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@font-face {
font-family: 'MyWebFont';
src: url('fonts/sj.ttf') format('truetype')
}
</style>
</head>
<body>
<h1>你好吗</h1>
<canvas id="canvas" width="500" height="400"></canvas>
<script>
console.log('hello ...')
var ctx = document.getElementById('canvas').getContext('2d');
var canvas = document.getElementById('canvas')
var kitty = new Image();
kitty.src = 'http://o86bpj665.bkt.clouddn.com/posters/meteor-react-bird.png';
kitty.onload = function(){
console.log('onload...')
ctx.font = '68px MyWebFont';
ctx.fillStyle = 'green';
ctx.textBaseline = 'top';
ctx.fillText ('你好', 0, 270);
var d=canvas.toDataURL("image/png");
console.log('dddd', d)
document.write("<img src='"+d+"' alt='from canvas'/>");
};
</script>
</body>
</html>这样可以得到 png 文件。
使用 potrace + imagemagick 进行转换的脚本
convert -alpha remove $1.png pgm: \
| mkbitmap -f 32 -t 0.4 - -o - \
| potrace --svg -o output.svg
# http://eprev.org/2015/05/27/converting-png-to-svg/
给 canvas 填充背景色
https://codepen.io/happypeter/pen/vmVQRV