Browser Based Sample not working

villanus commented 7 years ago

The file /test/browser.html is not working.

The url for browser.js referenced in the browser sample is wrong.
Tried browser.js is but it throws error on line 7 import TextToSVG from '../src';

shrhdk commented 7 years ago

Hi @villanus,

Please try npm run build to get transpiled code.

villanus commented 7 years ago

Do I need to browserify it after?
Is it possible for you to do an update with a working web version?

I am on a windows asp setup and running node on server is not an option

Thanks

shrhdk commented 7 years ago

Do I need to browserify it after?

No, you just need npm run build

I tried /test/browser.html, and it worked correctly.

This is my steps.

$ node -v
v6.9.4
$ git clone https://github.com/shrhdk/text-to-svg.git
$ cd text-to-svg
$ npm install
$ npm run build

after this

Open browser.html
Click load button and see success message.
Click getSVG button

SimoneMSR commented 7 years ago

Is it possible to use text-to-svg without gulp? Actually I would like to use it bundling with browserify

villanus commented 7 years ago

It did not work for me.

shrhdk commented 7 years ago

@SimoneMSR Yes, my test code for web browser also using Browserify.

Please refer the following task:

https://github.com/shrhdk/text-to-svg/blob/b4a77854f907a0c61228c056f711ba0dfd5c0196/gulpfile.babel.js#L51

shrhdk commented 7 years ago

@villanus

I tried with Safari, Chrome and Firefox on macOS Sierra, and it works correctly.

Could you tell me your environment?

Have you seen the success! message after font loading? It takes few minutes to load the font in narrow band.

SimoneMSR commented 7 years ago

@shrhdk thanks for your reply. How do I use that script, I have included in my main.js the row

require("text-to-svg/build/test/browser.js")

but it prompt an error: Cannot find module './path' from folder

Where am I wrong? I have also used concatenify like this

var concatenify = require('concatenify');
concatenify("main.js");
concatenify("text-to-svg/build/test/browser.js");

...but nothing.

SimoneMSR commented 7 years ago

Even the command npm run build does not work. It says

no gulp file

I have node v 7.0.0

villanus commented 7 years ago

Never worked for me either but I am on node 4. Maybe you can build the web version and do a update to the code?

pyjack commented 5 years ago

How run text-to-svg on browser?

shrhdk commented 5 years ago

Hi @pyjack,

Please try the following steps.

Build the code in the project root directory.

$ npm install
$ npm run build

Open test/browser.html with Web Browser.

ikoruk commented 5 years ago

It still does not work, path is not defined in browsers, only in node.

natirivero commented 1 year ago

I've Installed it like @shrhdk said and it works, It provides an app with a simple UI, and I can now use it to convert text to svg from the browser.

But I was not able to make it work on my own environment, l tried to run it on a React App following the docs, but also got the path Issue and It was very frustrating. It said something about Webpack not including certain node components by default anymore, I don't know, I guess I'm not smart enough... I wish there were codepen examples and/or tutorials in the docs.

natirivero commented 1 year ago

<script type="module">
  import TextToSVG from 'https://cdn.jsdelivr.net/npm/text-to-svg@3.1.5/+esm';

  // First argument is URL on web browsers, but it is file path on Node.js.
  TextToSVG.load(
    'https://rawgit.com/shrhdk/text-to-svg/master/fonts/ipag.ttf',
    function (err, textToSVG) {
      const svg = textToSVG.getSVG('hello');
      console.log(svg);
    }
  );
</script>

@shrhdk Console: r.load is not a function

shrhdk / text-to-svg

Browser Based Sample not working #24