使用 npm node-canvas 以自定义语言在图像上写入文本

Question

我正在尝试用印地语在图像上书写。我正在使用节点画布库。我的输出有一些问题。有人能帮我吗 ？

\n\n

const { createCanvas, loadImage, registerFont} = require(\'canvas\')\nconst canvas = createCanvas(400, 400)\nconst ctx = canvas.getContext(\'2d\')\n\nvar str= "\xe0\xa4\xaf\xe0\xa4\xb9.  \xe0\xa4\xae\xe0\xa4\xbf\xe0\xa4\xb8\xe0\xa4\xbf\xe0\xa4\xb8\xe0\xa4\xbf\xe0\xa4\xaa\xe0\xa5\x80   \xe0\xa4\xb9\xe0\xa5\x88";\nconsole.log(str);\nloadImage(\'missisippi.jpg\').then((image) => {\n  console.log(image);\n  ctx.drawImage(image, 0 , 0, 400, 400);\n  ctx.fillText(str,100,40);\n  var body = canvas.toDataURL(),\n  base64Data = body.replace(/^data:image\\/png;base64,/,""),\n  binaryData = new Buffer(base64Data, \'base64\').toString(\'binary\');\n\n    require("fs").writeFile("out.png", binaryData, "binary", function(err) {\n      console.log(err); // writes out file without error, but it\'s not a valid image\n    })\n\n    // console.log(\'<img src="\' + canvas.toDataURL() + \'" />\')\n})\n

\n\n

这是输出图像。可以看到\xe0\xa4\xae\xe0\xa4\xbf\xe0\xa4\xb8\xe0\xa4\xbf\xe0\xa4\xb8\xe0\xa4\xbf\xe0\xa4\xaa\xe0\xa5 \x80 在语法上是错误的。（如果你熟悉印地语。

\n\n

我也用 npm-gm 尝试过同样的事情。我也面临同样的问题。有人可以帮我解决这个问题吗？

\n\n

如何使用自定义字体在图像上书写文本？

\n

Answer 1

以下对我来说效果很好 -

\n\n

var fs = require('fs')\nvar path = require('path')\nvar Canvas = require('canvas')\n\nfunction fontFile (name) {\n  return path.join(__dirname, '/fonts/', name)\n}\n\nCanvas.registerFont(fontFile('ARBLI___0.ttf'), {family: 'ARBLI___0'})\n\nvar canvas = Canvas.createCanvas(7100, 3500)\nvar ctx = canvas.getContext('2d')\n\nvar Image = Canvas.Image;\nvar img = new Image();\nimg.src = 'input/DOIT_Art_Size.jpg';\n\nctx.clearRect(0, 0, canvas.width, canvas.height);\nctx.drawImage(img, 0, 0, canvas.width, canvas.height);\n\nctx.fillStyle = 'white';\nctx.textAlign = 'center';\n\nctx.font = '150pt ARBLI___0'\nctx.fillText('\xe0\xa4\xaf\xe0\xa4\xb9 \xe0\xa4\xae\xe0\xa4\xbf\xe0\xa4\xb8\xe0\xa4\xbf\xe0\xa4\xb8\xe0\xa4\xbf\xe0\xa4\xaa\xe0\xa5\x80 \xe0\xa4\xb9\xe0\xa5\x88',3900, 1700)\n\ncanvas.createPNGStream().pipe(fs.createWriteStream(path.join(__dirname, 'output/font.png')))\ncanvas.createJPEGStream().pipe(fs.createWriteStream(path.join(__dirname, 'output/font.jpg')))\n

\n\n

\n

我的节点版本是6.11.2。\n 画布模块是 2.0.0-alpha.16。\n 我的输入图像尺寸是 7100*3500 像素。

\n

\n