Using the lib from node, browser methods still being called. about node-qrcode HOT 24 CLOSED

@poifox pubished to npm at 0.8.2

from node-qrcode.

I tried the code in node.js only and it did work, but when I try to do the same on react-native the lib goes right ahead and uses the browser.js functions.

I'm using the latest version of qrcode, on react-native 0.43.3 and cli version 2.0.1, node 6.10.2

from node-qrcode.

the blocker on using server.js is that something related to zlib in the js png encoder doesnt browserify.
the good news is based on your example you can render svg directly on the page in a webview with no data uri encoding at all.
@vigreco what do you think about adding the toString method to browser.js?

from node-qrcode.

this should work for you. ill take a look =)

from node-qrcode.

so i tested your example on node v6.9.4 and it worked correctly. no canvas error.

null
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAB0CAYAAABUmhYnAAAAAklEQVR4AewaftIAAALPSURBVO3BQa7jSAwFwUxC97/yGy+5KkCQ7OlPMMJ8sMYo1ijFGqVYoxRrlGKNUqxRijVKsUYp1ijFGqVYoxRrlGKNUqxRijXKxUMqv5SEO1S6JNyh8ktJeKJYoxRrlGKNcvGyJLxJ5USlS8IdKl0STpLwJpU3FWuUYo1SrFEuvkzljiTckYSTJHQqXRKeULkjCd9UrFGKNUqxRrkYRuUkCZMVa5RijVKsUS7+OJWTJHQqJ0n4y4o1SrFGKdYoF1+WhG9KQqdyRxKeSMK/pFijFGuUYo1y8TKVX1LpktCpdEnoVLoknKj8y4o1SrFGKdYo5oNBVE6SMFmxRinWKMUa5eIhlS4JnUqXhE6lS0Kn0iXhJAmdyolKl4Q7VLoknKh0SXhTsUYp1ijFGsV88EUqTyShU+mScKJykoROpUtCp9Il4Q6VkyQ8UaxRijVKsUa5eEilS8JJEu5QOVH5JpU7VP5PxRqlWKMUaxTzwQ+p3JGEE5VvSkKncpKEE5UuCW8q1ijFGqVYo5gPHlDpktCpdEnoVLokdCpdEk5U7khCp3JHEjqVLgmdykkSnijWKMUapVijmA/+MJUuCW9S6ZJwotIl4USlS8ITxRqlWKMUa5SLh1R+KQldEjqVLgknKl0SuiScqNyh8k3FGqVYoxRrlIuXJeFNKnckoVPpktAl4USlS0KXhCeS8KZijVKsUYo1ysWXqdyRhDtUnlDpknCHykkSTlS6JDxRrFGKNUqxRrn445JwotKpdEnoVLokdCpdEp5IwpuKNUqxRinWKBd/nMo3qTyh0iWhU+mS8ESxRinWKMUa5eLLkvBNSThROVE5SUKn0qmcJKFT6ZLwpmKNUqxRijXKxctUfknliSR0Kp3KSRJOVE5UuiQ8UaxRijVKsUYxH6wxijVKsUYp1ijFGqVYoxRrlGKNUqxRijVKsUYp1ijFGqVYoxRrlGKN8h+dsx746sV0YgAAAABJRU5ErkJggg==

qrcode version is0.8.1

what versions of things are you using?

from node-qrcode.

if you are using the file built for the browser (lib/browser.js) it expects to use the canvas renderer for lots of things. we can probably change or make it configurable so it tries to use jspng like we do on nodejs.

have you tried to use svg instead? this might meet your usecase.

var QRCode = require("qrcode")
QRCode.toString("test", {type: "svg"}, function(err, url) {
  console.log(err)
  console.log(url) 
})

from node-qrcode.

is svg an aceptable format for you? if it is i can add the toString function to the browser api and you'll be good to go. We could also return as a bit array so you can choose to render with whatever you have access to in react-native.

from node-qrcode.

Any format we can convert to base64 dataURL is good, but the problem is not the format we may pick, but instead the fact that the lib will fallback to browser.js when used from react-native, this is what causes the error about a canvas being missing, if the lib didn't do this fallback when used from react-native I'd have no issue at all :p

If you could setup a very simple react-native project for a quick test I can let you know what we're trying to do with the qrcode lib. :)

Thanks for your patience and help.

// app.js
// this does work as expected, but it doesn't when 
// you import the lib from react-native project
var QRCode = require("qrcode")
QRCode.toDataURL("test", {
  type: "png",
}, function(err, url) {
  console.log(err); // null
  console.log(url); // base64 encoded data url
});

from node-qrcode.

i researched react-natives Image object a bit and im not sure it works with svg. there are some plugins from other folks for this but its not like easy.

is it possible to use a webview to render the qrcode that way it just has canvas and everything would be awesome?

these folks are doing something like that https://github.com/cssivision/react-native-qrcode/blob/master/lib/Canvas.js ... but it seems like we would want to render the canvas commands into a string of js passed into the webview.

i dont have time to setup react-native at the moment but hopefully some folks will notice this and lend a hand. doesnt seem as easy as i hoped though.

from node-qrcode.

@poifox I think the use of browser.js in react native app is the correct behaviour although not very usable at the moment since you haven't a canvas element.

As far as i know react native app doesn't run in a node.js environment so also importing the qrcode module for node.js wouldn't work.
You could try with require('qrcode/lib') which will require the code in server.js but I guess you'll have some error caused by node builtin libs such as fs.

I've never used react-native but I think you can try creating a canvas inside a WebView and using it with qrcode methods, just an idea, don't know if it's doable.

Another approach as suggested by @soldair is to write your custom renderer.
You can use QRCode.create(text, opts) function to create a qrcode object that will give you all the data needed. You can access the modules matrix and use it to render the qrcode. Take a look at renderer folder for some example on how implement it.

For a quick test, if svg format is ok for you, I think that copy/paste the render function in svg.js inside your project will give you a ready to use svg renderer.

from node-qrcode.

thank you guys for your concern, what I'm trying to do is get the base64 Data URL from the lib, so I can use it in a webview like this:

// react-native imports
import { WebView } from 'react-native'
import QRCode from 'qrcode' // this works just fine

export default class QRCodeView extends Component {
  render() {
    QRCode.toDataURL(this.state.qrtext, {type: "png"}, (err, url) => {
      this.setState({qrcode: url})
    })
    return (
      <WebView source={{html: "<img src='" + this.state.qrcode + "' />"}} />
    )
  }
}

Maybe my implementation is wrong, I was just expecting the lib to use the server.js functions instead of falling back to browser.js and require me to add a canvas, which would be a more cumbersome solution for my use case.

from node-qrcode.

Also, I tried using @cssivision's lib but the react-native project would not pass the build process, at least on android, which is the platform I'm developing mainly right now so not sure what to do about that one really :/

I think I'm gonna give it another try...

from node-qrcode.

Having toString() in browser.js would solve my use case indeed, I'd be most thankful if that was added to the lib.

from node-qrcode.

@soldair I don't see why not 👍
I think this will require some modifications to avoid server code inside browser bundle though.

from node-qrcode.

Hi! Do we have an ETA on this feature being added? :)

from node-qrcode.

ill need to run it through some more tests but soon =)

from node-qrcode.

if you try the branch out let me know =) @poifox

from node-qrcode.

I'll try it, thanks! :)

from node-qrcode.

Hey, I've tried the code in the browser-svg branch and got a weird message about the fs module not being available under the lib's npm_modules directory, which, by the looks of it, seems calling qrcode.toString("data", {type: "svg"}) ends up trying to use the renderToFile() function below it, which is really strange. The code does work ok on nodejs only but it seems it won't work on react-native which is major bummer for us...

Do you want me to paste debug info? lmk.

from node-qrcode.

Additionally, I've already tried using an externally generated svg qrcode (nodejs only code) with a WebView in the mobile app I'm working on and it works perfectly, so if we could somehow figure out how to make toString() work that'd be it... or maybe making react use server.js, not sure which is more feasible or if you guys are interested at all in adding this. lmk.

Still haven't found a better x-platform solution to make qrcodes, if you see anything out there, lmk too.

from node-qrcode.

im sure we can sort it out. ill push something for the fs issue real quick and let me know if you run into the same issue =)

from node-qrcode.

ok @poifox could you try the branch again? i moved some things around and i hope it wont hit any more fs code.

if you get a crash the stack might help so feel free to share it =)

from node-qrcode.

Works great! 😄 Will this get pushed to master/tag? I hope so!

from node-qrcode.

Hmmm... doing just npm install qrcode outputs the error [email protected] invalid.

EDIT: Nevermind, I just had to uninstall and remove from package.json so it worked again.

from node-qrcode.