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码 图片
|
# qrcode-decode
|
||||||
> 整理自 [jsqrcode](https://github.com/LazarSoft/jsqrcode)
|
时要的二维码识别代码整理自 [jsqrcode](https://github.com/LazarSoft/jsqrcode);
|
||||||
|
|
||||||
**修改点:**
|
**修改点:**
|
||||||
1. 模块化
|
1. 模块化
|
||||||
2. 剥离识别函数,改成适合服务端使用
|
2. 剥离识别函数,改成适合服务端使用,但入参数还是保留为实现[ImageData](https://developer.mozilla.org/zh-CN/docs/Web/API/ImageData)接口的对像
|
||||||
3. 需要用其它方法把图片转为 `ImageData` 提供给解码函数
|
|
||||||
|
|
||||||
**demo web**
|
**关于 `ImageData`**
|
||||||
```html
|
> `Canvas` 中可以用 `ctx.getImageData` 方法得到;
|
||||||
<input id="file" type="file">
|
|
||||||
|
如果你不想亲自把图片转为 `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
|
```js
|
||||||
var qrcodeDecode = require('qrcode-decode');
|
//解析文件
|
||||||
|
var qrcodeDecode = require('qrcode-decode/server');
|
||||||
document.getElementById('file').onchange = function (event) {
|
qrcodeDecode.decodeByPath('xx/code.jpg').then(function(val){
|
||||||
var file = event.target.files[0];
|
console.log(val);
|
||||||
new Promise(function (ok, no) {
|
},console.error.bind(console))
|
||||||
var reader = new FileReader();
|
|
||||||
reader.onload = evt => {
|
//解析Buffer
|
||||||
ok(evt.target.result);
|
fs.readFile(path, function (err, buffer) {
|
||||||
};
|
if (err) { return rej(err) }
|
||||||
reader.readAsDataURL(file);
|
resqrcodeDecode.decodeByBuffer(buffer);
|
||||||
}).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);
|
|
||||||
}
|
|
||||||
```
|
```
|
||||||
|
|||||||
@ -1,25 +1,31 @@
|
|||||||
var qrDecode = require('./')
|
|
||||||
|
|
||||||
var decode =
|
var decode = require('./src/QRCodeDecode');
|
||||||
exports.decode = function (bom) {
|
var decodeByDom = function (dom) {
|
||||||
var canvas = document.createElement("canvas")
|
var canvas = document.createElement("canvas")
|
||||||
var ctx = canvas.getContext('2d')
|
var ctx = canvas.getContext('2d')
|
||||||
canvas.width = bom.width;
|
canvas.width = dom.width;
|
||||||
canvas.height = bom.height;
|
canvas.height = dom.height;
|
||||||
ctx.drawImage(bom, 0, 0, canvas.width, canvas.height);
|
ctx.drawImage(dom, 0, 0, canvas.width, canvas.height);
|
||||||
var data = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
var data = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
||||||
return qrDecode(data)
|
return decode(data)
|
||||||
}
|
}
|
||||||
|
|
||||||
exports.decodeByUrl = function (src, cb) {
|
var decodeByUrl = (src, cb) => {
|
||||||
var img = new Image();
|
var img = new Image();
|
||||||
|
img.crossOrigin="anonymous";
|
||||||
img.src = src;
|
img.src = src;
|
||||||
img.onload = function () {
|
img.onload = function () {
|
||||||
try {
|
try {
|
||||||
cb(null,decode(img));
|
cb(null, decodeByDom(img));
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
cb(e);
|
cb(e);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
img.onerror = cb;
|
img.onerror = cb;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
decodeByImageDate: decode,
|
||||||
|
decodeByDom: decodeByDom,
|
||||||
|
decodeByUrl: decodeByUrl
|
||||||
|
}
|
||||||
@ -1,37 +1,32 @@
|
|||||||
var qrcodeDecode = require('../browser')
|
var qrcodeDecode = require('../browser')
|
||||||
console.log(1111)
|
|
||||||
document.getElementById('file').onchange = function (event) {
|
document.getElementById('file').onchange = function (event) {
|
||||||
var el = event.target;
|
var el = event.target;
|
||||||
if (!el.files.length) return;
|
if (!el.files.length) return;
|
||||||
// console.log(el.files[0]);
|
|
||||||
var file = el.files[0];
|
var file = el.files[0];
|
||||||
new Promise(function (ok, no) {
|
new Promise(function (ok, no) {
|
||||||
/* if(window.URL && window.URL.createObjectURL){ //缓存预览
|
if (window.URL && window.URL.createObjectURL) {
|
||||||
ok(window.URL.createObjectURL(file));
|
ok(window.URL.createObjectURL(file));
|
||||||
}else */
|
} else if (typeof FileReader) {
|
||||||
if (typeof FileReader) {
|
|
||||||
//urldata预览
|
|
||||||
var reader = new FileReader();
|
var reader = new FileReader();
|
||||||
reader.onload = evt => {
|
reader.onload = evt => {
|
||||||
ok(evt.target.result);
|
ok(evt.target.result);
|
||||||
};
|
};
|
||||||
reader.readAsDataURL(file);
|
reader.readAsDataURL(file);
|
||||||
} else {
|
} else {
|
||||||
ok();
|
no('浏览器不支持');
|
||||||
}
|
}
|
||||||
}).then((src)=>{
|
}).then((src) => {
|
||||||
qrcodeDecode.decodeByUrl(src,function(err,txt){
|
qrcodeDecode.decodeByUrl(src, function (err, txt) {
|
||||||
var msg = document.createElement("div")
|
var msg = document.createElement("div")
|
||||||
if(err){
|
if (err) {
|
||||||
console.log(err);
|
console.log(err);
|
||||||
msg.innerHTML = "err: <br>" + err;
|
msg.innerHTML = "err: <br>" + err;
|
||||||
}else{
|
} else {
|
||||||
msg.innerHTML = txt;
|
msg.innerHTML = txt;
|
||||||
}
|
}
|
||||||
document.body.appendChild(msg);
|
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