написание текста на изображении с помощью npm node-canvas на пользовательском языке - PullRequest
Новая
       30

написание текста на изображении с помощью npm node-canvas на пользовательском языке

0 голосов
/ 05 июня 2018

Я пытаюсь написать изображение на языке хинди.Я использую библиотеку node-canvas.Есть некоторые проблемы с моим выводом.Кто-нибудь может мне помочь? 

const { createCanvas, loadImage, registerFont} = require('canvas')
const canvas = createCanvas(400, 400)
const ctx = canvas.getContext('2d')

var str= "यह.  मिसिसिपी   है";
console.log(str);
loadImage('missisippi.jpg').then((image) => {
  console.log(image);
  ctx.drawImage(image, 0 , 0, 400, 400);
  ctx.fillText(str,100,40);
  var body = canvas.toDataURL(),
  base64Data = body.replace(/^data:image\/png;base64,/,""),
  binaryData = new Buffer(base64Data, 'base64').toString('binary');

    require("fs").writeFile("out.png", binaryData, "binary", function(err) {
      console.log(err); // writes out file without error, but it's not a valid image
    })

    // console.log('<img src="' + canvas.toDataURL() + '" />')
})

Это изображение на выходе. Вы можете видеть, что gram грамматически неверен. (Если вы знакомы с хинди.

Я тоже пробовал то же самое с npm-gm. В этом я тоже столкнулся с той же проблемой. Может кто-нибудь помочь мне в этом вопросе?

Как можно написать текст на изображении с помощью собственного шрифта?

1 Ответ

0 голосов
/ 03 декабря 2018

Следующее работает нормально для меня - 

var fs = require('fs')
var path = require('path')
var Canvas = require('canvas')

function fontFile (name) {
  return path.join(__dirname, '/fonts/', name)
}

Canvas.registerFont(fontFile('ARBLI___0.ttf'), {family: 'ARBLI___0'})

var canvas = Canvas.createCanvas(7100, 3500)
var ctx = canvas.getContext('2d')

var Image = Canvas.Image;
var img = new Image();
img.src = 'input/DOIT_Art_Size.jpg';

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

ctx.fillStyle = 'white';
ctx.textAlign = 'center';

ctx.font = '150pt ARBLI___0'
ctx.fillText('यह मिसिसिपी है',3900, 1700)

canvas.createPNGStream().pipe(fs.createWriteStream(path.join(__dirname, 'output/font.png')))
canvas.createJPEGStream().pipe(fs.createWriteStream(path.join(__dirname, 'output/font.jpg')))

Моя версия узла - 6.11.2.Модуль Canvas - 2.0.0-alpha.16.Размер моего входного изображения 7100 * 3500 пикселей.

...