找回密码
当前位置：前端开发者 > HTML > 正文

前端开发 使用H5 解决 图片上传预处理

2018-07-20 分类：HTML 阅读(851) 评论(0)

前端的开发文档怎么写|前端开发怎么找项目|web前端开发的技术要求

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

其中主要使用到了

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

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

小二 上代码！！！
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <title>怎么做一个高端的前端开发师：html5处理图片 上传预处理</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>

web前端怎么开发权限设计|web前端开发没有项目经验怎么写|前端开发怎么强制清除缓存

赞(0)
前端开发者 » 前端开发 使用H5 解决 图片上传预处理
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论