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

发布时间：2017-06-06, 17:14:23 分类：HTML | 编辑 off 网址 | 辅助

正文 6445字数 874,996阅读

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

其中主要使用到了
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>

Run code

Cut to clipboard

代码示例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>

Run code

Cut to clipboard

详解：

获取图片

通过 File API 获取图片。

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

Run code

Cut to clipboard

预览图片

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

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

Run code

Cut to clipboard

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

Run code

Cut to clipboard

使用 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);

Run code

Cut to clipboard

上传缩略图


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

Run code

Cut to clipboard

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;
        })
    })
  }
});

Run code

Cut to clipboard

（支付宝）给作者钱财以资鼓励（微信）→

有过 3 条评论 »

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

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

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

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的图片
}

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

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的区域
}

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

reply | quote | #¹

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

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

URL对象是硬盘（SD卡等）指向文件的一个路径，如果我们做文件上传的时候，想在没有上传服务器端的情况下看到上传图片的效果图的时候就可是以通过

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插件

reply | quote | #²

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

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

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);
    }
});

reply | quote | #³

Records:3 1/1 «‹1 ›»

lizhenqiu blog

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

相关日志

有过 3 条评论 »

留下評論