Comments (24)
@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.
Related Issues (20)
- 1.5.3 still breaks by not shipping qrcode/build/qrcode.js to npm HOT 8
- Synk check failing for yargs v15.4.1
- Since version 1.5.2,`build` folder is missing in the NPM package HOT 1
- Redraw of QR code seems not to work out-of-the-box
- window.print() renders QR code svg as black square in print preview. firefox only HOT 1
- Support for `title` tag for SVG accessibility
- Use from within modules in the browser HOT 1
- Using it through module.js file in node.js
- Intermittent truncated response
- Text wrappingοΌζζ¬ζ’θ‘
- QRCode.toDataUrl returns nothing
- Installation failure HOT 1
- install from npm does not build browser version HOT 7
- How make qr code larger? HOT 1
- 'Unexpected token' error - brackets needed in url
- "You need to specify a canvas element" error when using Cloudflare Workers with `qrcode` HOT 5
- callback function delays to execute HOT 1
- Extract the core into its own module
- install breaks with node v20.5.1 HOT 4
- No assets on CDNJS for versions 1.5.2 and 1.5.3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from node-qrcode.