HTML5 之图片上传预处理

最新推荐文章于 2021-06-17 04:55:09 发布

转载最新推荐文章于 2021-06-17 04:55:09 发布 · 201 阅读

文章标签：

#Html5

Html5 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种前端实现图片上传的方法，通过使用FileAPI、createObjectURL()、FileReader和canvas来创建并上传图片的缩略图，有效减少了网络流量消耗及提高了用户体验。

当用户上传图片时，如何上传一个大图，我们势必会在前台做成缩略图再上传以节约流量，减少用户上传等待时间。

其中主要使用到了
1. File API 获取图片
2. 使用 createObjectURL() 或者 FileReader 预览图片
3. 使用 canvas 做缩略图
4. 上传缩略图

以上相关API 都可以在MDN上找到
MDN API查找地址

小二上代码！！！
html 代码

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <script>
        window.onload = function () {
            var input = document.createElement('input');
            input.type = 'file';
            input.addEventListener('change', function () {
                var file = this.files[0];
                var img = document.createElement('img');
                img.src = window.URL.createObjectURL(file);
                img.onload = function () {
                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext('2d');
                    var MAX_WIDTH = 150;
                    var MAX_HEIGHT = 200;
                    var width = img.width;
                    var height = img.height;

                    if (width > height) {
                        if (width > MAX_WIDTH) {
                            height *= MAX_WIDTH / width;
                            width = MAX_WIDTH;
                        }
                    } else {
                        if (height > MAX_HEIGHT) {
                            width *= MAX_HEIGHT / height;
                            height = MAX_HEIGHT;
                        }
                    }

                    canvas.width = width;
                    canvas.height = height;
                    ctx.drawImage(img, 0, 0, width, height);
                    document.body.appendChild(canvas);

                    var btn = document.createElement('button');
                    btn.innerHTML = '上传';
                    document.body.appendChild(btn);
                    btn.addEventListener('click', function() {
                        /*
                            toBlob的兼容性问题使用
                             https://github.com/blueimp/JavaScript-Canvas-to-Blob 这个库，就可以解决
                        */
                        canvas.toBlob(function(blob) {
                            var form = new FormData();
                            form.append('file', blob);
                            fetch('/api/upload', {method: 'POST', body: form});
                        });
                    }, false);
                };

                // document.body.appendChild(img); 原始图片是不用展示出来的
            }, false);
            document.body.appendChild(input);
        };
    </script>
</body>

</html>