【又拍小百科】图片云处理,这些小而美的功能你了解吗

我们将陆续介绍又拍云在图片云处理方面的功能,欢迎关注又拍云公众号(ID:upaiyun)

人是视觉动物,从外界接收的各种信息中,有 80% 以上是通过视觉获取的。在互联网世界中,图片则是最容易被视觉所接受的信息资源,不管是视频网站的影片缩略图,还是电商网站的商品展示,甚至某些枯燥的技术文档,也会用一些生动的图片,以图文并茂的方式来阐述技术。图片几乎涵盖了所有互联网应用场景,是互联网中不可或缺的元素之一。

图片在互联网中的重要地位,使得图片处理成为了广大互联网工作者的一大需求。又拍云在产品开发中,一直倡导给用户更大的自主性。图片处理这个产品也是如此,使用起来快捷、方便。接下来就给大家介绍下又拍云图片处理中的一些基本功能及用法。

图片的缩放

最为常见的图片处理功能应该是图片的缩小,放大和裁剪等功能。它能够让图片更好的适应不同场景。

图片的缩放可以直接通过 URL 直接作图,常见的参数有 /fw /fh /both /sq 等方式。指定图片的宽/高或在原图进行等比率缩小,扩大的方式进行处理。

图片缩放处理示例:

ffprobe http://ftp.youlinux.com/image/image_process.jpg

ffprobe http://ftp.youlinux.com/image/image_process.jpg\!/fw/500

ffprobe http://ftp.youlinux.com/image/image_process.jpg\!/both/500x320

ffprobe http://ftp.youlinux.com/image/image_process.jpg\!/sq/400


△ 图片缩放处理示意

缩略图

缩略图常用于在 Web 浏览器中更加迅速地载入图片较多的网页,例如我们常用的购物网站,视频网站等。他可以让你更快的了解商品或内容。同时,缩略图经过压缩处理,体积小巧,加载速度非常快。它不仅能够提升用户的浏览体验,也能够为网站节约一大笔流量开支。

接下来就简单说下缩略图的处理方式,主要有以下2种:

1. 间隔标识符 + 缩略图版本的方式

进入又拍云控制台, 「服务」 > 「功能配置」 > 「云处理」中创建图片 URL + 间隔标识符 + 缩略图版本 拼接再进行访问;

例如:https://p.upyun.com/docs/cloud/demo.jpg!upyun520

△ 缩略图版本创建

2. 间隔标识符 + 图片处理参数的方式

图片 URL + 间隔标识符 + 云处理图片处理参数 拼接再进行访问;

例如:https://p.upyun.com/docs/cloud/demo.jpg!/scale/30

图片加水印

图片加水印是最基础的版权保护措施。加水印不仅可以有效的防止他人盗图,对图片起到一定的保护作用。也可以让用户在看到图片时,产生“哦,这是原创”的感觉。甚至可以通过图片中的水印信息,对商品、品牌等起到一定的推广作用。

又拍云图片水印,同时提供文字和图片水印功能,可以在图片的不同位置,以不同的方向,实时在原图上添加文字或者图片水印。甚至可以对水印的大小,透明度,以及水印是否铺满图片等进行操作。

△ 水印的样式

WebP 图片格式

文章前面有提到过缩略图,不仅能够提升图片加载速度,提升用户体验,而且也能够降低带宽消耗,降低用户成本。而 WebP 图片格式的效果与此类似,但是在加载速度提升和带宽消耗降低上的能力则是更胜一筹。

WebP 作为一种更高效的图片编码格式,在质量没有明显差别的情况下,是其他图片格式极佳的替代者。与其他图片格式相比,WebP 集合了多种图片文件格式的特点:像 JPEG 一样适合压缩照片和其他细节丰富的图片,像 GIF 一样可以显示动态图片,像 PNG 一样支持透明图像。根据 Google 的测试,WebP 无损压缩图片比 PNG 图片少了 45% 的文件体积,即使这些 PNG 图片在使用 pngcrush 和 pngout 处理后,WebP 依旧可以减少 28% 的文件体积。而对于常用的 JPEG 的图片来说,则能节约更多的流量。

△ 原 JPEG 图 和 转换为 WebP 格式的图片对比

从上图中可以看出,两者的访问大小比率差距非常的大,在图片展示效果几乎不变的情况下,文件大小减少了 85.65%。

WebP 的使用给实际应用带来了很多好处,且 Google Chrome 和 Opera 浏览器以及许多其他工具和软件库都支持 WebP,但是到目前为止也并非所有浏览器都支持 WebP, IE、Edge、Firefox、Safari 就均未支持 WebP 格式。

△ 各浏览器对 WebP 的支持情况

又拍云 WebP 自适应功能,则能很好的解决这个问题。对于支持 WebP 格式的浏览器,返回 WebP 图片,而对于不支持 WebP 格式的浏览器,则返回原格式的图片。开启路径更是简单,只需要登陆又拍云控制台 ?服务管理? 配置 ? 成本控制 ? WebP自适应,点击开启即可。

又拍云图片处理支持缩小、放大、裁剪、图片水印、文字水印、锐化、高斯模糊等 40+ 功能,让您换个花样玩转图片处理。

 

推荐阅读:

WebP 图片格式体验?

带宽成本降低50%的秘密--深入解析WebP

原文地址:https://www.cnblogs.com/upyun/p/9962483.html

时间: 2024-08-30 09:50:50

【又拍小百科】图片云处理,这些小而美的功能你了解吗的相关文章

微信小程序--图片相关问题合辑

图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.previewImage预览图片 微信小程序之预览图片 小程序开发:上传图片到腾讯云 .NET开发微信小程序-上传图片到服务器 微信小程序本地图片处理--按屏幕尺寸插入图片 [微信小程序]上传图片到阿里云OSS Python Flask小程序文件(图片)上传技巧 小程序图片上传阿里OSS使用方法 微信小程序问题汇

CardLayout布局练习(小的图片浏览器)

1 /* 2 涉及Panel中的图片的加载,还有Frame的关闭的方法, CardLayout(int hgap, int vgap)就会决定卡片面板的大小 3 匿名类的使用... 4 */ 5 import java.awt.*; 6 import java.awt.event.*; 7 import javax.swing.*; 8 public class CardLayoutDemo extends Frame{ 9 Panel pCards=new Panel();//卡片面板 10

小蔡图片浏览器

小蔡图片浏览器,这是基于Android4.4开发的一款浏览手机里的图片的浏览器.简单美观实用.欢迎下载. 下载地址:http://download.csdn.net/detail/jczmdeveloper/7329593 应用效果图: 小蔡图片浏览器

无序列表前小黑点图片替换方法

无须列表前小黑点图片替换方法: 直接上代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>无序列表小黑点图片替换</title> &l

Android小应用----图片的拖动、缩放

public class MainActivity extends Activity { private ImageView operImage; private PointF point = new PointF();//记录手指的位置 private PointF midPoint = new PointF();//记录手指间的中点的位置 private Matrix matrix = new Matrix();//记录拖动和缩放前手指按下的matrix private Matrix new

小程序---&gt;小程序图片上传阿里OSS使用方法

小程序图片上传阿里OSS使用方法 首先看下参考文档 ( http://blog.csdn.net/qq_38125123/article/details/73870667) 这里只将一些运用过程中遇到的问题及解决办法: 1.cryptojs,sha1js,hmacjs,base64js在哪下载及使用方法: 文件可以在阿里oss实例文档中找到. 在运用过程中如果是通过require引入的,会找不到引入的方法,原因是这些js文档没有模块导出,可以在原文件里找到其顶部全局对象,exports出来即可.

前端随心记---------小程序的云函数

小程序的云函数开发: 开启小程序的云开发模式: 当每次添加新的函数时,都需要手动进行上传,需支持npm时要在项目开启nom支持. 云函数的增删改查: 增: insert: function () { db.collection('user').add({ data: { name: 'may', age: 18 }, success: res => { console.log(res); }, fail: err => { console.log(err); } }) }, 改: updata

关于微信小程序图片自适应的部分做法

关于微信小程序图片自适应的做法 在日常业务场景中,很多地方都需要图片进行列表的显示,但是这样就存在一个问题,由于每张上传的图片规格并不是一样的,就会发生图片要么过大,要么过小,或者被拉伸的情况,如下图 对于这个情况,我的思路是可以使用image标签内的bindload属性进行计算,bindload属性的介绍如下 下面就是具体的方法流程 1.首先我们在页面上进行布局,只需要给image标签的view容器添加宽高即可,并使用wx:for进行遍历渲染,通过自定义属性data-i传入索引值,容器我同时也

小萌新云主机面板体验大比拼

本人小白,最近使用着几款云主机管理工具体验,针对管理云主机工具体验作出对比.此文旨在一来给诸位小白劈斧开山(老技术员可以绕路了),二来作为自己花了那么多时间的记录分享. 本文可以理解为从一个萌新的角度对云主机管理工具的体验对比. 为什么找云主机管理工具? 找管理工具管理主机.站点和安装会便捷很多.可想而知,有工具软件能用的肯定能代替部分重复搬砖工作. 找了挺多的工具软件的,各家法宝都不一样,而且部分内容了解不是很深入,这里只作为一个小白自己整理的对比工具来看.了解不足或者片面,欢迎评论指出 因为