新蒲京200.c软件下载-app官网网址 > 工具建设 >

付费投稿安排

本文由码农网 – 杨勇原创,转发请看清文末的转载必要,接待到场大家的付费投稿安排!

1. 类型背景

商号开辟二个网址,在做客商头像修改的时候领导关系扩张一个由摄像头拍照达成改过头像的效果。因为大家网址是依赖Html5拓张开采,所以就一向动用H5来实现拍照。初始感觉那么些效果很简单,不过做的时候才发觉并不是那么粗略的。

图片 1

那是在AngularJs中中标完成调用录制头拍照并截图上传的例图:

图片 2

图片 3

2. 哪些调用录制头

$scope.photoErr = false;
$scope.photoBtnDiable = true;
var mediaStream = null,track = null;

navigator.getMedia = (navigator.getUserMedia ||
                      navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
                      navigator.msGetUserMedia);
        if (navigator.getMedia) {
            navigator.getMedia(
           {
               video: true
           },
           // successCallback
           function (stream) {
               var s = window.URL.createObjectURL(stream);
               var video = document.getElementById('video');
               video.src = window.URL.createObjectURL(stream);
               mediaStream = stream;
               track = stream.getTracks()[0];
               $scope.photoBtnDiable = false;               $scope.$apply();
           },
           // errorCallback
           function (err) {
               $scope.errorPhoto();
               console.log("The following error occured:" + err);
           });
              } else {
            $scope.errorPhoto();
        }

代码拆解深入分析:

navigator为浏览器对象,富含浏览器的音讯,这里就是用这一个目的张开录像头。$scope为AndularJs语法。第一步表明navigator.getMedia来调用浏览器不相同的展开摄像头函数,近日独有getUserMedia、webkitGetUserMedia、mozGetUserMedia、msGetUserMedia各类办法分别对应通用浏览器、谷歌浏览器、火狐浏览器和IE浏览器,浏览器会自行判别调用哪二个函数。第二步是调用展开浏览器,包罗八个参数,分别为索要利用的多媒体类型、获取成功重返的流多少管理函数以致操作退步重临错误消息管理函数。此中,使用时不仅能够安装录像还能够安装使用迈克风,设置方法为:

{
      video: true,
      audio: true
}

调用成功即张开录制头后归来录制流数据,大家得以将流多少设置到video标签在分界面上实时突显图像。mediaStream用来记录获取到的流数据,track在Chrome浏览器中用来追踪录制头状态,那三个变量都能用来关闭摄像头。

3. 拍照

$scope.snap = function () {
        var canvas = document.createElement('canvas');
            canvas.width = "400";
            canvas.height = "304";

            var ctx = canvas.getContext('2d');
            ctx.drawImage(video, 0, 0, 400, 304);
            $scope.closeCamera();
            $uibModalInstance.close(canvas.toDataURL("image/png"));
};

录像时索要选取到canvas标签,创制多少个canvas标签,设置大家需求拍照的尺寸大小,通过drawImage函数将video当前的图像保存到canvas标签,最后将图像数据转换为base64数据重临并关闭录制头,那样就实现了大家的版画作用。这里的$uibModalInstance对象是大家项目中展开弹出层的一个对象,用来调节弹出层的来得。

4. 什么样关闭录像头

$scope.closeCamera = function () {
            if (mediaStream != null) {
                if (mediaStream.stop) {
                    mediaStream.stop();
                }
                $scope.videosrc = "";
            }
            if (track != null) {
                if (track.stop) {
                    track.stop();
                }
            }
        }

正如前方所说,关闭摄像头的艺术是透过mediaStream和track变量,只然而,track只好关闭Chrome浏览器中的摄像头,那也是Chrome 45版本以上关闭录像头的格局。

5. 集成到AndularJs

实在,前边所说的都是在AndularJs中贯彻的,当然,这里只是达成了水墨画并重临拍照数据,我们想要在任啥地点方也应用,就需求将那有的独自出来,这里大家用到了AngularJs中的service机制,将这一部分单独做成三个service并在类型中流入,然后即可在别的地方调用了。

service注册:

app().registerService("h5TakePhotoService", function ($q, $uibModal) {

        this.photo = function () {
            var deferred = $q.defer();
            require([config.server + "/com/controllers/photo.js"], function () {
                $uibModal.open({
                    templateUrl: config.server + "/com/views/modal_take_photo.html",
                    controller: "photoModalController",
                    windowClass: "modal-photo"
                }).result.then(function (e) {
                    deferred.resolve(e);
                });
            });
            return deferred.promise;
        }

    });

调用格局:

$scope.takePhoto = function () {
      h5TakePhotoService.photo().then(function (res) {
           if (res != null && res != "") {
               $scope.myImage = res;
           }
      });
}

h5TakePhotoService为调整器中流入的拍照service对象,最终管理回来的图像数据,设置数据显示到分界面上。

6. 包容难点

珍视设有Chrome浏览器中,本地质度量试时,Chrome浏览器中能够平常使用,然则配置到服务器后就无法健康使用,报错消息为 [object NavigatorUserMediaError],这是因为Chrome浏览器在动用录像头时只帮助安全源访谈,所以一定要通过https访谈能力健康使用。

最终索要说一下,测验时只好由此 Studio、 java web、php中完成。

上一篇:付费投稿铺排
下一篇:没有了