tiny-site 新版本发布

栏目: 软件资讯 · 发布时间: 5年前

内容简介:tiny-site 在各终端分辨率以及支持图片格式各有差异的现实下,开发者一般都会采用折衷方案(偷懒):选用最高的分辨率,最通用的图片格式。对于小分辨率终端,过高的分辨率,显示时做缩小展示,浪费了带宽。对于支...

tiny-site

在各终端分辨率以及支持图片格式各有差异的现实下,开发者一般都会采用折衷方案(偷懒):选用最高的分辨率,最通用的图片格式。对于小分辨率终端,过高的分辨率,显示时做缩小展示,浪费了带宽。对于支持更优图片格式的终端,没有在质量与流量取得更优的平衡。

使用tiny-site图片管理系统,可以简单的将原图片上传之后,依赖于 tiny,根据应用场景选择适合的图片参数,可生成webppngjpeg。通过文件名格式定义,以简便的形式支持自定义图片质量与尺寸,搭配 CDN 可根据应用需要生成各类不同的图片。

 

功能介绍

网站的主要功能比较简单,上传图片、图片列表、预览选择图片参数以及图片更新。

tiny-site 新版本发布

tiny-site 新版本发布

tiny-site 新版本发布

tiny-site 新版本发布

使用步骤

启动tiny压缩服务

docker run -d --restart=always \
  -p 7001:7001 \
  -p 7002:7002 \
  --name=tiny \
  vicanso/tiny

其中7001是提供HTTP服务,tiny-site主要使用7002的GRPC服务,因此7001可按需要设置是否可用。

初始化数据库

数据库使用postgres,可以使用 docker 启动相关的镜像并设置初始化数据库,其中账号密码可根据需要设置。

docker run \
  -p 5432:5432 \
  -e POSTGRES_USER=test \
  -e POSTGRES_PASSWORD=123456 \
  --restart=always \
  --name=postgres \
  -v /data:/var/lib/postgresql/data \
  -d postgres:alpine

创建 db 以及初始化权限

docker exec -it postgres sh

psql -U test

CREATE DATABASE "tiny" OWNER test;

GRANT ALL PRIVILEGES ON DATABASE "tiny" to test;

启动服务

docker run -d --restart=always \
  -p 7500:7001 \
  -e GO_ENV=production \
  -e PASS=pass \
  --name=tiny-site \
  vicanso/tiny-site

配置中密码为PASS,如果在env中有此字段,则会取ENV中配置的值,因此可以根据需要直接将密码设置至配置文件或者ENV中。需要注意,因为production.yml中的数据库配置在各自应用场景中不一致,建议fork项目再自己编译。或者增加自定义配置文件,mount/tiny-site/production.yml,则启动脚本如下:

# production 生产环境中使用的相关配置

# redis 配置 (填写相应密码与host)
redis: redis://:pass@redisHost:6379

# postgres 配置(填写相应密码与host)
postgres:
  user: test
  host: postgresHost
  password: pass

# tiny 配置tiny服务的IP(如果grpc的服务端口不是6002,也需要调整)
tiny:
  host: 192.168.0.171
  port: 7002

# 预览地址(根据实际使用配置预览地址,建议使用CDN,再设置CDN回源策略)
imagePreview:
  url: "http://localhost:7001/images/v1/preview/:file"
docker run -d --restart=always \
  -p 7500:7001 \
  -e GO_ENV=production \
  -v /opt/tiny/production.yml:/tiny-site/production.yml \
  --name=tiny-site \
  vicanso/tiny-site

使用建议

tiny-site目标是提供简单的方式定义图片参数,尽可能简单的使用较优的图片。为什么说是较优呢?因为此项目考虑的是能用性,主要是使用经常更新的图片应用场景,以及一图多终端使用的应用场景。由于各终端分辨率,支持图片类型各有差异,因此建议在终端中动态生成图片地址,根据展示的区域大小,支持的图片类型指定相应的图片参数。需要注意,由于tiny本身非专注与图片转换性能,因此建议使用CDN来缓存图片,提升性能。

浏览器中判断是否支持WEBP

let isSupportWebp = false;
(function() {
  const images = {
    basic:
      "data:image/webp;base64,UklGRjIAAABXRUJQVlA4ICYAAACyAgCdASoCAAEALmk0mk0iIiIiIgBoSygABc6zbAAA/v56QAAAAA==",
    lossless:
      "data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAQAAAAfQ//73v/+BiOh/AAA="
  };
  const check = data =>
    new Promise((resolve, reject) => {
      const img = new Image();
      img.onload = resolve;
      img.onerror = reject;
      img.src = data;
    });
  Promise.all(map(images, check))
    .then(() => true)
    .catch(() => false)
    .then(result => {
      isSupportWebp = result;
    });
})();

export function supportWebp() {
  return isSupportWebp;
}

在浏览器中,使用上面的判断,对于支持webp格式的,则将图片后续替换为.webp,而不支持的则使用原后缀。iOS并没有支持webp格式,如果是在APP中,则可以自己扩展实现,android则系统原生支持,不需要做调整。

 


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

查看所有标签

猜你喜欢:

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

数据结构、算法与应用

数据结构、算法与应用

(美)Sartaj Sahni / 汪诗林、孙晓东、等 / 机械工业出版社 / 2000-01 / 49.00

本书是关于计算机科学与工程领域的基础性研究科目之一――数据结构与算法的专著。 本书在简要回顾了基本的C++ 程序设计概念的基础上,全面系统地介绍了队列、堆栈、树、图等基本数据结构,以及贪婪算法、分而治之算法、分枝定界算法等多种算法设计方法,为数据结构与算法的继续学习和研究奠定了一个坚实的基础。更为可贵的是,本书不仅仅介绍了理论知识,还提供了50多个应用实例及600多道练习题。 本书......一起来看看 《数据结构、算法与应用》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

html转js在线工具
html转js在线工具

html转js在线工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试