H5调用摄像头上传阿里云

第一次写博客关于一些比较偏的H5调用摄像头的小知识

之前也用过csdn，但是从来没有在上面发布过东西，今天闲话也不多说进入正题了

实例

其实这个功能很容易实现，不过大部分人容易被网上的教程误导，当然我也是查询了众多资料，看了多篇博客，发现大部分的网上教程感觉如同ctrl+c，ctrl+v一般，毫无用处，也许是我不大会用吧。接下来我把我的代码给大家一看就简洁明了了。

首先我们需要在页面上画出我们所拍的东西

<!--描绘video截图-->
<canvas id="canvas" width="640" height="480"></canvas>

//绘制画面
context.drawImage(video, 0, 0, 640, 480);

接下来如何获取图片才是关键，网上教程大多不够清晰
在绘制画面之后图片会显示在canvas中这时候我们需要从canvas中获取

var dataUrl = canvas.toDataURL();

将canvas中的图片通过这个方法可以转换成图片img，然后再将img转成blob格式

 //转成blob
       var blob = dataURLtoBlob(dataUrl);
 //将获得的img转成blob
	 function dataURLtoBlob(dataurl) {
       	 var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
         bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
         while (n--) {
       	     u8arr[n] = bstr.charCodeAt(n);
        	}
         return new Blob([u8arr], {type: mime});
    	}

最后将blob转成file就可以直接通过formdate调用接口上传；

		let file = new File([blob], new Date() + '.jpg');
        var formdata = new FormData();
        formdata.append("file", file);

ok，到这里也就大功告成了。不会的可以一步一步来。