# Js Image Converter

**Repository Path**: CoderPike/js-image-converter

## Basic Information

- **Project Name**: Js Image Converter
- **Description**: 在上传用户的图片之前，前端可对图片进行缩放并选择最优的格式转化，然后上传服务器或下载另存。
当前支持生成转换生成png/jpg/webp等格式，支持根据是否有透明色和生成后的文件大小自动决定使用png还是jpg。
webp格式是这之中文件大小最小的，但是兼容性不够好，所以自动选择的时候，排除掉了webp。
另外支持指定最大宽度和最大高度进行压缩。
库接口也支持直接设置目标图片的宽度和高度。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-16
- **Last Updated**: 2022-01-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Js Image Converter

#### 介绍
在上传用户的图片之前，前端可对图片进行缩放并选择最优的格式转化，然后上传服务器或下载另存。当前支持以下功能。
* 当前支持生成转换生成png/jpg/webp等格式，支持根据是否有透明色和生成后的文件大小自动决定使用png还是jpg。 
* webp格式是这之中文件大小最小的，但是兼容性不够好，所以自动选择的时候，排除掉了webp。 
* 另外支持指定最大宽度和最大高度进行压缩。 库接口也支持直接设置目标图片的宽度和高度。

##### 背景介绍
开发这个功能是因为：最开始我们也觉得原始图片很重要，所以我们的上传方案是用户上传，原图保存，然后前端请求的时候，在路径上加上参数然后后端生成对应的缓存图片供下载展示，这样就牺牲了服务器的硬盘空间和图片处理的开支（尽管相同的请求参数只需要处理一次）。而后来我们发现其实用户上传的图片质量并不高，一般用手机拍一下就上传了，而现在的手机相机的像素都很高，所以生成的图片会很大，最后实际用来展示的，往往只需要1000-2000像素左右，所以还不如在上传的时候直接压缩掉。

后来我们也为了稳定性和扩展性，决定使用阿里云的OSS服务，需要将这些图片都上传到OSS上。
这个时候，我们自己图片服务器上的空间占用已经接近1T(包含很多缓存图片，为了加速避免重新生成，不会自动清理)，最后上传到OSS后，超过了520G.

整个过程大致分成以下几步：

1、最开始用bat+ossutil命令行工具遍历上传，bat负责目录遍历，跳过缓存文件和缓存目录，ossutil工具负责图片上传，近上传原图。

2、随着理解的加深（原图的上传和使用的关系、OSS结合CDN效率和费用方面的理解等），决定用户上传的图片不再上传原图，限制最大宽度和高度，所以决定将原图转化后重新上传。由于这些是以前上传的图片，已被引用，所以不能更改图片扩展名。执行又分成了两个阶段：
> 1、bat+命令行图片编辑工具+ossutil，不过在寻找命令行图片编辑工具上并不太顺利；

> 2、改用python的pillow来处理图片，如此一来，发现bat和ossutil都可以用python来替换，相当方便

3、对于以后用户将上传的图片，前端直接转换限制最大宽高，同时因为数据库还未对文件产生引用，所以图片格式可以择优选择，这是尝试编写这个工具和库的原因，主要用到的功能是：限制图片最大宽高、择优选择png/jpg，webp兼容性不够好，所以服务器上不能保存webp格式的，通过cdn下载的时候，可以设置让cdn自动帮转成webp的。

目前还在压缩中，已经上传的空间压缩到了200G左右，所以节省一半的存储空间，自然回源的流量也会同步减少。

#### Tips of OSS+CDN
* CDN在回源的时候，设计设置保留参数和过滤参数，现在这么处理以后，回源的时候OSS无需图片处理，直接发原图，把回源参数都过滤掉，提高了命中率，也降低了回源的流量，这是很有好处的
* OSS其实支持在访问不到资源的时候，设置跳转到其他地址或者从其他地址获取数据（自动保存到OSS并返回给请求者），如果这么做，意味着原来服务器上的服务要一直保留着，无法彻底切换到OSS，不过这个功能在过渡期也是非常好用的
* 有必要了解一下OSS的特性，那就是强一致性和原子性，即上传成功前资源无法访问，成功后必然可以完整访问（上传成功意味着所有节点都已完成），用户不可能读取到上传了一半的资源。
* OSS管理的时候看上去虽然想树状的目录结构一样，其实它是k-v型存储的，也就是和redis一样，并没有目录结构，所以并没有目录结构太深导致访问速度变慢的问题。

#### 软件架构
软件架构说明


#### 安装教程

下载即可使用

#### 使用说明

参考example.html

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)