手機拍照預覽2種實現方式

時間 2019-11-19

標籤手機拍照預覽實現方式简体版

原文原文鏈接

手機拍照並把圖片設定特定尺寸，在網上找了一些資料，可使用html5原生的方式也可使用插件，如今分別按2種方式實現javascript

原生的方式主要用到FileReaderphp

FileReader的實例擁有4個方法，其中3個用來讀取文件，另外一個是中斷文件，不管讀取成功仍是失敗，方法並不會返回結果，而是存儲在result屬性中css

一、abort 參數none 中斷讀取
二、readAsBinaryString 參數file 將文件讀取爲二進制碼
三、readAsDataURL 參數file 將文件讀取爲DataURL
四、readAsText file,[encoding] 將文件讀取爲文本該方法有2個參數，其中第二個參數是文本的編碼方式，默認值爲utf-8html

FileReader 包含一套完整的事件模型，用於捕獲讀取文件時的狀態html5

一、onabort 讀取中斷時觸發java

二、onerror 出錯時觸發ios

三、onload 文件讀取成功完成時觸發ajax

四、onloadend 讀取完成觸發，不管成功與失敗canvas

五、onloadstart 讀取開始時觸發後端

六、onprogress 讀取中觸發

fr.onload = function() {
this.result; 讀取的結果存儲在result屬性中
};

<body>
    <div id="test-file-info"></div>
    <div id="test-image-preview"></div>
    <form action="">
        <input id="test-image-file" type="file" capture="camera" accept="image/*" />
    </form>
</body>

<style>#test-image-preview {
    width: 100%;
    height: 200px;
    border: 1px solid #ff0000;
    overflow: hidden;
}

#test-image-preview canvas {
    width: 100%;
}
</style>

注意：關於畫布設置爲100%，只是顯示的大小，並非畫布的實際大小

<script>
window.onload = function() {
        var fileInput = document.getElementById('test-image-file');
        var info = document.getElementById('test-file-info');
        var preview = document.getElementById('test-image-preview');
        //var img = document.createElement("img");
        //preview.appendChild(img);


        fileInput.addEventListener('change', function(e) {
                console.log('change...');
                preview.innerHTML = "";
                //preview.style.backgroundImage='';
                if (!fileInput.value) {
                    info.innerHTML = '沒有選擇文件';
                    return;
                }

                //var file = fileInput.files[0];
                var file = e.target.files[0];
                var fontSize = file.size / 1024 / 1024;
                console.log(file.type);
                // info.innerHTML = '文件:' + file.name + '<br>'+'大小:'+	fontSize.toFixed(2) + "M"+'<br>'+'修改:'+file.lastModifiedDate;
                if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
                    alert('不是有效的圖片文件!');
                    return;
                }
                //FileReader 實例讀取成功時，把讀取的結果賦值給圖片的src
                var reader = new FileReader();
                reader.onload = function(e) {
                    console.log('reader.onload');
                    var data = e.target.result; //也能夠寫成var data = this.result;data指base64格式URL
                    compress(data);

                    function compress(data) {
                        var img = new Image();
                        img.src = data;
                        //preview.appendChild(img);
                        var maxW = 640;
                        img.onload = function() {
                            var cvs = document.createElement('canvas'),
                                ctx = cvs.getContext('2d');
                            if (img.width > maxW) {
                                img.height = maxW / img.width * img.height;
                                img.width = maxW;
                                //img.height = maxH;
                            }
                            cvs.width = img.width;
                            cvs.height = img.height;
                            ctx.clearRect(0, 0, cvs.width, cvs.height);
                            ctx.drawImage(img, 0, 0, img.width, img.height);
                            //經過 cvs.toDataURL(‘image/jpeg’,0.5)就能夠獲取到base64編碼值，
                            //而後你就能夠按照傳統的POST或者AJAX方式處理了。第二個參數是壓縮比
                            var dataUrl = cvs.toDataURL('image/jpeg', 1);
                            preview.appendChild(cvs);
                        }
                        //document.body.appendChild(cvs);
                        // 上傳略
                        $.post("server.php", { img: e.target.result }, function(ret) {}
                        }
                        // preview.style.backgroundImage='url('+ data +')';

                        ///FileReader 實例 把文件讀取爲DataURL格式,才能在圖片預覽中展現
                    }

                    reader.readAsDataURL(file);
                });
        };
</script>

後臺處理

$base64 = $_POST['img'];
$IMG = base64_decode( $base64 );
file_put_contents('1.png', $IMG );

也可以使用localResizeIMG4，使用比較方便，感受處理後的圖片也比較清晰

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>文件api</title>
    <style>
    #previewImgDiv {
        width: 200px;
        height: 200px;
        background: #f2f2f2;
        overflow: hidden;
    }

    #previewImgDiv img {
        width: 100%;
    }

    .file-input {
        position: relative;
        width: 100px;
    }

    .file-input button {
        width: 100%;
        height: 28px;
        line-height: 28px;
        color: #fff;
        background: #0fd5d3;
        border: none;
    }

    .file-input button:hover {
        background: #07b9b7;
    }

    .file-input button:focus {
        outline: none;
    }

    .file-input input {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
    }

    .file-input input:hover {
        cursor: pointer;
    }
    </style>
</head>

<body>
    <div id="test-file-info"></div>
    <div id="previewImgDiv">圖片預覽</div>
    <div class="file-input">
        <button class="btn btn-primary file-inner-btn">
            文件上傳
            <i class="ion-ios-cloud-upload-outline">
				</i>
        </button>
        <input type="file" capture="camera" accept="image/*" name="logo" id="file">
    </div>
</body>
<script src="dist/lrz.bundle.js"></script>
<script type="text/javascript">
document.querySelector('input').addEventListener('change', function() {
    // this.files[0] 是用戶選擇的文件
    lrz(this.files[0], { width: 500 })
        .then(function(rst) {

            // 把處理的好的圖片給用戶看看唄（可選）
            var imgDiv = document.getElementById('previewImgDiv');
            var img = new Image();
            img.src = rst.base64; //base64字符串
            imgDiv.innerHTML = "";
            imgDiv.appendChild(img);
            // img.onload = function () {
            //     document.body.appendChild(img);
            // };

            return rst;
        })

        .then(function(rst) {
            // 這裏該上傳給後端啦

            /* ==================================================== */
            // 原生ajax上傳代碼，因此看起來特別多，但絕對能用
            // 其餘框架，例如jQuery處理formData略有不一樣，請自行google，baidu。
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://localhost:5000/');

            xhr.onload = function() {
                if (xhr.status === 200) {
                    // 上傳成功
                } else {
                    // 處理其餘狀況
                }
            };

            xhr.onerror = function() {
                // 處理錯誤
            };

            xhr.upload.onprogress = function(e) {
                // 上傳進度
                var percentComplete = ((e.loaded / e.total) || 0) * 100;
            };

            // 添加參數
            rst.formData.append('fileLen', rst.fileLen);
            rst.formData.append('xxx', '我是其餘參數');

            // 觸發上傳
            xhr.send(rst.formData);
            /* ==================================================== */

            return rst;
        })

        .catch(function(err) {
            // 萬一出錯了，這裏能夠捕捉到錯誤信息
            // 並且以上的then都不會執行

            alert(err);
        })

        .always(function() {
            // 無論是成功失敗，這裏都會執行
        });
});
</script>

</html>

上面的樣式

#previewImgDiv{width:200px;height:200px;background:#f2f2f2;overflow:hidden;}
#previewImgDiv img{width:100%;}

只是顯示的大小，並非圖片實際大小，實際大小 lrz(this.files[0], {width: 500})這裏面設置的。