前端实现图片压缩上传

栏目: Html5 · 发布时间: 5年前

内容简介:前端实现图片压缩上传我觉得还是很有必要的, 现在移动web页面越来越多, 活动页很多都牵涉到图片上传难问题, 而用户手机像素又很高, 随随便便一张图片就是5~10M, 要是一次要上传多张图片的话, 第一个时间花费太多, 第二个就是用户的流量也要耗费不少, 而如果实现前端图片压缩则能很好的避开这两个问题. 我的基本思路是用户通过如此, 就实现了图片的压缩上传功能, 其实还是很简单的, 这么没有做实时预览功能, 不过已经写到这一步了(FileReader), 实现预览功能也非常容易, 这就是今天内容的全部了,

前端实现图片压缩上传我觉得还是很有必要的, 现在移动web页面越来越多, 活动页很多都牵涉到图片上传难问题, 而用户手机像素又很高, 随随便便一张图片就是5~10M, 要是一次要上传多张图片的话, 第一个时间花费太多, 第二个就是用户的流量也要耗费不少, 而如果实现前端图片压缩则能很好的避开这两个问题. 我的基本思路是用户通过 input[file] 输入框添加了文件后, 读取图片信息, 将图片画到 Canvas 画布上, 然后再转成图片来实现压缩上传.

核心API

canvas.getContext('2d').drawImage(img, dx, dy, dWidth, dHeight)

canvas
canvas
canvas
canvas

实现流程

  1. 用户点击 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), 实现预览功能也非常容易, 这就是今天内容的全部了, 图片上传使用得越来越频繁, 做个记录, 省得每次做的时候都要去翻资料.


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

驯服烂代码

驯服烂代码

伍斌 / 机械工业出版社 / 2014-11 / 69.00

Kent Beck、Martin Fowler、Michael C. Feathers、Robert C. Martin、Joshua Kerievsky、Gerard Meszaros等大师们的传世著作为如何提升编程技艺和代码质量提供了思想和原则上的指导,本书则为实践和融合这些思想、原则提供了过程和方法上指导。本书通过编程操练的方式讲述了如何用TDD(测试驱动开发)的方法来驯服烂代码,通过结对编......一起来看看 《驯服烂代码》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

URL 编码/解码
URL 编码/解码

URL 编码/解码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具