手机端,电脑端 都支持拍照。 微信端不可以,调用微信的拍照接口。
<!DOCTYPE
html
>
<
html
>
<
head
lang=
"en"
>
<
meta
charset=
"UTF-8"
>
<
title
>
take photo
</
title
>
<
style
>
body
{
background
:
url
(
"http://img13.360buyimg.com/cms/jfs/t868/250/648027290/292491/5c670a52/5549b7f9N7bc3afed.jpg"
);}
/*
拍照相关组件的样式
*/
video
,
canvas
{
background-color
:
rgba
(
255
,
255
,
255
,
0.6
);
border
:
2
px solid
#333
;
border-radius
:
10
px
;}
h1
,
h2
{
margin
:
20
px auto
;
color
:
#20cbc9
;
text-align
:
center
;}
*
:
focus
{
outline
:
none
;
}
#video
,
#canvas
{
margin
:
20
px auto
;
border
:
1
px solid
#000000
;
}
#snap
{
width
:
200
px
;
height
:
80
px
;
border-radius
:
20
px
;
background-color
:
greenyellow
;
border
:
none
;
margin
:
0
auto
;
}
#snap
,
#video
,
#canvas
{
display
:
block
;
}
.
filter0
{
filter
:
grayscale
(
1
);
-webkit-filter
:
grayscale
(
1
);
-moz-filter
:
grayscale
(
1
);
-o-filter
:
grayscale
(
1
);
-ms-filter
:
grayscale
(
1
);
}
.
filter1
{
filter
:
blur
(
2
px
);
-webkit-filter
:
blur
(
2
px
);
-moz-filter
:
blur
(
2
px
);
-o-filter
:
blur
(
2
px
);
-ms-filter
:
blur
(
2
px
);}
.
filter2
{
filter
:
saturate
(
3
);
-webkit-filter
:
saturate
(
3
);
-moz-filter
:
saturate
(
3
);
-o-filter
:
saturate
(
3
);
-ms-filter
:
saturate
(
3
);}
.
filter3
{
filter
:
sepia
(
0.5
);
-webkit-filter
:
sepia
(
0.5
);
-moz-filter
:
sepia
(
0.5
);
-o-filter
:
sepia
(
0.5
);
-ms-filter
:
sepia
(
0.5
);}
.
filter4
{
filter
:
hue-rotate
(
180
deg
);
-webkit-filter
:
hue-rotate
(
180
deg
);
-moz-filter
:
hue-rotate
(
180
deg
);
-o-filter
:
hue-rotate
(
180
deg
);
-ms-filter
:
hue-rotate
(
180
deg
);}
.
filter5
{
filter
:
invert
(
1
);
-webkit-filter
:
invert
(
1
);
-moz-filter
:
invert
(
1
);
-o-filter
:
invert
(
1
);
-ms-filter
:
invert
(
1
);}
.
filter6
{
filter
:
brightness
(
50
%
);
-webkit-filter
:
brightness
(
150
%
);
-moz-filter
:
brightness
(
150
%
);
-o-filter
:
brightness
(
150
%
);
-ms-filter
:
brightness
(
150
%
);}
.
filter7
{
filter
:
contrast
(
0.8
);
-webkit-filter
:
contrast
(
0.8
);
-moz-filter
:
contrast
(
0.8
);
-o-filter
:
contrast
(
0.8
);
-ms-filter
:
contrast
(
0.8
);}
.
filterall
{
list-style
:
none
;}
.
filterlist
{
width
:
100
%
;
height
:
200
px
;
border
:
1
px solid
#333
;}
.
filterall
{
width
:
990
px
;
height
:
200
px
;
list-style
:
none
;
margin
:
0
auto
;}
.
filterall li
{
float
:
left
;
margin-right
:
10
px
;
cursor
:
pointer
;}
.
filterall li p
{
text-align
:
center
;
color
:
#fff
;
font-size
:
20
px
;}
</
style
>
</
head
>
<
body
>
<
h1
>
拍照上传
</
h1
>
<
video
id=
"video"
width=
"480"
height=
"320"
autoplay
></
video
>
<
button
id=
"snap"
>
截图
</
button
>
<
canvas
id=
"canvas"
width=
"480"
height=
"320"
></
canvas
>
<
h2
>
滤镜列表
</
h2
>
<
div
class=
"filterlist"
>
<
ul
class=
"filterall"
id=
"currentlist"
>
<
li
><
div
><
img
src=
"http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg"
class=
"filter0"
style=
"
width
:
100
px
;
height
:
100
px
;
"
></
div
><
p
>
黑白照
</
p
></
li
>
<
li
><
div
><
img
src=
"http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg"
class=
"filter1"
style=
"
width
:
100
px
;
height
:
100
px
;
"
></
div
><
p
>
朦胧
</
p
></
li
>
<
li
><
div
><
img
src=
"http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg"
class=
"filter2"
style=
"
width
:
100
px
;
height
:
100
px
;
"
></
div
><
p
>
饱和
</
p
></
li
>
<
li
><
div
><
img
src=
"http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg"
class=
"filter3"
style=
"
width
:
100
px
;
height
:
100
px
;
"
></
div
><
p
>
老照片
</
p
></
li
>
<
li
><
div
><
img
src=
"http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg"
class=
"filter4"
style=
"
width
:
100
px
;
height
:
100
px
;
"
></
div
><
p
>
色相翻转
</
p
></
li
>
<
li
><
div
><
img
src=
"http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg"
class=
"filter5"
style=
"
width
:
100
px
;
height
:
100
px
;
"
></
div
><
p
>
X
光
</
p
></
li
>
<
li
><
div
><
img
src=
"http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg"
class=
"filter6"
style=
"
width
:
100
px
;
height
:
100
px
;
"
></
div
><
p
>
高亮
</
p
></
li
>
<
li
><
div
><
img
src=
"http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg"
class=
"filter7"
style=
"
width
:
100
px
;
height
:
100
px
;
"
></
div
><
p
>
均衡感
</
p
></
li
>
</
ul
>
</
div
>
<
img
src=
""
width=
"200"
height=
"200"
id=
"test"
>
<!--
拍照功能需要配合
javascript
使用
-->
<
script
type=
"text/javascript"
>
/**
* Created by Rodger on 2015/2/26.
*/
/*
**
这是第一种写法,下面有一种更好的写法
window.addEventListener('DOMContentLoaded',function(){
var canvas=document.getElementById('canvas'),
video=document.getElementById('video'),
context=canvas.getContext('2d'),
videoObj={'video':true},
errBack= function (error) {
console.log('Video capture error:',error.code);
};
if(navigator.getUserMedia){
navigator.getUserMedia(videoObj,function(stream){
video.src=stream;
video.play();
},errBack)
}else if(navigator.webkitGetUserMedia){
navigator.webkitGetUserMedia(videoObj,function(stream){
video.src=window.webkitURL.createObjectURL(stream);
video.play();
},errBack)
}else if(navigator.mozGetUserMedia){
navigator.mozGetUserMedia(videoObj,function(stream){
video.src=window.URL.createObjectURL(stream);
video.play();
},errBack)
};
document.getElementById('snap').addEventListener('click',function(){
context.drawImage(video,0,0,640,480);
})
},false)
*/
//
下面的代码比上面的更加简洁和统一
window
.
addEventListener
(
'DOMContentLoaded'
,
function
(){
//
获取要控制的
DOM
对象
var
canvas
=
document
.
getElementById
(
'canvas'
),
context
=
canvas
.
getContext
(
'2d'
),
video
=
document
.
getElementById
(
'video'
),
//
这是
getUserMedia
的第一个参数
constraints
的值
videoObj
=
{
'video'
:true
},
errBack
=function
(error){
console
.
log
(
'video capture error:'
,error.
code
);
}
/*
**
这种直接把
navigator
的各种
getUserMedia
函数直接赋值给
getUserMedia
是不行的
*
var getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;
getUserMedia(videoObj,function(localMediaStream){
video.src=window.URL.createObjectURL(localMediaStream);
video.play();
},errBack);
*/
navigator
.
myGetUserMedia
=
navigator
.getUserMedia
||
navigator
.webkitGetUserMedia
||
navigator
.mozGetUserMedia
||
navigator
.msGetUserMedia;
navigator
.
myGetUserMedia
(
videoObj
,
function
(localMediaStream){
/*
并不是每个
window
都有
URL
对象
,
要加上浏览器前缀
**video.src=window.URL.createObjectURL(localMediaStream);
* */
window
.
URL
=
window
.
URL
||
window
.webkitURL
||
window
.mozURL
||
window
.msURL;
video
.
src
=
window
.
URL
.createObjectURL(localMediaStream);
video
.
play
();
},
errBack
);
video
.
onloadedmetadata
=function
(e){
var
snapBtn
=
document
.
getElementById
(
'snap'
);
snapBtn
.
addEventListener
(
'click'
,
function
(){
context
.
drawImage
(
video
,
0
,
0
,
480
,
320
);
var
image
= new
Image
();
image
.
src
=
canvas
.
toDataURL
(
"image/png"
);
var
testimg
=
document
.
getElementById
(
'test'
);
testimg
.
src
=
image
.
src
;
})
};
})
var
EventUtil
=
{
addHandler
:function
(element,type,handler){
if
(element.
addEventListener
){element.
addEventListener
(type,handler,
false
);}
else if
(element.
attachEvent
){element.
attachEvent
(
"on"
+
type,handler);}
else
{element[
"on"
+
type]
=
handler;}
},
removeHandler
:function
(element,type,handler){
if
(element.
removeEventListener
){element.
removeEventListener
(type,handler,
false
);}
else if
(element.
detachEvent
){element.
detachEvent
(
"on"
+
type,handler);}
else
{element[
"on"
+
type]
=null
;}
},
getEvent
:function
(event){
return
event
?
event
:
window
.
event
;
/*
获取事件对象
*/
},
getTarget
:function
(event){
return
event.
target
||
event.
srcElement
;
/*
获取目标元素
*/
},
preventDefault
:function
(event){
/*
取消事件的默认设置
*/
if
(event.
preventDefault
){
event.
preventDefault
();
}
else
{
event.
returnValue
=false
;
}
},
stopPropagation
:function
(event){
/*
取消事件冒泡
*/
if
(event.
stopPropagation
){
event.
stopPropagation
();
}
else
{
event.
cancelBubble
=true
;
}
}
};
var
currentlist
=
document
.
getElementById
(
'currentlist'
);
EventUtil
.
addHandler
(
currentlist
,
"click"
,
function
(e){
var
classnames
=
EventUtil
.
getTarget
(e).
className
;
var
videos
=
document
.
getElementById
(
'video'
);
var
can
=
document
.
getElementById
(
'canvas'
);
videos
.
className
=
classnames
;
can
.
className
=
classnames
;
});
</
script
>
</
body
>
</
html
>