微信浏览器内兼容android iOS调取手机摄像头进行拍照、打水印、压缩、预览

实现这些功能使用了如下插件：

• 图片打水印：watermark.js(https://github.com/brianium/watermarkjs)
• 图片压缩：localResizeImg(https://github.com/think2011/localResizeIMG)
• 读取图片元数据：exif.js(https://github.com/exif-js/exif-js)
  
  

html部分

//调起摄像头按钮
type="file" id="file" accept="image/*" capture="camera">
//预览图片
"fileBga">
//放置压缩后图片的base64编码
"fileBg" style="display:none;">

首先调取手机摄像头进行拍照

type="file" id="file" accept="image/*" capture="camera">

capture="camera"是为了兼容部分安卓机型。这里使用accept="image/*"而不使用accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"是因为经测试华为部分机型在不使用”image/*”的时候无法调起摄像头，而是打开了文件管理器。

document.querySelector('#file').addEventListener('change', function() {
//监听input的change事件，存储用户拍摄的图片
        var file = this.files[0];
        EXIF.getData(file, function() {
            var orientation = EXIF.getTag(this, 'Orientation');
            //使用exif.js获取图片元数据
            if (orientation == 6) {
            //iOS系统拍摄图片上传的默认方向为home键在右的横屏模式
            //通过exif.js获取的图片元数据的orientation值为6，以下兼容iOS
                document.getElementById('fileBga').style.transform = 'rotate(90deg)';
                var h = $('#fileBga').height();
                var w = $('#fileBga').width();
                $('#fileBga').height(w);
                $('#fileBga').width(h);
                //旋转放置预览图片的元素，并将宽高值交换
                var rotate = function(target) {
                    //因为图片被旋转，所以调用插件其中一种canvas加水印的方法,方便打横置的水印
                    var context = target.getContext('2d');
                    var text = 'puzzle-idea';
                    var metrics = context.measureText(text);
                    var x = (target.width / 2) - (metrics.width + 24);
                    var y = (target.height / 2) + 48 * 2;

                    context.translate(x, y);
                    context.globalAlpha = 0.5;
                    context.fillStyle = '#fff';
                    context.font = '200px 微软雅黑';
                    //旋转水印
                    context.rotate(-90 * Math.PI / 180);
                    context.fillText(text, 0, 0);
                    return target;
                };

                watermark([file])
                    //开始打水印
                    .image(rotate)
                    .then(function(img) {
                        //防止多次拍摄,初始化预览图片
                        $('#fileBga').html('');
                        document.getElementById('fileBga').appendChild(img);
                        var iOSsrc = img.src;
                        lrz(iOSsrc, { width: '100%' })
                            .then(function(rst) {
                                // 处理成功会执行
                                $('#fileBg').attr('src', rst.base64);
                            })
                            .catch(function(err) {
                                // 处理失败会执行
                                console.log(err);
                            })
                    });
            } else {
                watermark([file])
                     //安卓打水印
                    .image(watermark.text.center('puzzle-idea', '200px 微软雅黑', '#fff', 0.5))
                    .then(function(img) {
                        $('#fileBga').html('');
                        document.getElementById('fileBga').appendChild(img);
                        var Androidsrc = img.src;
                        lrz(Androidsrc, { width: '100%' })
                            .then(function(rst) {
                                // 处理成功会执行
                                $('#fileBg').attr('src', rst.base64);
                            })
                            .catch(function(err) {
                                // 处理失败会执行
                                console.log(err);
                            })
                    });
            }
        });
    })