## 图片处理
> 图片是很重要的媒体元素,用好了,页面会更加美观,巧妙的利用图片自适应特性,页面的适配性也会更好。
基于tp的图片处理方案。
- 裁剪
- 缩放
- 压缩(服务器安装开源压缩方案)
- 缓存
- 提供直接输出图片流的地址/提供处理完成的图片地址
- 占位图生成(支持输出date-base64-url编码形式)
- 满足移动端,2倍图@2x.png
* * * * *
### 扩展
[移动端1px解决之道及2、3倍图处理方法 - 简书](https://www.jianshu.com/p/eba6bedd25b0)
[javascript - 前端页面(移动端)使用二倍图比一倍图有什么好处呢? - SegmentFault 思否](https://segmentfault.com/q/1010000010733030)
[H5案例分享:Retina显示屏-揭秘移动端的视觉稿通常会设计为传统PC的2倍_H5案例分享](https://www.h5anli.com/articles/201610/retina.html)
[移动端前端适配方案对比 - 简书](https://www.jianshu.com/p/e5ca5b78e03e)
>[danger] 高度定死,宽度自适应(这样会怪怪的,很丑,如果是图片的话会被拉伸的,**反而不固定高度的话,利用图片特有的特性,图片会按照原图宽高比例进行等比缩放,自适应的**,但是这样在图片未加载完毕时没有宽高,会有闪动问题,不过可以利用预先设置好比例的占位图base64形式来做,原本图片也按照相同比例进行处理,这样就解决了闪动问题。同时resize时还能自适应,而无需用js来resize动态计算设置了等比宽高了。)
[Yupoo! 的网站技术架构 | DBA Notes](http://dbanotes.net/arch/yupoo_arch.html)
[ImageMagick简介、GraphicsMagick、命令行使用示例 - CSDN博客](https://blog.csdn.net/cbbbc/article/details/52175559)
[PHP极其强大的图片处理库Grafika详细教程(1):图像基本处理 - CSDN博客](https://blog.csdn.net/qq_34657922/article/details/79479892)
[GD、ImageMagick、GraphicsMagick - CSDN博客](https://blog.csdn.net/baiwz/article/details/38420187)
[谷歌开源图片压缩算法Guetzli实测体验报告 - 腾讯云+社区 - 博客园](https://www.cnblogs.com/qcloud1001/p/6595336.html)
[最有效地使用PNG:PNGOUT优化 - CSDN博客](https://blog.csdn.net/happydeer/article/details/50473961)
~~~
于是,我们有了第一条经验:永远别保存交错格式的PNG文件。
仅仅是为了渐进式渲染,交错式PNG会增大35%;
渐进式渲染让人很困惑:图像一开始是模糊的,然后渐渐变清晰。Philip Greenspun一语道破,“读者无法判断图像何时加载完毕!”
标准的PNG为渐进式渲染提供了完美的解决方法,根本用不着交错格式。它们可以自顶向下,以一种很简单直接的方式渲染。
可是自顶向下,加载时无法获知高度,会有闪动问题,难道图片没完全加载完毕也能预先输出高度信息吗,高度信息在图片head里?不过任何时候,都不要相信在图片未加载完毕时能得到图片的高度,这是不可靠的,所以有要求的还是用base64占位图吧。
~~~
[生成微缩图 · php笔记 · 看云](https://www.kancloud.cn/xiak/php-node/248832)
[用 imgproxy 自动缩放图片](https://mp.weixin.qq.com/s/25Pt37Xe9_MdyJEX4Lm0eg)
[php扩展Imagick库,如何实现gif转webp - 开源中国社区](https://www.oschina.net/question/3783935_2274428)
[WebPconv | WebP File Converter | Romeolight](http://www.romeolight.com/products/webpconv/)
[关于Android图片资源瘦身的奇思妙想 - 云+社区 - 腾讯云](https://cloud.tencent.com/developer/article/1004331)
[【腾讯云的1001种玩法】 Laravel 整合万向优图图片管理能力,打造高效图片处理服务 - 云+社区 - 腾讯云](https://cloud.tencent.com/developer/article/1004595)
[图片流量节省大杀器:基于 CDN 的 sharpP 自适应图片技术实践 - 云+社区 - 腾讯云](https://cloud.tencent.com/developer/article/1004404)
[快速使用OSS图片服务_图片处理指南_对象存储 OSS-阿里云](https://help.aliyun.com/document_detail/44686.html?spm=5176.8465980.img.ddetails.4e701450oW1H4t) (支持在 OSS 端对图片文件进行缩放、裁剪、水印等处理)
> 阿里云等OOS存储支持图片处理,可以直接充当图片服务器
* * * * *
### 相关开源项目
[PHP: GD 和图像处理 函数 - Manual](http://www.php.net/manual/zh/ref.image.php)
[图像处理 · ThinkPHP5.0完全开发手册 · 看云](https://www.kancloud.cn/manual/thinkphp5/177530)
[Convert, Edit, Or Compose Bitmap Images @ ImageMagick](http://www.imagemagick.org/script/index.php)
[GraphicsMagick Image Processing System](http://www.graphicsmagick.org/)
[google/guetzli: Perceptual JPEG encoder](https://github.com/google/guetzli)(Google开源的JPEG图片压缩算法,终于有个)
[TinyPNG – API Reference](https://tinypng.com/developers/reference/php)
[pngquant — lossy PNG compressor](https://pngquant.org/)
[Intervention/image: PHP Image Manipulation](https://github.com/Intervention/image)
[avalanche123/Imagine: PHP 5.3 Object Oriented image manipulation library](https://github.com/avalanche123/Imagine)
[AlloVince/EvaThumber: A light-weight url based image transformation php library](https://github.com/AlloVince/EvaThumber)(基于URL的图片处理库 (可实现缩略图 | 二维码 | 水印 | 面部识别等,基于PHP)
[kosinix/grafika: An image processing library for PHP](https://github.com/kosinix/grafika)
[george518/CoreImage: 裁剪核心图片](https://github.com/george518/CoreImage)
[pel/pel: PHP Exif Library - library for reading and writing Exif headers in JPEG and TIFF files using PHP.](https://github.com/pel/pel)(PHP Exif)
[Ken Silverman's Utility Page](http://advsys.net/ken/utils.htm)
[flyimg/flyimg: Dockerized PHP7 application runs as a Microservice to resize and crop images on the fly. Get optimised images with MozJPEG, WebP or PNG using ImageMagick. Includes face detection, cropping, face blurring, image rotation and many other options. Abstract storage based on FlySystem in order to store images on any provider (local, AWS S3...).](https://github.com/flyimg/flyimg)
[rakibtg/PHP-ImageToWebp: A PHP class to convert JPG, JPEG, PNG or GIF images to webp format](https://github.com/rakibtg/PHP-ImageToWebp)(JPG, JPEG, PNG or GIF 图片格式 转换为 webp格式图片)
[weserv/images: Source code of images.weserv.nl, to be used on your own server(s).](https://images.weserv.nl/#quick-reference)(一个成熟的图像处理方案,除了支持一些常规的图片处理外,还支持图片模糊,灰度,圆形裁剪等有意思的处理)
[ImageOptim HTTP API for optimization on web servers](https://imageoptim.com/api)
[EvaThumber : 基于URL的图片处理库 (可实现缩略图 | 二维码 | 水印 | 面部识别等,基于PHP)](https://avnpc.com/pages/evathumber)
* * * * *
last update:2018-7-4 14:55:58
- 开始
- 公益
- 更好的使用看云
- 推荐书单
- 优秀资源整理
- 技术文章写作规范
- SublimeText - 编码利器
- PSR-0/PSR-4命名标准
- php的多进程实验分析
- 高级PHP
- 进程
- 信号
- 事件
- IO模型
- 同步、异步
- socket
- Swoole
- PHP扩展
- Composer
- easyswoole
- php多线程
- 守护程序
- 文件锁
- s-socket
- aphp
- 队列&并发
- 队列
- 讲个故事
- 如何最大效率的问题
- 访问式的web服务(一)
- 访问式的web服务(二)
- 请求
- 浏览器访问阻塞问题
- Swoole
- 你必须理解的计算机核心概念 - 码农翻身
- CPU阿甘 - 码农翻身
- 异步通知,那我要怎么通知你啊?
- 实时操作系统
- 深入实时 Linux
- Redis 实现队列
- redis与队列
- 定时-时钟-阻塞
- 计算机的生命
- 多进程/多线程
- 进程通信
- 拜占庭将军问题深入探讨
- JAVA CAS原理深度分析
- 队列的思考
- 走进并发的世界
- 锁
- 事务笔记
- 并发问题带来的后果
- 为什么说乐观锁是安全的
- 内存锁与内存事务 - 刘小兵2014
- 加锁还是不加锁,这是一个问题 - 码农翻身
- 编程世界的那把锁 - 码农翻身
- 如何保证万无一失
- 传统事务与柔性事务
- 大白话搞懂什么是同步/异步/阻塞/非阻塞
- redis实现锁
- 浅谈mysql事务
- PHP异常
- php错误
- 文件加载
- 路由与伪静态
- URL模式之分析
- 字符串处理
- 正则表达式
- 数组合并与+
- 文件上传
- 常用验证与过滤
- 记录
- 趣图
- foreach需要注意的问题
- Discuz!笔记
- 程序设计思维
- 抽象与具体
- 配置
- 关于如何学习的思考
- 编程思维
- 谈编程
- 如何安全的修改对象
- 临时
- 临时笔记
- 透过问题看本质
- 程序后门
- 边界检查
- session
- 安全
- 王垠
- 第三方数据接口
- 验证码问题
- 还是少不了虚拟机
- 程序员如何谈恋爱
- 程序员为什么要一直改BUG,为什么不能一次性把代码写好?
- 碎碎念
- 算法
- 实用代码
- 相对私密与绝对私密
- 学习目标
- 随记
- 编程小知识
- foo
- 落盘
- URL编码的思考
- 字符编码
- Elasticsearch
- TCP-IP协议
- 碎碎念2
- Grafana
- EFK、ELK
- RPC
- 依赖注入
- 开发笔记
- 经纬度格式转换
- php时区问题
- 解决本地开发时调用远程AIP跨域问题
- 后期静态绑定
- 谈tp的跳转提示页面
- 无限分类问题
- 生成微缩图
- MVC名词
- MVC架构
- 也许模块不是唯一的答案
- 哈希算法
- 开发后台
- 软件设计架构
- mysql表字段设计
- 上传表如何设计
- 二开心得
- awesomes-tables
- 安全的代码部署
- 微信开发笔记
- 账户授权相关
- 小程序获取是否关注其公众号
- 支付相关
- 提交订单
- 微信支付笔记
- 支付接口笔记
- 支付中心开发
- 下单与支付
- 支付流程设计
- 订单与支付设计
- 敏感操作验证
- 排序设计
- 代码的运行环境
- 搜索关键字的显示处理
- 接口异步更新ip信息
- 图片处理
- 项目搭建
- 阅读文档的新方式
- mysql_insert_id并发问题思考
- 行锁注意事项
- 细节注意
- 如何处理用户的输入
- 不可见的字符
- 抽奖
- 时间处理
- 应用开发实战
- python 学习记录
- Scrapy 教程
- Playwright 教程
- stealth.min.js
- Selenium 教程
- requests 教程
- pyautogui 教程
- Flask 教程
- PyInstaller 教程
- 蜘蛛
- python 文档相似度验证
- thinkphp5.0数据库与模型的研究
- workerman进程管理
- workerman网络分析
- java学习记录
- docker
- 笔记
- kubernetes
- Kubernetes
- PaddlePaddle
- composer
- oneinstack
- 人工智能 AI
- 京东
- pc_detailpage_wareBusiness
- doc
- 电商网站设计
- iwebshop
- 商品规格分析
- 商品属性分析
- tpshop
- 商品规格分析
- 商品属性分析
- 电商表设计
- 设计记录
- 优惠券
- 生成唯一订单号
- 购物车技术
- 分类与类型
- 微信登录与绑定
- 京东到家库存系统架构设计
- crmeb
- 命名规范
- Nginx https配置
- 关于人工智能
- 从人的思考方式到二叉树
- 架构
- 今日有感
- 文章保存
- 安全背后: 浏览器是如何校验证书的
- 避不开的分布式事务
- devops自动化运维、部署、测试的最后一公里 —— ApiFox 云时代的接口管理工具
- 找到自己今生要做的事
- 自动化生活
- 开源与浆果
- Apifox: API 接口自动化测试指南