實現這些功能使用瞭如下外掛：

html部分

//調起攝像頭按鈕
<input type="file" id="file" accept="image/*" capture="camera">
//預覽圖片
<div id="fileBga"></div>
//放置壓縮後圖片的base64編碼
<img id="fileBg" style="display:none;">

首先調取手機攝像頭進行拍照

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

capture="camera"

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);
                            })
                    });
            }
        });
    })