https://lategege.com/tags/%E5%9B%BE%E7%89%87%E8%A3%81%E5%89%AA/Recent content in 图片裁剪 on lategege 的技术博客Hugo -- gohugo.iozh-cnThu, 05 Nov 2020 03:09:07 +0000https://lategege.com/p/%E7%BE%A4%E6%99%96docker%E9%83%A8%E7%BD%B2imageproxy%E5%9B%BE%E7%89%87%E8%A3%81%E5%89%AA%E6%9C%8D%E5%8A%A1/Thu, 05 Nov 2020 03:09:07 +0000https://lategege.com/p/%E7%BE%A4%E6%99%96docker%E9%83%A8%E7%BD%B2imageproxy%E5%9B%BE%E7%89%87%E8%A3%81%E5%89%AA%E6%9C%8D%E5%8A%A1/<!-- wp:paragraph --> <p>一、什么是图片裁剪服务？图片裁剪服务的用途。</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>做网站开发或者app开发的时候，页面图片中尺寸比例不一，如果运营作图人员为每一个比例都做一个图片，无疑增加了时间成本。为了解决这个问题，就引出了图片裁剪服务。市面上各种编程语言写的图片裁剪服务有很多，nginx也有相关模块可以使用。这里介绍imageproxy这个服务的部署，搭建环境为群晖docker。</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>对于imageproxy这个镜像的介绍可见 <a href="https://registry.hub.docker.com/r/willnorris/imageproxy/">https://registry.hub.docker.com/r/willnorris/imageproxy/</a></p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>首先进入群晖管理页面点击docker套件，选中注册表，搜索imageproxy 第一个willnorris/imageproxy双击下载</p> <!-- /wp:paragraph --> <!-- wp:image {"id":265,"sizeSlug":"large"} --> <figure class="wp-block-image size-large"><img alt="" class="wp-image-265" src="https://img.lategege.com:30443/images/web/uploads/2020/11/1-1-1024x547.png"/></figure> <!-- /wp:image --> <!-- wp:image {"id":266,"sizeSlug":"large"} --> <figure class="wp-block-image size-large"><img alt="" class="wp-image-266" src="https://img.lategege.com:30443/images/web/uploads/2020/11/2-1-1024x547.png"/></figure> <!-- /wp:image --> <!-- wp:paragraph --> <p>下载完成在映像中出现对应容器镜像，双击进行配置</p> <!-- /wp:paragraph --> <!-- wp:image {"id":267,"sizeSlug":"large"} --> <figure class="wp-block-image size-large"><img alt="" class="wp-image-267" src="https://img.lategege.com:30443/images/web/uploads/2020/11/3.png"/></figure> <!-- /wp:image --> <!-- wp:paragraph --> <p>端口设置，本地端口改成8080</p> <!-- /wp:paragraph --> <!-- wp:image {"id":268,"sizeSlug":"large"} --> <figure class="wp-block-image size-large"><img alt="" class="wp-image-268" src="https://img.lategege.com:30443/images/web/uploads/2020/11/4.png"/></figure> <!-- /wp:image --> <!-- wp:paragraph --> <p>切换到环境菜单 在命令中填入-addr 0.0.0.0:8080</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>点击应用，启动容器。</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>启动后测试裁剪效果 输入http://群晖ip地址:8080/100x100/原图片链接</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>我的测试地址为http://192.168.0.228:8080/100x100/https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3150312678,1466937360&amp;fm=26&amp;gp=0.jpg</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>效果如图:</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>裁剪过后：</p> <!-- /wp:paragraph --> <!-- wp:image {"id":269,"sizeSlug":"large"} --> <figure class="wp-block-image size-large"><img alt="" class="wp-image-269" src="https://img.lategege.com:30443/images/web/uploads/2020/11/11.jpg"/></figure> <!-- /wp:image --> <!-- wp:paragraph --> <p>未经过裁剪的原链接图片：</p> <!-- /wp:paragraph --> <!-- wp:image {"id":270,"sizeSlug":"large"} --> <figure class="wp-block-image size-large"><img alt="" class="wp-image-270" src="https://img.lategege.com:30443/images/web/uploads/2020/11/12.jpg"/></figure> <!-- /wp:image --> <!-- wp:paragraph --> <p>这里只是简单部署并测试效果。</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>更多使用方式请查看<a href="https://registry.hub.docker.com/r/willnorris/imageproxy/">https://registry.hub.docker.com/r/willnorris/imageproxy/</a> 介绍</p> <!-- /wp:paragraph -->