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 相关文章推荐
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 HTML / CSS
CSS3点击按钮实现背景渐变动画效果
Oct 19 HTML / CSS
CSS3 实现飘动的云朵动画
Dec 01 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
Mar 08 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 HTML / CSS
HTML5中meta属性的使用方法
Feb 29 HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
Aug 24 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 HTML / CSS
纯html+css实现打字效果
Aug 02 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
打造计数器DIY三步曲(上)
2006/10/09 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
php实现的简单数据库操作Model类
2016/11/16 PHP
jquery 日期控件datepicker属性详细解析
2013/11/08 Javascript
jQuery判断checkbox是否选中的小例子
2013/12/02 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
Vue.js快速入门教程
2016/09/07 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
2019/05/30 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
[01:32]TI珍贵瞬间系列(一)
2020/08/26 DOTA
python3使用SMTP发送简单文本邮件
2018/06/19 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
大专生自我评价
2014/01/28 职场文书
《纸船和风筝》教学反思
2014/02/15 职场文书
合伙购房协议样本
2014/10/06 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang