如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
1.JavaScript 簡介：
JavaScript是互聯網上最流行的腳本語言，所有現代的HTML都使用JavaScript。既然是腳本語言，那么它的特點就有一下三種：
（1）弱類型；
（2）解釋型語言（不需要編譯）；
（3）逐行執行，一行代碼錯誤，其后的代碼塊都不會繼續執行；
（4）<script>標簽可直接嵌入到HTML文件中，位置是任意的，通常放在被修飾內容下面或者head標簽中，但寫成單獨的js文件有利于結構和行為的分離
2.JavaScript 內容（附圖）：
其中ECMAScript是JavaScript的核心；
DOM是文檔對象模型（使用js操作網頁）；
BOM是瀏覽器對象模型（使用js操作瀏覽器）
3.JavaScript 信息的輸出：
（1）alert( )方法：以提示框的形式在頁面輸出 ，例;
（2）console.log( )方法：在控制臺輸出信息，例：
（3）document.write( )：將內容直接寫在HTML頁面中，例：
4.JavaScript 變量：
與 Java不同，ECMAScript 中的變量無特定的類型，定義變量時只用 var 運算符，可以將它初始化為任意值，變量的初始化格式：var 變量名 = 變量值；例：
如果要定義多個變量，那么可以用將多個變量寫在一行，用逗號進行分隔；例：
變量名字的變量規則：
（1）由字母、數字、下劃線、$符號構成
（2）不可以以數字開頭，不建議以下劃線開頭；
（3） 嚴格區分大小寫；
（4）不可以是關鍵字和保留字
5.JavaScript 數據類型：
JavaScript可以分為原始數據類型，引用數據類型兩種：
（1）原始數據類型：Number，String，Boolean，undefined，null
Number：數值型，就是數字，包含正數、負數、整數、小數、0、NaN、Infinity（正無窮）、-Infinity（負無窮）；
注意：NaN：not a number的縮寫，表示該值不是一個數值（也屬于Number）
String：字符串：用雙引號""或單引號''包起來的0個或多個字符，如果引號中什么也沒有，那么這個字符串被稱為空字符串
Boolean：布爾型：包含true：表示真（成立）和false：表示假（不成立）兩個值
undefined：表示變量未定義，或變量被定義出來，但是沒有被賦值
null：表示一個變量沒有指向任何一片存儲空間，即變量存在，但是里面是空的，類似于Undefined
（小提示：在Chrome瀏覽器控制臺輸出時，會發現Number類型為深藍色，String為黑色，Boolean為淺藍色，undefined和null都為淺灰色）
（2）引用數據類型：
Object（對象），Array（數組），Date（日期），RegExp（正則）。。等等
（3）如何查看一個變量的數據類型（typeof 運算符）：
數值型數據：返回值為number
字符串型數據：返回值為string
布爾型數據：返回值為boolean
Undefined：返回值為undefined
Null：返回值為Object（歷史遺留問題，說明null也是一個對象）
NaN：返回值為number
6.JavaScript 數據類型的轉換：
（1）在使用加法（+）運算符時，任何數據與字符串類型數據相加都為字符串類型數據；
注（簡單理解）： 在JavaScript 中空字符串""轉換為false，非空字符串轉換為true（除“0”，“1”外）；
false轉換為 0 或“0”，true轉換為 1 或“1”；
做邏輯判斷的時候，null，undefined，""(空字符串)，0，NaN都默認為false；
==在比較的時候可以轉換數據類型，===是嚴格比較，只要類型不匹配就返回false；
其實
（2）parseInt：將字符串轉換成整數（只識別字符串中的數值）：
注：會忽略字符串中的前后空格（當數值后的空格后面還有數值時，將不會再識別）；
能夠正確識別正負號，即保留正負號；
在轉換時，遇到非數值型的字符就會停止轉換；
如果字符串的第一個字符是非數值型的，那么轉換的結果為NaN；
（3）parseFloat：將字符串轉換成小數（識別小數點，注意事項同上）
（4）Number：將其它類型的數據轉換成數值型，注意被轉換的數據必須是純數值構成，否則無法轉換，其它注意事項同上
（5）頁面中的信息框：
alert（），彈出個提示框，只有確定；
confirm（），彈出個確認框，有確定和取消；
prompt（），彈出個輸入框，可以輸入內容；
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
== 的比較確實是轉換成字符串來比較但，但是在布爾型轉換為字符串之前，要先轉換成 Number
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
最近重在研究struts的源碼，其中涉及到了request中的幾個api，看了文檔后還是覺得不清楚，所以在自己原來的工程中
測試了一下各個api的具體效果。在這里跟大家分享一下。
這是我具體測試的代碼：
這是我servlet配置的路徑：
以下是訪問這個ProductServlet后控制臺打印的結果：
從以上我們可以發現：
1.getRealPath(....)，這個方法是返回給定資源的磁盤絕對路徑，簡單來說，就是以盤符開頭的路徑
2.getRequestURI(....)與getRequestURL(....)這個兩個方法，從名字上來說，一個是返回url（統一資源定位器）一個是返回
uri（統一資源標識符，用來唯一的標識一個資源），那么url跟uri有什么區別呢？比較結果后我們就知道，URL中包含URI，URL是
帶協議，帶端口號的。
3.getContextPath(....)這個方法，其實就是用來返回工程名，或者說工程路徑，看結果我們一目了然
4.getServletPath(.....)這個方法，從結果中，我們可以分析得出，它其實就是在工程目錄下，訪問我們servlet的路徑，或者說
servlet相對于我們工程的路徑，在或者說，它就是我們在配置文件中配置的路徑，但是不包括后面具體的請求資源名
5.getPathInfo(.....)，這個方法其實就是返回我們具體請求資源的名稱，或者說，相對于我們的servlet而言的請求路徑
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
2、讀取json文件的service層實現
3、controller對應的代碼片段
4、html頁面 將jsonarray轉換成js對象
5、對js對象遍歷 $.append動態添加到對應頁面
6、效果如下圖
[plain] view plain copy
[plain] view plain copy
[java] view plain copy
[java] view plain copy
[javascript] view plain copy
[javascript] view plain copy
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
目前做的項目是ionic3和angular4.0的結合，所以用到了很多關于ionic3中封裝好的標簽，例如具有輪播效果的ion-slides和ion-slide等。那么這次就要總結一下另外一個標簽ion-segment的用法了。
Segment 在頭部使用
Segment 在內容里面使用
Segment 在表單里面使用
ion-segment這個標簽以前用的很少，幾乎沒有用過。它主要是一組按鈕，有時稱為分段控件，之前都是用button按鈕，現在知道了，開始用ion-segment，因為它有自帶的樣式，這樣就可節省很多時間，同時呢允許用戶與許多控件的緊湊組進行交互。 分段提供與標簽相似的功能，選擇一個將取消選擇所有其他選項。 當您希望讓用戶在應用程序的不同頁面之間來回移動時，應使用選項卡欄而不是分段控件。 您可以使用Angular的ngModel或FormBuilder API。
下面來看一段代碼：
<ion-header> <ion-toolbar> <ion-segment [(ngModel)]="icons" color="secondary"> <ion-segment-button value="camera"> <ion-icon name="camera">帶iocn</ion-icon> </ion-segment-button> <ion-segment-button value="bookmark"> 頭部使用Segment <ion-icon name="bookmark"></ion-icon> </ion-segment-button> </ion-segment> </ion-toolbar> </ion-header>
<ion-segment [(ngModel)]="relationship" color="primary" (ionChange)="segmentChanged($event)"> <ion-segment-button value="friends"> Segment 在內容里面使用 </ion-segment-button> <ion-segment-button value="enemies"> 可以綁定一個事件(ionChange) </ion-segment-button> </ion-segment>
<form [formGroup]="myForm"> <ion-segment formControlName="mapStyle" color="danger"> <ion-segment-button value="standard"> Standard </ion-segment-button> <ion-segment-button value="hybrid"> 表單內使用 </ion-segment-button> <ion-segment-button value="sat"> Satellite </ion-segment-button> </ion-segment> </form>
Segment 配合ngSwitch使用
<ion-segment [(ngModel)]="change"> <ion-segment-button value="apple"> 蘋果 </ion-segment-button> <ion-segment-button value="pie"> 梨 </ion-segment-button> </ion-segment> <div [ngSwitch]="change"> <div *ngSwitchCase="'apple'">
蘋果顯示，如果要默認顯示一個就把默認的那個設置一個初始值比如要默認顯示蘋果就把蘋果的value值設置成change也就是說，在定義change變量的時候，需要把哪個設置為默認顯示就把哪個的value值賦值給change作為初始值 public change=”pie”;
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
1：安裝
2： 在main.js 主入口js里面引用store.js
3：在store.js里引用Vuex
4：在vue組件中使用
使用$store.commit(‘jia’)區觸發mutations下面的加減方法
5：state訪問狀態對象
使用computed計算
npm install vuex --save
import Vue from 'vue' import App from './App' import router from './router' import store from './vuex/store' //引用store.js Vue.config.productionTip = false //阻止在啟動時生成生產提示 //vue實例 new Vue({
el: '#app',
router,
store, //把store掛在到vue的實例下面 template: '<App/>',
components: { App }
})
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) //注冊Vuex // 定義常量 如果訪問他的話，就叫訪問狀態對象 const state = {
count: 1 } // mutations用來改變store狀態, 如果訪問他的話，就叫訪問觸發狀態 const mutations = { //這里面的方法是用 this.$store.commit('jia') 來觸發 jia(state){
state.count ++
},
jian(state){
state.count --
},
} //暴露到外面，讓其他地方的引用 export default new Vuex.Store({
state,
mutations
})
<template> <p class="hello"> <h1>Hello Vuex</h1> <h5>{{$store.state.count}}</h5> <p> <button @click="$store.commit('jia')">+</button> <button @click="$store.commit('jian')">-</button> </p> </p> </template> <!-- 加上scoped是css只在這個組件里面生效，為了不影響全局樣式 --> <style scoped> h5{ font-size: 20px; color: red; } </style>
<template> <p class="hello"> <h1>Hello Vuex</h1> <h5>{{count}}</h5> <p> <button @click="$store.commit('jia')">+</button> <button @click="$store.commit('jian')">-</button> </p> </p> </template> <script> import {mapState} from 'vuex' export default{
name:'hello', //寫上name的作用是，如果你頁面報錯了，他會提示你是那個頁面報的錯，很實用 // 方法一 // computed: { // count(){ // return this.$store.state.count + 6 // } // } // 方法二 需要引入外部 mapState computed:mapState({
count:state => state.count + 10 }) // ECMA5用法 // computed:mapState({ // count:function(state){ // return state.count // } // }) //方法三 // computed: mapState([ // 'count' // ]) } </script>
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
1：mutations觸發狀態 （同步狀態）
2：getters計算屬性
getter不能使用箭頭函數，會改變this的指向
在store.js添加getters
//count的參數就是上面定義的state對象
3：actions (異步狀態)
在store.js添加actions
在組件中使用
4：modules 模塊
適用于非常大的項目，且狀態很多的情況下使用，便于管理
修改store.js
<template> <p class="hello"> <h1>Hello Vuex</h1> <h5>{{count}}</h5> <p> <button @click="jia">+</button> <button @click="jian">-</button> </p> </p> </template> <script> import {mapState,mapMutations} from 'vuex' export default{
name:'hello', //寫上name的作用是，如果你頁面報錯了，他會提示你是那個頁面報的錯，很實用 //方法三 computed: mapState([ 'count' ]),
methods:{
...mapMutations([ 'jia', 'jian' ])
}
} </script>
// 計算 const getters = {
count(state){ return state.count + 66 }
} export default new Vuex.Store({
state,
mutations,
getters
})
//getters中定義的方法名稱和組件中使用的時候一定是一致的,定義的是count方法，使用的時候也用count，保持一致。
組件中使用
<script> import {mapState,mapMutations,mapGetters} from 'vuex' export default{
name:'hello',
computed: {
...mapState([ 'count' ]),
...mapGetters([ 'count' ])
},
methods:{
...mapMutations([ 'jia', 'jian' ])
}
} </script>
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 定義常量 const state = { count: 1 } // mutations用來改變store狀態 同步狀態 const mutations = {
jia(state){
state.count ++
},
jian(state){
state.count --
},
} // 計算屬性 const getters = {
count(state){ return state.count + 66 }
} // 異步狀態 const actions = {
jiaplus(context){
context.commit('jia') //調用mutations下面的方法
setTimeout(()=>{
context.commit('jian')
},2000) alert('我先被執行了，然后兩秒后調用jian的方法') }, jianplus(context){ context.commit('jian') }
} export default new Vuex.Store({
state,
mutations,
getters,
actions
})
<template> <p class="hello"> <h1>Hello Vuex</h1> <h5>{{count}}</h5> <p> <button @click="jia">+</button> <button @click="jian">-</button> </p> <p> <button @click="jiaplus">+plus</button> <button @click="jianplus">-plus</button> </p> </p> </template> <script> import {mapState,mapMutations,mapGetters,mapActions} from 'vuex' export default{
name:'hello',
computed: {
...mapState([ 'count' ]),
...mapGetters([ 'count' ])
},
methods:{ // 這里是數組的方式觸發方法 ...mapMutations([ 'jia', 'jian' ]), // 換一中方式觸發方法 用對象的方式 ...mapActions({
jiaplus: 'jiaplus',
jianplus: 'jianplus' })
}
} </script> <style scoped> h5{ font-size: 20px; color: red; } </style>
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { count: 1 } const mutations = {
jia(state){
state.count ++
},
jian(state){
state.count --
},
} const getters = {
count(state){ return state.count + 66 }
} const actions = {
jiaplus(context){
context.commit('jia') //調用mutations下面的方法
setTimeout(()=>{
context.commit('jian')
},2000) alert('我先被執行了，然后兩秒后調用jian的方法') }, jianplus(context){ context.commit('jian') }
}
//module使用模塊組的方式 moduleA const moduleA = { state, mutations, getters, actions }
// 模塊B moduleB const moduleB = { state: { count:108
}
} export default new Vuex.Store({
modules: {
a: moduleA,
b: moduleB,
}
})
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
window全局作用域->頁面關掉才銷毀
1)作用域的銷毀
2)作用域的不立即銷毀
fn()(20);//->在執行fn的時候一切都從新開始了,和上面的步驟是一樣的->輸出30
3)作用域的不銷毀：形成一個私有作用域,里面的內容被外面占用了
2)在函數執行的時候,里面的一個小函數的地址賦值給了我們的外面元素的點擊事件,那么當前小函數也相當于被外面占用了,大函數執行形成的私有的作用域也不銷毀了
3)在使用setTimeout實現輪詢動畫的時候,我們如果move需要傳遞參數值,那么像下面這樣的寫法會行成很多的不銷毀的作用域,非常的耗性能
//window.setTimeout(move,10); ->第二次執行move的時候我們沒有給它傳值(這樣寫不行)
//解決辦法:
[火狐和IE]
var obj={};
函數執行會形成私有的作用域
一般情況下，函數執行形成一個私有的作用域，當執行完成后就銷毀了->節省內存空間
function fn(){
var i=10;
return function(n){
console.log(n+i++);
}
}
fn()(15);//->先執行fn,有一個私有的變量i=10,返回一個堆內存地址 xxxfff111,我們發現這個地址還用到了一次,那么當前的這個fn形成私有作用域（A）就不能立即銷毀了,xxxfff111(15)->輸出25,A中的i變為11；當xxxfff111執行完了,發現這個地址沒用了,瀏覽器就把A、xxxfff111都釋放了
function fn(){
var i=10;
return function(n){
console.log(n+i++);
}
}
var f=fn();//->fn執行形成一個私有的作用域A,A中有一個私有的變量i=10,A中返回一個地址xxxfff11,被外面的f占用了,那么當前的A就不能銷毀了
f(15);//->輸出25,讓A中的i=11
f(20);//->輸出31,讓A中的i=12
…
當我們知道f用完的時候,為了優化性能,我們讓f=null,這樣的話A中的xxxfff111沒人占用了,瀏覽器會把A和xxxfff111都釋放了
幾種不銷毀常用到的形式:
1)函數執行,返回一個引用數據類型的值,并且在函數的外面被別人接收了,那么當前函數形成的私有作用域就不在銷毀了–>例如上面的案例
//每一次循環都執行自執行函數形成一個私有的作用域(循環三次就有三個作用域,每一個作用域中都有一個i,第一個存儲的是0,第二個存數的是1..)，在每一個私有的作用域中都把里面的函數綁定給了外面元素的點擊事件,這樣的話每一次形成的作用域都不銷毀了(三個不銷毀的作用域)
var oLis=document.getElementsByTagName(“li”);
for(var i=0;i<oLis.length;i++){
~function(i){
oLis[i].onclick=function(){
tabChange(i);
}
}(i);
}
function move(tar){
<js code>
window.setTimeout(function(){
move(tar);
},10);//->這樣寫實現了,但是每一次執行定時器都會形成一個私有的所用域(匿名函數形成的)A,在A中使用了上級作用域中的tar的值,而且執行了move又形成了一個小的作用域(而在小的作用域中會使用tar的值),這樣每一次定時器形成的A都不能銷毀了
}
move(100);//->第一次這樣執行傳遞100
function move(tar){
~function _move(){
<js code>
window.setTimeout(_move,10);
}();
}
move(100);//->第一次這樣執行傳遞100
JS中內存空間釋放的問題（堆內存、棧內存）
[谷歌瀏覽器]
我們開辟一個內存，可能或有一些其他的變量等占用了這個內存，谷歌瀏覽器都會間隔一段時間看這個內存還有沒有被占用，如果發現有沒有被占用的內存了，就自己幫我們回收了(內存釋放)
我們開個內存，當我們引用了它，就在內存中記錄一個數,增加一個引用瀏覽器就把這個數+1，減少一個引用，瀏覽器就把這個數-1…當減到零的時候瀏覽器就把這個內存釋放了;但是有些情況下(尤其是IE)記著記著就弄亂了，內存就不能釋放了–>瀏覽器的內存泄露
我們養成一個好的習慣，當我們obj這個對象使用完成了，我們手動的obj=null (null空對象指針)，瀏覽器會自己把剛才的堆內存釋放掉
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
問題描述：在頁面選擇關鍵詞時，需要將關鍵詞元素綁定點擊事件使同一類型的關鍵詞只有一個固定class，使其隨點擊更換，目的是為了讓這一類型的關鍵詞的值可以由class獲取。在原本寫死的關鍵詞上綁定的事件是可用的，但是換成動態加載后發現只能適用于寫死的情況。很無奈，在網上搜索一番后花了點時間終于解決了，下面奉上。
參考文章：https://blog.csdn.net/qq_35129893/article/details/78363211?locationNum=2&fps=1
原本綁定事件如下：
針對的HTML元素如下：
但是發現，原先的事件不能用于動態加載的元素，如上面加載的，加載形式如下：
無奈，只能上網尋求萬能的大神了。
基本上提供的解決方案就兩個，使用
或者
我先是使用.live嘗試了下，發現gg，心灰意冷ing；本著試一試不要錢的心態又用.on試了下，結果令人驚喜??！可以使用了，哎，這鬼玩意坑死人。
下面上針對我加載的界面元素寫的綁定事件：
[javascript] view plain copy
[html] view plain copy
[javascript] view plain copy
$('element').live('click',function(){})$('父元素').on('click', '子元素', function(){})
[javascript] view plain copy
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
1.把wxParse文件全部放入項目。
2.在wxml中import wxParse.wxml,并把template插入到到對應的位置上
3.在wxss中import wxParse.wxss，并設置樣式；比如‘wxParse-image’是富文本圖片轉化成image組件之后的類名，‘wxParse-p’是p標簽轉化成view組件后設置的類名
4.js
[html] view plain copy
[css] view plain copy
具體的API可以去GitHub上查看：https://github.com/icindy/wxParse
[javascript] view plain copy
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
[HTML]代碼
[C#后臺]
<!DOCTYPE html>
<html>
<head>
<title>二維碼掃描測試</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<style type="text/css">
html, body {
height: 100%;
width: 100%;
text-align: center;
}
</style>
<script src="../js/jquery-1.11.1.min.js"></script>
<script>
//這段代 主要是獲取攝像頭的視頻流并顯示在Video 簽中
var canvas = null, context = null, video = null;
window.addEventListener("DOMContentLoaded", function () {
try {
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
video = document.getElementById("video");
var videoObj = { "video": true, audio: false },
flag = true,
MediaErr = function (error) {
flag = false;
if (error.PERMISSION_DENIED) {
alert('用戶拒絕了瀏覽器請求媒體的權限', '提示');
} else if (error.NOT_SUPPORTED_ERROR) {
alert('對不起，您的瀏覽器不支持拍照功能，請使用其他瀏覽器', '提示');
} else if (error.MANDATORY_UNSATISFIED_ERROR) {
alert('指定的媒體類型未接收到媒體流', '提示');
} else {
alert('系統未能獲取到攝像頭，請確保攝像頭已正確安裝?；驀L試刷新頁面，重試', '提示');
}
};
//獲取媒體的兼容代碼，目前只支持（Firefox,Chrome,Opera）
if (navigator.getUserMedia) {
//qq瀏覽器不支持
if (navigator.userAgent.indexOf('MQQBrowser') > -1) {
alert('對不起，您的瀏覽器不支持拍照功能，請使用其他瀏覽器', '提示');
return false;
}
navigator.getUserMedia(videoObj, function (stream) {
video.src = stream;
video.play();
}, MediaErr);
}
else if (navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia(videoObj, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, MediaErr);
}
else if (navigator.mozGetUserMedia) {
navigator.mozGetUserMedia(videoObj, function (stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
}, MediaErr);
}
else if (navigator.msGetUserMedia) {
navigator.msGetUserMedia(videoObj, function (stream) {
$(document).scrollTop($(window).height());
video.src = window.URL.createObjectURL(stream);
video.play();
}, MediaErr);
} else {
alert('對不起，您的瀏覽器不支持拍照功能，請使用其他瀏覽器');
return false;
}
if (flag) {
//alert('為了獲得更準確的測試結果，請盡量將二維碼置于框中，然后進行拍攝、掃描。 請確保瀏覽器有權限使用攝像功能');
}
//這個是拍照按鈕的事件，
$("#snap").click(function () { startPat(); }).show();
} catch (e) {
printHtml("瀏覽器不支持HTML5 CANVAS");
}
}, false);
//打印內容到頁面
function printHtml(content) {
$(window.document.body).append(content + "<br/>");
}
//開始拍照
function startPat() {
setTimeout(function () {//防止調用過快
if (context) {
context.drawImage(video, 0, 0, 320, 320);
CatchCode();
}
}, 200);
}
//抓屏獲取圖像流，并上傳到服務器
function CatchCode() {
if (canvas != null) {
//以下開始編 數據
var imgData = canvas.toDataURL("image/jpeg");
//將圖像轉換為base64數據
var base64Data = imgData; //在前端截取22位之后的字符串作為圖像數據
$.ajax({
type: 'post',
url: '../ashx/HandlerScan.ashx?method=ParseImage',
data: 'ImgData=' + base64Data,
dataType: "json",
cache: false,
timeout: 10000,
success: function (mes) {
if (mes.code == '1') {
alert('未識別二維碼，請重新掃描！');
}
else {
alert(mes.name);
}
},
error: function (err) {
alert('掃描失敗' + err);
}
});
}
}
</script>
<body>
<div id="support"></div>
<div id="contentHolder">
<video id="video" width="320" height="320" autoplay></video>
<canvas id="canvas" style="display:none; background-color:#F00;" width="320" height="320"></canvas><br/>
<button id="snap" style="display:none; height:50px; width:120px;">開始掃描</button>
</div>
</body>
</html>
public class HandlerScan : IHttpHandler
{
private JsonResult js = new JsonResult();
public void ProcessRequest(HttpContext context)
{
string result = string.Empty;
string method = context.Request.QueryString.ToString();//獲取想要做的操作
switch (method)
{
case "method=ParseImage":
result = ParseImage(context);
break;
default:
break;
}
context.Response.ContentType = "text/json";
context.Response.Write(result);
}
private string ParseImage(HttpContext context)
{
try
{
string imgStr = context.Request.Params["ImgData"].ToString();
imgStr = imgStr.Replace("data:image/jpeg;base64,", "");
//整理字符串
imgStr = imgStr.Replace(" ", "+");
byte[] arr = Convert.FromBase64String(imgStr);
MemoryStream ms = new MemoryStream(arr, 0, arr.Length);
Bitmap bmp = new Bitmap(ms);
//解析圖片
Result result = new BarcodeReader().Decode(bmp);
if(result == null)
{
return "{\"code\":1,\"name\":\"\"}";
}
else
{
string[] a = result.Text.Split(',');
string str = "{\"code\":0,\"name\":\"" + a[0] + "\"}";
return str;
}
}
catch (Exception ex)
{
return "{\"code\":1,\"msg\":\"" + ex.Message + "\",\"userName\":\"\"}";
}
}
public bool IsReusable
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
{
get
{
return false;
}
}
}
藍藍設計的小編 http://www.syprn.cn
