⑴ html5怎样调用手机摄像头或者相册
HTML5技术支持WebApp在手机上拍照，显示在页面上并上传到服务器。这是手机微博应用中常见的功能，当然你也可以在其它类型应用中适当使用此技术。
1、 视频流
HTML5 的 The Media Capture（媒体捕捉） API 提供了对摄像头的可编程访问，用户可以直接用 getUserMedia（请注意目前仅Chrome和Opera支持）获得摄像头提供的视频流。我们需要做的是添加一个HTML5 的 Video 标签，并将从摄像头获得的视频作为这个标签的输入来源。
<video id=”video” autoplay=”"></video>
<script>
var video_element=document.getElementById(‘video’);
if(navigator.getUserMedia){ // opera应使用opera.getUserMedianow
navigator.getUserMedia(‘video’,success,error); //success是回调函数,当然你也可以直接在此写一个匿名函数
}
function success(stream){
video_element.src=stream;
}
</script>
此时，video 标签内将显示动态的摄像视频流。下面需要进行拍照了。
2、 拍照
拍照是采用HTML5的Canvas功能，实时捕获Video标签的内容，因为Video元素可以作为Canvas图像的输入，所以这一点很好实现。主要代码如下：
var canvas=document.createElement(‘canvas’); //动态创建画布对象
var ctx=canvas.getContext(’2d’);
var cw=vw,ch=vh;
ctx.fillStyle=”#ffffff”;
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //将video对象内指定的区域捕捉绘制到画布上指定的区域，可进行不等大不等位的绘制。
document.body.append(canvas);
3、 图片获取
从Canvas获取图片数据的核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像，类似于“data:image/png;base64,xxxxx”的格式。
var imgData=canvas.toDataURL(“image/png”);
这样，imgData变量就存储了一长串的字符数据内容，表示的就是一个PNG图像的base64编码。因为真正的图像数据是base64编码逗号之后的部分，所以要让实际服务器接收的图像数据应该是这部分，我们可以用两种办法来获取。
第一种：是在前端截取22位以后的字符串作为图像数据，例如：
var data=imgData.substr(22);
如果要在上传前获取图片的大小，可以使用：
var length=atob(data).length; //atob 可解码用base-64解码的字串
第二种：是在后端获取传输的数据后用后台语言截取22位以后的字符串（也就是在前台略过上面这步直接上传）。例如PHP里：
$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);
4、 图片上传
在前端可以使用Ajax将上面获得的图片数据上传到后台脚本。例如使用jQuery时可以用：
$.post(‘upload.php’,{‘data’:data});
在后台我们用PHP脚本接收数据并存储为图片。
function convert_data($data){
$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);
save_to_file($image);
}
function save_to_file($image){
$fp=fopen($filename,’w');
fwrite($fp,$image);
fclose($fp);
}
以上的解决方案不仅能用于Web App拍照上传，也可以通过Canvas的编辑功能函数提供图片编辑，例如裁剪、上色、涂鸦、圈点等功能，然后把用户编辑完的图片上传保存到服务器上。
在还在不断补充修正的HTML5的驱动下，Web App与Native App之间的距离将越来越小。在可预见的不远的未来，越来越多老的和新的开发项目必将会迁移到WEB应用上来。
相关规范：
The MediaCapture API：http://www.w3.org/TR/media-capture-api/
Canvas：http://dev.w3.org/html5/2dcontext/
⑵ 如何使用HTML5实现拍照上传应用
在HTML5规范的支持下，WebApp在手机上拍照已经成为可能。在下面，我将讲解Web App如何用手机进行拍照，显示在页面上并上传到服务器。
1、 视频流
HTML5 The Media Capture
API提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流。我们需要做的是添加一个HTML5的Video标
签，并将从摄像头获得视频作为这个标签的输入来源（请注意目前仅Chrome和Opera支持getUserMedia。补充：请使用Opera支持HTML5的新版本，如果是Chrome，版本需为Chrome 18.0.1008+，并使用about:flags来开启WebRTC，请看下图）。
[html] view plain
<video id="video" autoplay=""></video>
<script>
var video_element = document.getElementById('video');
if (navigator.getUserMedia) { // opera should use opera.getUserMedia now, chrome use webkitGetUserMedia
navigator.getUserMedia('video',success, error);
}
function success(stream) {
video_element.src =stream;
}
</script>
视频流
2、 拍照
拍照功能，我们采用HTML5的Canvas实时捕获Video标签的内容，Video元素能作为Canvas图像的输入，这一点很棒。主要代码如下：
[html] view plain
<script>
var canvas =document.createElement('canvas');
var ctx = canvas.getContext('2d');
var cw = vw;
var ch = vh;
ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, cw, ch);
ctx.drawImage(video_element, 0, 0, vvw,vvh, 0,0, vw,vh);
document.body.append(canvas);
</script>
3、 图片获取
下面我们要从Canvas获取图片数据，其核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像，类似于“data:image/png;base64,xxxxx”的格式。
[html] view plain
var imgData =canvas.toDataURL("image/png");
因为真正图像数据是base64编码逗号之后的部分，所以我们实际服务器处理的图像数据应该是这部分，我们可以用两种办法来获取。
第一种：是在前端截取22位以后的字符串作为图像数据，例如：
[html] view plain
var data = imgData.substr(22);
如果要在上传前获取图片的大小，可以使用：
[html] view plain
var length = atob(data).length;// atob decodes a string of data which has been encoded using base-64 encoding
第二种：是在后端获取传输的数据后用后台语言截取22位以后的字符串。例如PHP里：
[html] view plain
$image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);
4、 图片上传
在前端可以使用Ajax将上面获得的图片数据上传到后台脚本。例如使用jQuery时：
[html] view plain
$.post('upload.php',{ 'data' : data } );
在后台我们用PHP脚本接收数据并存储为图片。
[html] view plain
function convert_data($data){
$image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);
save_to_file($image);
}
function save_to_file($image){
$fp = fopen($filename, 'w');
fwrite($fp, $image);
fclose($fp);
}
请注意，以上的解决方案不仅能用于Web App拍照上传，并且你可以实现把Canvas的输出转换为图片上传的功能。这样你可以使用Canvas为用户提供图片编辑，例如裁剪、上色、涂鸦的画板功能，然后把用户编辑完的图片保存到服务器上。
Canvas涂鸦功能
在HTML5的驱动下，Web App与Native App之间是否还有不可逾越的鸿沟？我将会在3月23日网络开发者大会上现场来解答这个问题，敬请期待。
⑶ html5手机页面背景图片自适应大小问题
1，输入position：fixed；top：0；left：0；将整个div固定在屏幕的顶部和左侧。
⑷ html5开发手机端切图什么格式
jpg,gif,png都行
HTML5版相对有响应速度快(本地读取)、拖拽功能简单、前端切图不需要依赖服务器，减少开发成本。
在旧版的切图工具里，我们的做法是将图片上传到服务器，然后通过服务器端把图片切好后把对应的地址返回，前端再把页面显示出来。
这样的做法会导致在网络慢时出现长时间的等待，而如果页面放弃这里的操作，还需要将图片从服务器端删除掉。在拖拽参考线时也只能通过大量的代码去实现，还需要编写一些服务器端代码。
⑸ html5+js怎么实现手机头像上传，可裁剪
抱歉
这个已经不属于HTML+JS的内容了。
最常用的是.NET和PHP，这两个都有现成的模版可以下载。
⑹ html5手机移动端怎样能让一个div在固定的父div中任意触摸拖动
如果做过前端图片裁剪就比较好理解这个概念了。
大致是点击后判断是否接触了子div然后获得鼠标位置再不断的更新子div的坐标。
⑺ html5或者JS怎样调用手机摄像头或者相册
你给的网页用的是 <input accept="image/*" type="file">，在IOS端点击时会提示选择图片或相机，安卓端要看浏览器对这两个属性的优化，部分浏览器会直接跳转到资源管理器，优化做得好的可以直接提示选择相册或相机。
⑻ html5怎样调用手机摄像头或者相册
用input type=file capture=camcorder调用摄像头，会先让你选择拍照或者从相册选取。
首先实现在浏览器中调用手机摄像头，实现拍照功能并且把拍下的照片显示在页面并上传到服务器上，然后再在服务器端进行分析。
首先实现在浏览器中调用摄像头，当然用现在火的不行的html5，html5中的<video>标签，并将从摄像头获得视频作为这个标签的输入来源。实现拍照功能的html5代码：
<article>
<style scoped>
video { transform: scaleX(-1); }
p { text-align: center; }
</style>
<h1>Snapshot Kiosk</h1>
<section id="splash">
<p id="errorMessage">Loading...</p>
</section>
<section id="app" hidden>
<p><video id="monitor" autoplay></video> <canvas id="photo"></canvas>
<p><input type=button value="📷" onclick="snapshot()">
</section>
<script>
navigator.getUserMedia({video:true}, gotStream, noStream);
var video = document.getElementById('monitor');
var canvas = document.getElementById('photo');
function gotStream(stream) {
video.src = URL.createObjectURL(stream);
video.onerror = function () {
stream.stop();
};
stream.onended = noStream;
video.onloadedmetadata = function () {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
document.getElementById('splash').hidden = true;
document.getElementById('app').hidden = false;
};
}
function noStream() {
document.getElementById('errorMessage').textContent = 'No camera available.';
}
function snapshot() {
canvas.getContext('2d').drawImage(video, 0, 0);
}
</script>
</article>
经本人测试在android手机的opera浏览器浏览器下可以正常实现手机拍照功能。android手机下的google chrome浏览器还不行，自带的浏览器也测试没有通过。iphone手机的safari浏览器也是不支持的。
想了解更多关于html5调用手机摄像头的内容可以点击http://dev.w3.org/2011/webrtc/editor/getusermedia.html。
图片的获取：
下面我们要从Canvas获取图片数据，其核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像，类似于“data:image/png;base64,xxxxx”的格式。
Html代码
var imgData =canvas.toDataURL("image/png");
因为真正图像数据是base64编码逗号之后的部分，所以我们实际服务器处理的图像数据应该是这部分，我们可以用两种办法来获取。
第一种：是在前端截取22位以后的字符串作为图像数据，例如：
Html代码
var data = imgData.substr(22);
如果要在上传前获取图片的大小，可以使用：
Html代码
var length = atob(data).length;// atob decodes a string of data which has been encoded using base-64 encoding
第二种：是在后端获取传输的数据后用后台语言截取22位以后的字符串。例如PHP里
php代码:
$image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);
图片上传：
在前端可以使用Ajax将上面获得的图片数据上传到后台脚本。例如使用jQuery时：
js代码
$.post('upload.php',{ 'data' : data } );
在后台我们用PHP脚本接收数据并存储为图片。
php代码
function convert_data($data){
$image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);
save_to_file($image);
}
function save_to_file($image){
$fp = fopen($filename, 'w');
fwrite($fp, $image); fclose($fp);
}
请注意，以上的解决方案不仅能用于Web App拍照上传，并且你可以实现把Canvas的输出转换为图片上传的功能。这样你可以使用Canvas为用户提供图片编辑，例如裁剪、上色、涂鸦的画板功能，然后把用户编辑完的图片保存到服务器上。
⑼ HTML5中，如何为图片制作放大镜效果
制作图片的放大效果我考虑到的方法是将原始图片绘制到canvas上，然后在对canvas进行局部裁剪最后对裁剪的部分进行放大，这样就可以实现放大镜的效果。
这里我给出一个实现这个想法的示例。该示例实际上就是运用HTML5canvas中对画布进行裁剪与保存画布状态的相关知识实现的。
上面是给出示例的效果图。这是不是你想要的放大镜效果呢？
下面我们来看下示例代码：在这个示例中当你点击图片时图片就会出现上图效果，再一次点击时就变成原始图片了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>放大镜</title>
<!—HTML代码设计：一个简单的canvas元素-->
</head>
<body>
<div id="result-stub" class="well hidden">
<canvas id="canvas" width="345" height="345">
<p>你的浏览器不支持canvas元素</p>
</canvas>
</div>
<script>
window.onload=function() {
//获取canvas对象以及图片对象
var
canvas = document.getElementById('canvas'),
img = new Image(),
context = null,
dataUrl = null,
//设置一个标记，该标记的作用是控制我们点击canvas时放大镜效果的消失和出现
isMagnified = false,
//init函数只要是在图片加载时绘制出图形
init = function() {
img.onload = function() {
//绘制原始图片
context.drawImage(img, 0, 0);
//将图片信息转化为二进制信息或者URL信息存储在dataUrl中方便后面调用
dataUrl = canvas.toDataURL();
}
img.src = 'fist-pump-baby.jpg';
//设置标记值
isMagnified = false;
},
//magnify函数的作用是绘制具有放大镜效果的图形
magnify = function() {
//保存当前画布的绘制状态即画布绘制原始图片的状态。方便我们在后面恢复到绘制原始图片的状态
context.save();
//因为放大镜的圆圈和把手是通过canvas绘制的这里设置了一些绘制把手和圆圈的样式属性。
context.lineWidth = 10;//线条宽度
context.shadowColor = '#000';//阴影的颜色黑色
context.shadowBlur = 15;//模糊级别为15
context.shadowOffsetX = 5;//形状与阴影的水平距离5
context.shadowOffsetY = 5;//形状与阴影的垂直距离5
//保存画布当前状态即我们设置阴影属性后的状态方便后面使用
context.save();
//绘制出放大镜把手的图形
context.beginPath();
context.moveTo(230, 230);
context.lineCap = 'round';
context.lineWidth = 30;
context.lineTo(285, 285);
context.stroke();
//对图片进行裁剪，裁剪出的图形是一个圆形。
context.beginPath();
context.arc(
150,
150,
115,
0,
Math.PI * 2,
true);
context.clip();
//创建一个新的Image对象，这个Image对象的图片资源是前面存储在dataUrl中的图片资源。所以这个Image对象和之前初始化的Image对象是完全一样的。
var magnified = new Image();
magnified.src = dataUrl;
//对Image对象进行放大1.5倍，并进行绘制。注意此时的画布状态时裁剪为一个圆形的状态，所以这里绘制的也仅仅是图片中的一个圆形区域。这里为了绘制出图片中娃娃的脸设置了绘制的图片有一定的偏移量。
context.scale(1.5, 1.5);
context.drawImage(img, -40, -40);
//调用restore()函数将画布状态恢复到绘制把放大镜把手时的状态，即具有阴影属性
context.restore();
//绘制放大镜的圆圈，即绘制刚刚我们裁剪出来图片的边框。这样刚刚裁剪出来的圆形图形就会正好处于放大镜的圆圈中。
context.arc(
150,
150,
115,
0,
Math.PI * 2,
true);
context.stroke();
//重置画布，将画布恢复到绘制元素图片的状态，以方便绘制出放大效果后，再次点击是绘制原始图片。
context.restore()；
//设置标记值，实现点击后放大效果消失。
isMagnified = true;
};
//加载初始化代码，即当运行页面时会在页面绘制出一个原始图像
init();
//监听画布的点击事件，当点击页面的图像时会根据标记的值来进行判断是否对画布进行方大处理
$('canvas').click(function() {
if (isMagnified) {
init();//绘制原始图像
}
else {
magnify();//绘制放大的图像
}
});
}
</script>
<script src="jquery.js"></script>
</body>
</html>
对于这些知识在一个叫秒秒学的教程网站上有相关的学习资料，有兴趣的可以自己去看看，希望对你有帮助。
⑽ canvas图片剪切问题,求html5大神指点
看你描述应该是
图片缩放
导致的问题,
假设你图片是
300*300的
画布是150*150
你将图片放到画布上已经缩小一倍了
你移动
sx
sy的时候
实际计算得将倍数算进去
比如你距离画布左边是10像素
实际上你获取图片的时候应该是
10*2=20
这样猜才对