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代码实现文字描边
Apr 25 HTML / CSS
浅析css3中matrix函数的使用
Jun 06 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 HTML / CSS
Grid 宫格常用布局的实现
Jan 10 HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 HTML / CSS
canvas三角函数模拟水波效果的示例代码
Jul 03 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
HTML5通用接口详解
Jun 12 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
May 26 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编程之高级技巧——利用Mysql函数
2006/10/09 PHP
php图像处理类实例
2015/07/28 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
原生JS发送异步数据请求
2017/06/08 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
红黑树的插入详解及Javascript实现方法示例
2018/03/26 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
react native 原生模块桥接的简单说明小结
2019/02/26 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
Python 修改列表中的元素方法
2018/06/26 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
会计实习生自我鉴定
2013/12/12 职场文书
文明风采获奖感言
2014/02/18 职场文书
电子银行营销方案
2014/02/22 职场文书
理财计划书
2014/08/14 职场文书
师德师风剖析材料
2014/09/30 职场文书
狮子林导游词
2015/02/03 职场文书
节约用电倡议书
2015/04/28 职场文书
行政诉讼答辩状
2015/05/21 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
mysql中关键词exists的用法实例详解
2022/06/10 MySQL