HTML5之图片上传预处理缩略图预览

当用户上传图片时，如何上传一个大图，我们势必会在前台做成缩略图再上传以节约流量，减少用户上传等待时间。其中主要使用到了 1. File API 获取图片 2....

HTML 阅读 89.8万 15 分钟阅读 2017-06-06 17:14

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

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

以上相关API 都可以在MDN上找到

代码示例1

<!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>

代码示例2

<input type="file" onchange="upperCase(this.files[0])">
<canvas width="32" height="32" id="myCanvas"></canvas>
<script>
	function upperCase(thiss){
		var img = document.createElement('img');
		img.src = window.URL.createObjectURL(thiss);
		img.onload = function () {
			var canvas = document.getElementById("myCanvas");
			var ctx = canvas.getContext('2d');
			ctx.drawImage(img, 0, 0, 32, 32);
		}
	}
</script>

详解：

获取图片

通过 File API 获取图片。

var input = document.createElement('input');
input.type = 'file';
input.addEventListener('change', function() {
  var file = this.files[0];
});
input.click();

预览图片

使用 createObjectURL() 或者 FileReader 预览图片

var img = document.createElement('img');
img.src = window.URL.createObjectURL(file);

var img = document.createElement("img");
var reader = new FileReader();
reader.onload = function(e) {
  img.src = e.target.result;
}
reader.readAsDataURL(file);

使用 canvas 做缩略图

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
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);

上传缩略图

canvas.toBlob(function(blob) {
  var form = new FormData();
  form.append('file', blob);
  fetch('/api/upload', {method: 'POST', body: form});
});

DEMO：upload.js

var fileObj = {};

var imgElem = document.querySelector(".images");
var fileElem = document.createElement('input');
fileElem.type = 'file';

imgElem.addEventListener('click', function() {
  fileElem.click();
});

fileElem.addEventListener('change', function() {
  startProgress();
  var file = this.files[0];
  imgElem.innerHTML = '<img src="' + window.URL.createObjectURL(file) + '" />';

  btnSave.disabled = true;

  var img = document.createElement("img");
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  img.src = window.URL.createObjectURL(file);
  img.onload = function() {
    var MAX_WIDTH = 800;
    var MAX_HEIGHT = 600;
    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;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, width, height);
    canvas.toBlob(function(blob) {
      var form = new FormData()
      form.append('file', blob);
      fetch('/api/upload', {method: 'POST', body: form })
        .then(function(rsp) {return rsp.json()})
        .then(function(rsp) {
          fileObj = rsp;
          stopProgress();
          btnSave.disabled = false;
        })
        .catch(function(rsp) {
          console.log(rsp);
          stopProgress();
          btnSave.disabled = false;
        })
    })
  }
});

<canvas id="myCanvas" width="300" height="300" style="border:solid 1px #CCC;"> 您的浏览器不支持canvas，建议使用最新版的Chrome </canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var img = new Image(); img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg"; img.onload = function(){ ctx.drawImage(img,30,30); //在画布坐标（30,30）的位置绘制图片 } </script>

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var img = new Image(); img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg"; img.onload = function(){ ctx.drawImage(img,30,30,250,150); //在画布坐标（30,30）的位置绘制一张宽度为250，高度为150的图片 }

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var img = new Image(); img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg"; img.onload = function(){ ctx.drawImage(img,10,20,300,300,30,30,250,150); //在画布坐标（30,30）的位置绘制一张宽度为250、高度150的图片，这种图片是在img上坐标为（10,20）的位置所裁剪出来的宽高均为300的区域 }

var formdata; if (typeof FileReader === 'undefined') {//检测浏览器对FileReader兼容性 showimg.innerHTML = "抱歉，你的浏览器不支持 FileReader"; imginput.setAttribute('disabled', 'disabled'); } else { imginput.addEventListener('change', function() { var file = this.files[0]; console.log(file); if (!/image\/\w+/.test(file.type)) { alert("请确保文件为图像类型"); return false; } var reader = new FileReader();//创建一个FileReader实例　　　　　　　reader.readAsDataURL(file);//将文件内容进行base64编码后输出　　　　　　　//console.log(reader) 　　　　　　　reader.onload = function(e) { 　　　　　　　　　　//console.log(this.result);//读取完成后，数据保存在对象的result属性中　　　　　　　　　　$(showimg).append('<img src="' + this.result + '" alt=""/>');//将选中的图片显示在页面上 //alert('111');　　　　　　　　　　　 formData=new FormData(); 　　　　　　　　　　formData.append('file',file); 　　　　　　　　　　console.log(formData.getAll('file')); 　　　　　　 } 　　　}, false); } $.ajax({ url : url, type : 'post', dataType:"json", data:formData, cache: false, processData : false,// 告诉jQuery不要去处理发送的数据 contentType : false,// 告诉jQuery不要去设置Content-Type请求头 success : function(data, status, xhr) { //alert(1); }, error : function(xhr, errorType, error) { //alert(0); } });

Comments 评论区

广西南宁市 2017-06-06 17:23

广西南宁市2017-06-06 17:23:27

广西南宁市2017-06-06 17:27:36

HTML5- Canvas入门（五） - vajoy
如何让你的动画更自然

#⁰

广西南宁市 2017-06-06 17:39

window.webkitURL是用来判断什么的?

URL对象是硬盘（SD卡等）指向文件的一个路径，如果我们做文件上传的时候，想在没有上传服务器端的情况下看到上传图片的效果图的时候就可是以通过[code]var url=window.URL.createObjectURL(obj.files[0]);[/url]获得一个http格式的url路径，这个时候就可以设置到<img>中显示了。
window.webkitURL和window.URL是一样的，window.URL标准定义，window.webkitURL是webkit内核的实现（一般手机上就是使用这个），还有火狐等浏览器的实现。

广西南宁市2017-12-29 14:08:38

多张图片上传jQuery插件

广西河池市宜州市 2018-07-09 11:58

h5图片上传简易版（FileReader+FormData+ajax）

Comment Form 留下评论

正在回复 #0

粘贴图片、拖拽文件，或点上面的按钮上传 图片会自动插入 [img] 标签，其他附件会自动插入 [attach] 标签。

正在上传...

提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称；reply 会生成一条带楼层回链的新评论，quote 会附带完整引用块，并保持评论锚点跳转。