兼容IE8的摄像头拍照上传

比较好用的是jquery.webcam.js. 下面是官网的例子。  官网下载地址  jquery.webcam.js

<div id="webcam"></div>
<button id="take-photo">点击拍照</button>
$(function() {

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

	var canvas = document.createElement("canvas");
	canvas.setAttribute('width', 320);
	canvas.setAttribute('height', 240);
	
	if (canvas.toDataURL) {

		ctx = canvas.getContext("2d");
		
		image = ctx.getImageData(0, 0, 320, 240);
	
		saveCB = function(data) {
			//支持canvas的高级浏览器
			var col = data.split(";");
			var img = image;

			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;
			}

			if (pos >= 4 * 320 * 240) {
				ctx.putImageData(img, 0, 0);
				$.post("/upload.php", {type: "data", image: canvas.toDataURL("image/png")});
				pos = 0;
			}
		};

	} else {

		saveCB = function(data) {
                       //不支持canvas 一般是IE8及以下
			image.push(data);
			
			pos+= 4 * 320;
			
			if (pos >= 4 * 320 * 240) {
				$.post("/upload.php", {type: "pixel", image: image.join('|')});

                    image = []; // 这里是我自己实际运用加的，此代码用户清空image数组，否则形成闭包，数组以图片数量进行递增
				pos = 0;
			}
		};
	}

	$("#webcam").webcam({

		width: 320,
		height: 240,
		mode: "callback",
		swffile: "/download/jscam_canvas_only.swf",

		onSave: saveCB,

		onCapture: function () {
			webcam.save();
		},

		debug: function (type, string) {
			console.log(type + ": " + string);
		}
	});
    
         $("#take-photo").click(function(){
              webcam.capture();
         })
});

这里有几点需要注意

1. 谷歌需要在https下打开

2.  拍照生成的data应该是坐标像素对应的RGB值。 在不支持canvas的情况 需要后端转成图片。这里我不太清楚IE8怎样将RGB值转成图片。 有知道的可以和我说一下。  下面是java处理代码（原理大概就是循环遍历然后渲染每个像素的RGB值，PHP原理差不多，就是调用的方法名字不一样）

package com.vic;

import com.vic.common.utils.file.ReadFile;
import org.junit.Test;

import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
import java.io.File;
import java.util.List;
import java.util.UUID;

/**
 * Created by vic on 2017/11/9.
 */
public class ImgTest {

    @Test
    public void test() {
        String filePath = "E:\\img\\test.txt";  //上面生成的字符串 
        List<String> fileNameList = ReadFile.readFileByLines(filePath);
        StringBuffer pix = new StringBuffer();
        for (String fileNameLine : fileNameList) {
            pix.append(fileNameLine);
        }

          uploadBase32(320, 240, pix.toString());
    }

    /**
     * base32解码
     *
     * @param w
     * @param h
     * @param pix
     * @return
     */
    public String uploadBase32(int w, int h, String pix) {
        String savePath = "E:\\img\\";   //图片保留路径
        try {
            BufferedImage bf = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
            String[] rows = pix.split("\\|");
            for (int i = 0; i < rows.length; i++) {    //主要是这里，循环遍历再用setRGB渲染
                String[] col = rows[i].split(";");
                for (int j = 0; j < col.length; j++) {
                    int data = Integer.parseInt(col[j], 10);
                    bf.setRGB(j, i, data);
                }
            }
            File picPath = new File(savePath);
            if (!picPath.exists()) {
                picPath.mkdirs();
            }
            String fileName = UUID.randomUUID().toString() + ".jpg";
            savePath += fileName;
            ImageIO.write(bf, "jpg", new File(savePath));
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }
}