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阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
Nov 21 HTML / CSS
css3实现背景模糊的三种方式(小结)
May 15 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 HTML / CSS
HTML5新增的Css选择器、伪类介绍
Aug 07 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
html5 canvas绘制网络字体的常用方法
Aug 26 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 HTML / CSS
利用html+css实现菜单栏缓慢下拉效果的示例代码
Mar 30 HTML / CSS
CSS中em的正确打开方式详解
Apr 08 HTML / CSS
详解CSS故障艺术
May 25 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
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
基于文本的搜索
2006/10/09 PHP
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
PHP 处理图片的类实现代码
2009/10/23 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
javascript 模拟点击广告
2010/01/02 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
python实现的简单FTP上传下载文件实例
2015/06/30 Python
将Django框架和遗留的Web应用集成的方法
2015/07/24 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
利用python编写一个图片主色转换的脚本
2017/12/07 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
python去除扩展名的实例讲解
2018/04/23 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
计算机专业自我鉴定
2013/10/15 职场文书
销售辞职报告范文
2014/01/12 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
收费员岗位职责
2015/02/14 职场文书
redis 存储对象的方法对比分析
2021/08/02 Redis
MySQL视图概念以及相关应用
2022/04/19 MySQL