前端性能优化之图片压缩上传

七晓

已于 2024-03-15 19:21:08 修改

阅读量775

点赞数 7

CC 4.0 BY-SA版权

分类专栏：混合App 前端性能优化图片上传优化文章标签：前端 angular 性能优化

于 2024-03-15 19:20:37 首次发布

本文链接：https://blog.youkuaiyun.com/SpringCloudTest/article/details/136747450

本文介绍了在Angular和Ionic开发的混合应用中，如何针对不同图片类型（jpg、png、svg和gif）进行压缩，以提升在低网络环境下的用户体验。特别提到处理svg和gif的复杂性以及存在的优化挑战。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 场景

在使用Angular+ionic开发混合App的过程中，有一个上传图片的需求。现在手机拍照像素都很高，所以图片都会有点大，随便一张图都7MB左右。而且用户在使用该App大多在工地、隧道等网络不是很好的地方。因此，为优化用户体验，我们可以在用户上传过程中将图片压缩后再上传以优化用户的体验。

2. 实现

2.1 压缩jpg、png等常见的图片类型

压缩图片的过程实际上就是根据原图缩小宽高后绘制一张新的图片的过程。

/**
* 该方法接收3个参数
*  file: 上传的文件
*  type: 文件类型
*  quality: 压缩的系数 0-1之间的值
*/
compressImg(file,type, quality) {
   
  // 创建FileReader 解析文件
  const reader = new FildReader();
  render.onload = (e) => {
   
  	// 绘制新的图片
  	const image = new Image();
  	image.src = e.target.result as string;
  	image.onload = () => {
   
    	// 通过canvas绘制
    	const canvas = document.createEelement('canvas');
    	const context = canvas.getContext('2d');
    	canvas.width = image.width * quality;
    	canvas.height = image.height * quality;
    	context.drawImage(image, 0, 0, canvas.width, canvas.height);