php网页拍照并上传,HTML中网页拍照并上传照片的实现方法

对于如何在网页上进行拍照并上传照片的方法，可能很多程序员都觉得非常的简单，不就是调动一下摄像头开启吗?但是真正实现起来的话会发现，其实并不是这样子的，经过我们多次尝试终于成功了，下面就跟大家分享一下。

代码如下：

charset=UTF-8"

pageEncoding="UTF-8"%>

spittr.Spitter

type="text/css"

href="/resource/layui/css/layui.css" >

$(function() {

var pos = 0, ctx = null, saveCB, image = [];

//创建画布指定宽度和高度

var canvas = document.createElement("canvas");

canvas.setAttribute('width', 320);

canvas.setAttribute('height', 240);

//如果画布成功创建

if (canvas.toDataURL) {

//设置画布为2d，未来可能支持3d

ctx = canvas.getContext("2d");

//截图320*240，即整个画布作为有效区(cutx?)

image = ctx.getImageData(0, 0, 320, 240);

saveCB = function(data) {

//把data切割为数组

var col = data.split(";");

var img = image;

//绘制图像(这里不是很理解算法)

//参数data 只是每行的数据 ，例如320240 大小的照片，一张完整的照片下来需要240个data，每个data有320个rgb

for(var i = 0; i < 320; i++) {

//转换为十进制

var tmp = parseInt(col[i]);

img.data[pos + 0] = (tmp >> 16) & 0xff;

img.data[pos + 1] = (tmp >> 8) & 0xff;

img.data[pos + 2] = tmp & 0xff;

img.data[pos + 3] = 0xff;

pos+= 4;

}

//当绘制320240像素的图片时发给后端php

if (pos >= 4 320 240) {

//把图像放到画布上,输出为png格式

ctx.putImageData(img, 0, 0);

console.log(1,canvas.toDataURL("image/jpeg"));

$.post("/fileupload", {type: "data", img: canvas.toDataURL("image/jpeg")},

function(data,status){

alert(status);

}

);

pos = 0;

}

};

} else {

saveCB = function(data) {

//把数据一点点的放入image[]

image.push(data);

pos+= 4 320;

console.log(1,image.join('|'));

if (pos >= 4 320 * 240) {

$.post("/fileupload", {type: "pixel", img: image.join('|')});

pos = 0;

}

};

}

$("#webcam").webcam({

width: 320,

height: 240,

mode: "callback",

swffile: "/resource/jscam_canvas_only.swf",

onSave: saveCB,

onCapture: function () {

webcam.save();

},

debug: function (type, string) {

console.log(type + ": " + string);

}

});

});

注意

这是通过ajax来post图片到服务器上，这是http请求，不能直接本地post。

需要jquery.webcam.js和jscam_canvas_only.swf 使用的时候目录修改一下

本文由专业的app开发报价燚轩科技整理发布，如需转载请注明作者及出处。