HTML5 之图片上传预处理
2017-06-07 15:23
288 查看
在开发 H5 应用的时候碰到一个问题,
应用只需要一张小的缩略图,
而用户用手机上传的确是一张大图,
手机摄像机拍的图片好几 M,这可要浪费很多流量。
像我这么为用户着想的程序员,绝对不会让这种事情发生的,
于是就有了本文。
通过 File API 获取图片。
使用
DEMO:http://weekcool.com/js/upload.js
应用只需要一张小的缩略图,
而用户用手机上传的确是一张大图,
手机摄像机拍的图片好几 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:http://weekcool.com/js/upload.js
相关文章推荐
- HTML5 之图片上传预处理
- 图片上传前预处理,等比缩放、裁剪 (html5 + canvas)
- html5带拖拽上传的图片gallary
- 使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用
- html5 图片上传范例详解
- 类似新浪微博和google图片的HTML5实现图片拖拽上传功能
- html5 上传 图片 预览 选择
- 【PHP】【PHP100改进系列】上传图片水印、缩略图、图片大小预处理类
- html5上传图片
- 完美实现 IE10 下利用HTML5实现文件上传(图片上传)功能
- jquery实现上传图片预览(需要浏览器支持html5)
- 用HTML5获取摄像头图像,并且上传图片到服务器(代码完整可用)
- Html5之图片拖放上传
- HTML5本地拖拽上传实现图片预览功能的实践总结
- html5 图片上传预览
- html5预览上传图片
- 使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用
- 基于HTML5的可预览多图片Ajax上传
- 基于HTML5的可预览多图片Ajax上传
- 基于HTML5的可预览多图片Ajax上传(转)