手机拍照预览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})这里面设置的。