页面调用手机拍照

背景：使用到手机拍照功能，记录一下

vue 页面：

<input type="file" style="display: none" accept="image/*" capture="camera" id="face_file"
                   multiple="multiple"></input>
<div id="image" >人脸认证</div>

<input type="file" accept="image/*" ></input>

在pc上为上传图片。在手机端为调用拍照或上传相册。设置caputer="camera"后，只有拍照，无上传。multiple="multiple"为允许多传。因为input比较丑，将其隐藏，在div的点击事件中触发input的点击 $("#face_flie").click();

js方法：

$(function () {
        $('#image').click(function(){
          $('#face_file').click();
        });
        $('#face_file').change(function () {
            var sName = this.value;
            if (!sName) {
                //$('#face_file').click();
                return;
            }
            if (test(this.value) == false) {
                //$('#face_file').click();
                return;
            }
            //文件
            this.files[0];
        });
    })

绑定点击方法和变更方法。vue需要引用js.

import $ from "jquery"

npm install 方法（ps:package.json中写了依赖jquery才可以）。或者直接npm install --save jquey

如果想要调用vue的属性或者方法的话可以在vue中添加

window.vm = this;执行时机页面加载完成，mounted  
(PS:created:页面加载完成前
    mounted:页面加载完成后
    methods:方法，调用触发
    watch:监听，变动时触发
    computed:计算属性，未变化时不会执行。
)

照片后续处理：

     可以将图片放入页面，或者存到数据库，也可以base64暂时保存在页面上,随后上传。下面为以base64存在vue的字段里面

            objUrl = getObjectURL(this.files[0]);
            if (objUrl) {
                //ios 需要旋转图片
                getPhotoOrientation(this.files[0]);
                //处理图片base64和旋转
                render(objUrl, 400, 400, sName);
            }

    /**获取路径*/
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }

function render(src, MaximgW, MaximgH, sName) {
        var image = new Image();
        image.onload = function () {
            var canvas = document.getElementById('canvas');
            //检查图片拍摄效果
            //canvas.style.display="block";
            //样式自行控制 显示或隐藏
            $("#face_file").addClass("imgupload-hide");
            //图片压缩
            if (image.width > image.height) {
                imageWidth = MaximgW;
                imageHeight = MaximgH * (image.height / image.width);
            } else if (image.width < image.height) {
                imageHeight = MaximgH;
                imageWidth = MaximgW * (image.width / image.height);
            } else {
                imageWidth = MaximgW;
                imageHeight = MaximgH;
            }
            canvas.width = imageWidth;
            canvas.height = imageHeight;
            //图片放入画布
            var con = canvas.getContext('2d');
            con.clearRect(0, 0, canvas.width, canvas.height);
            //不同手机需要旋转的角度不一样
            if (orient == 6) {
                canvas.width = imageHeight;
                canvas.height = imageWidth;
                var canvas_w = Number(con.canvas.width);
                var canvas_h = Number(con.canvas.height);
                con.save(); //保存状态
                con.translate(canvas_w / 2, canvas_h / 2); //设置画布上的(0,0)位置，也就是旋转的中心点
                con.rotate(90 * Math.PI / 180); //把画布旋转90度
                // 执行Canvas的drawImage语句
                // con.drawImage(image,0,0,image.width,image.height,0,0,imageWidth,imageHeight); //把图片绘制在画布translate之前的中心点，
                con.drawImage(image, Number(0) - canvas_h / 2, Number(0) - canvas_w / 2, imageWidth, imageHeight); //把图片绘制在画布translate之前的中心点，
                // con.drawImage(image, 0,0); //把图片绘制在画布translate之前的中心点，
                con.restore(); //恢复状态
            } else if (3 == orient) {
                //3旋转180
                // angel = 180;
                con.rotate(180 * Math.PI / 180); //把画布旋转90度
                con.drawImage(image, 0, 0, image.width, image.height, 0, 0, imageWidth, imageHeight);
            } else if (8 == orient) {
                //8旋转90
                // angel = 270;
                canvas.width = imageHeight;
                canvas.height = imageWidth;
                var canvas_w = Number(con.canvas.width);
                var canvas_h = Number(con.canvas.height);
                con.save(); //保存状态
                con.translate(canvas_w / 2, canvas_h / 2); //设置画布上的(0,0)位置，也就是旋转的中心点
                con.rotate(270 * Math.PI / 180); //把画布旋转90度
                // 执行Canvas的drawImage语句
                // con.drawImage(image,0,0,image.width,image.height,0,0,imageWidth,imageHeight); //把图片绘制在画布translate之前的中心点，
                con.drawImage(image, Number(0) - canvas_h / 2, Number(0) - canvas_w / 2, imageWidth, imageHeight); //把图片绘制在画布translate之前的中心点，

                // con.drawImage(image, 0,0); //把图片绘制在画布translate之前的中心点，
                con.restore(); //恢复状态
            } else {
                // 执行Canvas的drawImage语句
                con.drawImage(image, 0, 0, image.width, image.height, 0, 0, imageWidth, imageHeight);

            }
            // //图片的base64位字符串
            base64 = canvas.toDataURL("image/png");
            // console.log(base64)
            //这里写入vue 属性
            if (vm.isStart) {
                vm.startPhoto = base64;
                vm.isStart = false;
                vm.isSave = false;
            } else {
                vm.endPhoto = base64;
                vm.isSave = false;
                vm.sub();
            }
        }
        image.src = src;
    }