VUE 调用相机 利用canvas截图 并上传服务器

Posted 2023-03-30

参考技术A 我们使用javascript 的 Media Stream API 去访问用户的相机(不止是在电脑上，手机上也是如此)，这个API允许通过 流 去访问设备捕获的视频和音频。
第一步是检测当前浏览器是否支持该API:

为了捕获设备生成的视频流，我们使用mediaDevices对象上的getUserMedia方法。

我们可以通过传递所需的分辨率和最小和最大限制的信息来提高视频的要求：

canvas利用formdata上传到服务器

formdata，canvas，

1.首先绘制canvas图片

<canvas id="myCanvas" width="100" height="100" style="border:1px solid #d3d3d3;border-radius:50%">
        您的浏览器不支持 HTML5 canvas 标签。
</canvas>

这里canvas绘图就不是本文章讲解的内容，我们简单的在画布上写两个字：

var canvas = document.getElementById("myCanvas");
var ctx = this.c.getContext("2d");
ctx.textAlign = \'left\';
ctx.textBaseline = \'top\';
ctx.font = \'bold 16px arial\';
ctx.fillStyle = \'red\';
ctx.fillText(\'World\', 40,40);

效果如下

2.将图片转成二进制利用formdata上传

         let src = canvas.toDataURL("image/png")//这里转成的是base64的地址，直接用到img标签的src是可以显示图片的
         var fd = new FormData();
        
         function dataURItoBlob(dataURI) {//图片转成Buffer
    
             var byteString = atob(dataURI.split(\',\')[1]);
             var mimeString = dataURI.split(\',\')[0].split(\':\')[1].split(\';\')[0];
             var ab = new ArrayBuffer(byteString.length);
             var ia = new Uint8Array(ab);
             for (var i = 0; i < byteString.length; i++) {
                 ia[i] = byteString.charCodeAt(i);
             }
             return new Blob([ab], {type: mimeString});
         }
         var blob = dataURItoBlob(src);
 
         fd.append(\'source_from\',\'webpage_upload\')//在formdata加入需要的参数
         fd.append(\'file\',blob)
　　　　　/*以下是ng4的封装上传代码*/
         var service = ()=>{
             return this.repositoryService.uplodimage(fd)
         }
         var callback = (re)=>{
             if(re[\'success\']){
                 console.log(re)
                 this.form.image_cover_contents = re.data.file_info.file_path;
             }
         }
         this.core.doServiceAndCallback(\'上传图片\',service,callback)