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 相关文章推荐
IE滤镜与CSS3效果(详细整理分享)
Jan 25 HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 HTML / CSS
使用CSS3编写类似iOS中的复选框及带开关的按钮
Apr 11 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
css3的focus-within选择器的使用
May 11 HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
Jan 05 HTML / CSS
html5-Canvas可以在web中绘制各种图形
Dec 26 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 HTML / CSS
html5利用canvas实现颜色容差抠图功能
Dec 23 HTML / CSS
基于CSS3画一个iPhone
Apr 21 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完整的日历类(CLASS)
2006/11/27 PHP
session在PHP大型web应用中的使用
2011/06/25 PHP
php 网上商城促销设计实例代码
2012/02/17 PHP
php中apc缓存使用示例
2013/12/25 PHP
深入理解PHP中的empty和isset函数
2016/05/26 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
无限树Jquery插件zTree的常用功能特性总结
2014/09/11 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
React优化子组件render的使用
2019/05/12 Javascript
浅谈vue3中effect与computed的亲密关系
2019/10/10 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
python解析xml模块封装代码
2014/02/07 Python
python获取本机mac地址和ip地址的方法
2015/04/29 Python
在Django框架中编写Contact表单的教程
2015/07/17 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
神经网络理论基础及Python实现详解
2017/12/15 Python
Python实现监控键盘鼠标操作示例【基于pyHook与pythoncom模块】
2018/09/04 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
存储过程的优点有哪些
2012/09/27 面试题
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
合伙协议书
2014/04/23 职场文书
环境卫生标语
2014/06/09 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书