add build
cnwhy
7 years ago
parent
5a11eff012
commit
518ed4af94
@ -0,0 +1,60 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# Typescript v1 declaration files
|
||||
typings/
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variables file
|
||||
.env
|
||||
|
||||
.cache
|
||||
@ -1,44 +1,50 @@
|
||||
识别 QR码 图片
|
||||
> 整理自 [jsqrcode](https://github.com/LazarSoft/jsqrcode)
|
||||
# qrcode-decode
|
||||
时要的二维码识别代码整理自 [jsqrcode](https://github.com/LazarSoft/jsqrcode);
|
||||
|
||||
**修改点:**
|
||||
1. 模块化
|
||||
2. 剥离识别函数,改成适合服务端使用
|
||||
3. 需要用其它方法把图片转为 `ImageData` 提供给解码函数
|
||||
2. 剥离识别函数,改成适合服务端使用,但入参数还是保留为实现[ImageData](https://developer.mozilla.org/zh-CN/docs/Web/API/ImageData)接口的对像
|
||||
|
||||
**demo web**
|
||||
```html
|
||||
<input id="file" type="file">
|
||||
**关于 `ImageData`**
|
||||
> `Canvas` 中可以用 `ctx.getImageData` 方法得到;
|
||||
|
||||
如果你不想亲自把图片转为 `ImageData`, 根据你你的项目, 请使用这两个JS:
|
||||
- `browser.js` 浏览器项目 有两个API `decodeByUrl`, `decodeByDom`
|
||||
- `server.js` 服务端项目 提供两个API `decodeByPath`, `decodeByBuffer`
|
||||
> 服务端当前支持 `bmp` , `jpg` , `png` , `gif` 格式;
|
||||
|
||||
## demo
|
||||
### web
|
||||
> web端最终是利用`Canvas`获取`ImageData`, 注意兼容及跨域问题
|
||||
```js
|
||||
var qrcodeDecode = require('qrcode-decode/browser');
|
||||
// 传入二维码图片URL/dataURL
|
||||
qrcodeDecode.decodeByUrl(src, function (err, txt) {
|
||||
if (err) { return console.log(err);}
|
||||
alert(txt);
|
||||
})
|
||||
|
||||
// 传入DOM可以画到canvas的dom都可以 `img` `canvas` 'video' 等
|
||||
var img = document.getElementById('img1');
|
||||
qrcodeDecode.decodeByDom(img, function (err, txt) {
|
||||
if (err) { return console.log(err);}
|
||||
alert(txt);
|
||||
})
|
||||
```
|
||||
|
||||
js:
|
||||
### nodejs
|
||||
> 注意: 服务器端API是以 `promise` 返回结果,你注意你的`node`版本;
|
||||
```js
|
||||
var qrcodeDecode = require('qrcode-decode');
|
||||
|
||||
document.getElementById('file').onchange = function (event) {
|
||||
var file = event.target.files[0];
|
||||
new Promise(function (ok, no) {
|
||||
var reader = new FileReader();
|
||||
reader.onload = evt => {
|
||||
ok(evt.target.result);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}).then((src)=>{
|
||||
return new Promise(function(ok){
|
||||
var img = new Image();
|
||||
img.src = src;
|
||||
img.onload = function(){
|
||||
var canvas = document.createElement("canvas");
|
||||
var ctx = canvas.getContext('2d');
|
||||
canvas.width = img.width;
|
||||
canvas.height = img.height;
|
||||
ctx.drawImage(img,0,0,canvas.width,canvas.height)
|
||||
var imageData = ctx.getImageData(0,0,canvas.width,canvas.height)
|
||||
ok(imageData);
|
||||
}
|
||||
})
|
||||
}).then(data => {
|
||||
return qrcodeDecode(data);
|
||||
}).then(alert);
|
||||
}
|
||||
//解析文件
|
||||
var qrcodeDecode = require('qrcode-decode/server');
|
||||
qrcodeDecode.decodeByPath('xx/code.jpg').then(function(val){
|
||||
console.log(val);
|
||||
},console.error.bind(console))
|
||||
|
||||
//解析Buffer
|
||||
fs.readFile(path, function (err, buffer) {
|
||||
if (err) { return rej(err) }
|
||||
resqrcodeDecode.decodeByBuffer(buffer);
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
@ -1,25 +1,31 @@
|
||||
var qrDecode = require('./')
|
||||
|
||||
var decode =
|
||||
exports.decode = function (bom) {
|
||||
var canvas = document.createElement("canvas")
|
||||
var ctx = canvas.getContext('2d')
|
||||
canvas.width = bom.width;
|
||||
canvas.height = bom.height;
|
||||
ctx.drawImage(bom, 0, 0, canvas.width, canvas.height);
|
||||
var data = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
||||
return qrDecode(data)
|
||||
}
|
||||
var decode = require('./src/QRCodeDecode');
|
||||
var decodeByDom = function (dom) {
|
||||
var canvas = document.createElement("canvas")
|
||||
var ctx = canvas.getContext('2d')
|
||||
canvas.width = dom.width;
|
||||
canvas.height = dom.height;
|
||||
ctx.drawImage(dom, 0, 0, canvas.width, canvas.height);
|
||||
var data = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
||||
return decode(data)
|
||||
}
|
||||
|
||||
exports.decodeByUrl = function (src, cb) {
|
||||
var decodeByUrl = (src, cb) => {
|
||||
var img = new Image();
|
||||
img.crossOrigin="anonymous";
|
||||
img.src = src;
|
||||
img.onload = function () {
|
||||
try {
|
||||
cb(null,decode(img));
|
||||
cb(null, decodeByDom(img));
|
||||
} catch (e) {
|
||||
cb(e);
|
||||
}
|
||||
}
|
||||
img.onerror = cb;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
decodeByImageDate: decode,
|
||||
decodeByDom: decodeByDom,
|
||||
decodeByUrl: decodeByUrl
|
||||
}
|
||||
@ -1,37 +1,32 @@
|
||||
var qrcodeDecode = require('../browser')
|
||||
console.log(1111)
|
||||
|
||||
document.getElementById('file').onchange = function (event) {
|
||||
var el = event.target;
|
||||
if (!el.files.length) return;
|
||||
// console.log(el.files[0]);
|
||||
var file = el.files[0];
|
||||
new Promise(function (ok, no) {
|
||||
/* if(window.URL && window.URL.createObjectURL){ //缓存预览
|
||||
ok(window.URL.createObjectURL(file));
|
||||
}else */
|
||||
if (typeof FileReader) {
|
||||
//urldata预览
|
||||
if (window.URL && window.URL.createObjectURL) {
|
||||
ok(window.URL.createObjectURL(file));
|
||||
} else if (typeof FileReader) {
|
||||
var reader = new FileReader();
|
||||
reader.onload = evt => {
|
||||
ok(evt.target.result);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
} else {
|
||||
ok();
|
||||
no('浏览器不支持');
|
||||
}
|
||||
}).then((src)=>{
|
||||
qrcodeDecode.decodeByUrl(src,function(err,txt){
|
||||
}).then((src) => {
|
||||
qrcodeDecode.decodeByUrl(src, function (err, txt) {
|
||||
var msg = document.createElement("div")
|
||||
if(err){
|
||||
if (err) {
|
||||
console.log(err);
|
||||
msg.innerHTML = "err: <br>" + err;
|
||||
}else{
|
||||
} else {
|
||||
msg.innerHTML = txt;
|
||||
}
|
||||
document.body.appendChild(msg);
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
//el.outerHTML = el.outerHTML;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue