HTML5 实现图片上传预处理功能


Posted in HTML / CSS onFebruary 06, 2020

在开发 H5 应用的时候碰到一个问题,应用只需要一张小的缩略图,而用户用手机上传的确是一张大图,手机摄像机拍的图片好几 M,这可要浪费很多流量。

像我这么为用户着想的程序员,绝对不会让这种事情发生的,于是就有了本文。

获取图片

通过 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:weekcool.com/js/upload.j…

总结

以上所述是小编给大家介绍的HTML5 实现图片上传预处理功能,希望对大家有所帮助!

HTML / CSS 相关文章推荐
CSS3 选择器 伪类选择器介绍
Jan 21 HTML / CSS
使用CSS3在触屏上为按钮实现激活效果
Sep 27 HTML / CSS
CSS的background属性及CSS3的背景图片设置总结
Jun 13 HTML / CSS
css3实现背景模糊的三种方式(小结)
May 15 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
Dec 20 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
Jul 11 HTML / CSS
详解H5本地储存Web Storage
Jul 03 HTML / CSS
详解rem 适配布局
Oct 31 HTML / CSS
html5使用canvas画三角形
Dec 15 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 HTML / CSS
background-position百分比原理详解
May 08 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
Feb 05 #HTML / CSS
Html5定位终极解决方案
Feb 05 #HTML / CSS
canvas简单连线动画的实现代码
Feb 04 #HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 #HTML / CSS
canvas实现烟花的示例代码
Jan 16 #HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 #HTML / CSS
Html5跳转到APP指定页面的实现
Jan 14 #HTML / CSS
You might like
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
java解析json方法总结
2019/05/16 PHP
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
2011/05/24 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
js判断日期时间有效性的方法
2015/10/24 Javascript
Jquery 垂直多级手风琴菜单附源码下载
2015/11/17 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
实现vuex原理的示例
2020/10/21 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
使用python调用浏览器并打开一个网址的例子
2014/06/05 Python
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
python调用并链接MATLAB脚本详解
2019/07/05 Python
python 内置函数汇总详解
2019/09/16 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
size?爱尔兰官方网站:英国伦敦的球鞋精品店
2019/03/31 全球购物
软件配置管理有什么好处
2015/04/15 面试题
民主评议党员登记表自我评价
2014/10/20 职场文书
蓬莱阁导游词
2015/02/04 职场文书
金榜题名主持词
2015/07/02 职场文书
大学新生入学感想
2015/08/07 职场文书
小学主题班会教案
2015/08/17 职场文书
文书工作总结(范文)
2019/07/11 职场文书
python b站视频下载的五种版本
2021/05/27 Python