内容简介:前端实现图片压缩上传我觉得还是很有必要的, 现在移动web页面越来越多, 活动页很多都牵涉到图片上传难问题, 而用户手机像素又很高, 随随便便一张图片就是5~10M, 要是一次要上传多张图片的话, 第一个时间花费太多, 第二个就是用户的流量也要耗费不少, 而如果实现前端图片压缩则能很好的避开这两个问题. 我的基本思路是用户通过如此, 就实现了图片的压缩上传功能, 其实还是很简单的, 这么没有做实时预览功能, 不过已经写到这一步了(FileReader), 实现预览功能也非常容易, 这就是今天内容的全部了,
前端实现图片压缩上传我觉得还是很有必要的, 现在移动web页面越来越多, 活动页很多都牵涉到图片上传难问题, 而用户手机像素又很高, 随随便便一张图片就是5~10M, 要是一次要上传多张图片的话, 第一个时间花费太多, 第二个就是用户的流量也要耗费不少, 而如果实现前端图片压缩则能很好的避开这两个问题. 我的基本思路是用户通过 input[file]
输入框添加了文件后, 读取图片信息, 将图片画到 Canvas
画布上, 然后再转成图片来实现压缩上传.
核心API
canvas.getContext('2d').drawImage(img, dx, dy, dWidth, dHeight)
canvas canvas canvas canvas
实现流程
-
用户点击
input[file]
选择图片后的逻辑
<input type="file" accept="image/*" onchange="uploadImageHandle"/> <script> function uploadImageHandle(e) { // 创建实例 var reader = new FileReader(), img = new Image(); // 读取上传的图片的信息(lastModified, lastModifiedDate, name, size, type等) var file = e.target.files[0]; // 记下上传的图片的类型, 后面会用到 var fileType = file.type; // 生成canvas画布 var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); // MDN: 该方法会读取指定的 Blob 或 File 对象。读取操作完成的时候, // readyState 会变成已完成(DONE),并触发 loadend 事件, // 同时 result 属性将包含一个data:URL格式的字符串(base64编码)以表示所读取文件的内容。 // 也就是说, 将File对象转化为base64位字符串 reader.readAsDataURL(file); // 上一步是异步操作, 读取完成后会执行onload事件, 而base64的字符串在e.target.rusult中 reader.onload = function(e) { // 获得图片dom img.src = e.target.result; console.log( img ) } img.onload = function() { // 图片原始尺寸 var originWidth = this.width; var originHeight = this.height; // 最大尺寸限制 var maxWidth = 800, maxHeight = 800; // 目标尺寸 var targetWidth = originWidth, targetHeight = originHeight; // 图片尺寸超过800x800的限制 if (originWidth > maxWidth || originHeight > maxHeight) { if (originWidth / originHeight > maxWidth / maxHeight) { // 更宽,按照宽度限定尺寸 targetWidth = maxWidth; targetHeight = Math.round(maxWidth * (originHeight / originWidth)); } else { targetHeight = maxHeight; targetWidth = Math.round(maxHeight * (originWidth / originHeight)); } } // canvas对图片进行缩放 canvas.width = targetWidth; canvas.height = targetHeight; // 清除画布 context.clearRect(0, 0, targetWidth, targetHeight); // 将图片划到canvas上 context.drawImage(img, 0, 0, 800, 800); // 把canvas转成base64格式并去除头 var base64 = canvas.toDataURL(fileType).replace(/^data:image\/(jpeg|jpg|png|gif);base64,/,''); // 上传base64, 如果需要上传图片只需要参照上面的操作, 重复将base64设置为图片上的src就行了. 当然, 需要在去处头之前 axios.post('https://yourdomain.com/api/xxx', { imageSrc: base64 }).then(res => { console.log( res ) }).catch(err => { console.log( err ) }) } </script> 复制代码
如此, 就实现了图片的压缩上传功能, 其实还是很简单的, 这么没有做实时预览功能, 不过已经写到这一步了(FileReader), 实现预览功能也非常容易, 这就是今天内容的全部了, 图片上传使用得越来越频繁, 做个记录, 省得每次做的时候都要去翻资料.
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 前端图片压缩及上传
- 图片纯前端JS压缩的实现
- itops代码优化之前端代码压缩
- 花椒前端用WebAssembly提升前端应用解压缩性能的尝试
- 花椒前端用 WebAssembly 提升前端应用解压缩性能的尝试
- tio-webpack 2.0.2 发布,传统前端的编译打包压缩工具
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
硅谷产品:36讲直通世界级产品经理
曲晓音 / 电子工业出版社 / 2018-10 / 59
《硅谷产品:36讲直通世界级产品经理》是Facebook资深产品经理曲晓音撰写的产品实战教程,立足于作者在Facebook、Instagram、Microsoft、Atlassian等硅谷科技公司的工作经验,分享硅谷先进的产品思维和方法论,用实际案例带领读者了解硅谷产品经理的所想所做。 《硅谷产品:36讲直通世界级产品经理》适合产品经理从业者、想要提升产品理解能力的技术运营人员、刚刚入行或者......一起来看看 《硅谷产品:36讲直通世界级产品经理》 这本书的介绍吧!