阿里云oss对象存储图片预处理

最新推荐文章于 2024-04-19 16:00:19 发布
最新推荐文章于 2024-04-19 16:00:19 发布
阅读量4.5k 收藏 1
点赞数
分类专栏： 前端 阿里云 文章标签： 阿里云 图像预处理 oss
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/towrabbit/article/details/84967291
版权

点子

最近发现阿里云oss对象存储还有图片处理技术，只要图片链接附加一些参数信息，可以将处理之后的图片发送过来，相比起先发送再处理要有很多好处。

优点

  • 不需要本地处理图片了
  • 发送的图片是处理过的比如假如是缩小版的话就能减少带宽使用
  • 图片可以加水印

费用

图片处理费用如下
阿里云oss图片处理费用
也就是说每个月处理的图片在10TB以下是免费的，大于10GB的部分按照0.025元/GB进行计算，计算的时候按照图片原有大小进行。
对于我这样的小体量用户来说 图片处理就是完全免费的了

图片缩放

我有一张图片，我的头像是340*340大小。如下图
towrabbit角角兔
看起来有点太大了 大部分情况下我不需要那么大我们试试把它进行缩放

https://i-blog.csdnimg.cn/blog_migrate/ddd112b6bcbc87ab0ff0443256f87603.png?x-oss-process=image/resize,w_100

前面的链接就是http://<存储桶名>-<存储桶区域域名>/<对象名>?(处理规则)
意为把宽变成100，高按照比例缩放
处理规则有很多 这里使用了缩放规则。
最后的图片如下：
角角兔towrabit头像缩放100宽度
头像变成了100宽，高度按照比例缩小也是100了。
更多缩放规则请参照阿里云对象存储图片缩放预处理规则

裁剪

裁剪规则用到的地方也比较频繁，比如在切精灵图的时候。
同样是我的头像，进行一个圆型裁剪试试

圆形裁剪

圆形裁切 半径100的圆

https://i-blog.csdnimg.cn/blog_migrate/ddd112b6bcbc87ab0ff0443256f87603.png?x-oss-process=image/circle,r_100

阿里云图片预处理 圆形裁切
opps 感觉这脸有点大（笑哭）
所以我还是想先缩放再裁切比较好
下面试一试先缩放再裁切：

https://i-blog.csdnimg.cn/blog_migrate/ddd112b6bcbc87ab0ff0443256f87603.png?x-oss-process=image/resize,w_100/circle,r_100

阿里云图片预处理 圆形裁切
ojbk,使用的规则是先做的吃力放在前面 后做的处理放在后面,
格式为：格式为image/action1,param_value1/action2,param_value2
对于有透明度的图片进行裁切 其他部分会变成透明，如果是jpg则会以白色填充。

长方形自定义裁切

我的头像有个小爱心–现在试试把爱心裁剪出来

https://i-blog.csdnimg.cn/blog_migrate/ddd112b6bcbc87ab0ff0443256f87603.png?x-oss-process=image/crop,x_0,y_0,w_100,h_80

阿里云图片预处理长方形裁切
这样我的小心就裁剪出来了
动作名crop x和y为裁切开始点坐标，w和h分别是宽和高。

旋转

试试把图像旋转一下
这里用的是之前裁剪缩放过的图片

https://i-blog.csdnimg.cn/blog_migrate/ddd112b6bcbc87ab0ff0443256f87603.png?x-oss-process=image/resize,w_100/circle,r_100/rotate,270

阿里云图片预处理 圆形裁切
因为本来是歪着头的
使用rotate旋转了270度以奇怪的方式展现在面前了
旋转的参数在0-360度之间，

添加水印

在一张图片右下角添加水印

https://i-blog.csdnimg.cn/blog_migrate/ddd112b6bcbc87ab0ff0443256f87603.png?x-oss-process=image/watermark,text_5L2g5aW95oiR5piv6KeS6KeS5YWU,g_se,size_20,color_ffcc00,shadow_20,t_50,type_ZmFuZ3poZW5naGVpdGk=

阿里云图片预处理-角角兔
其中文字的参数要经过base64加密，可以在
在线base加密解密 进行加密

涉及的参数比较多，可以在阿里云图片处理水印文档查看
这里涉及到的参数

  • g

从下面九个中取值 [nw,north,ne,west,center,east,sw,south,se]
分别为左上，上，右上，左，中间，右，左下，下，右下。英语中的九个方位 包括center中间

  • t
    字透明度 0-100范围
  • text
    文字内容，需要经过base64编码
  • size
    字体大小，默认40 我这里是20，可以改成自己喜欢的大小
  • color
    字的颜色
  • shadow
    阴影深浅，0-100 100是最深 没有颜色之分

其他还有蛮多属性 如果需要可以去官方文档查看。

角角兔towrabit头像缩放100宽度

  • 这里是角角兔 towrabbit
  • 欢迎点赞评论哦
towrabbit
关注
专栏目录
图片存储解决方案---阿里云OSS
m0_58736477的博客
09-17 640
实现图片上传服务，方案： 直接将图片保存到服务所在的硬盘 优点：开发便捷，成本低 缺点：扩容困难 使用分布式文件系统进行存储 优点：容易实现扩容 缺点：部署复杂、开发复杂度稍大（有成熟的产品可以使用，比如：FastDFS） 使用第三方的存储服务 优点：开发简单，拥有强大功能，免维护 缺点：付费 对象存储OSS_云存储服务_企业数据管理_存储-阿里云阿里云对象存储OSS是一款海量、安全
如何进行阿里云图片存储？
最新发布
m0_62869063的博客
07-11 392
首先，第一步就是在阿里云上面开通阿里OSS云存储，然后创建Bucket，获取密钥等等，操作可以看下面这个链接，我看他把每一步都写好了，按照步骤来就行了。原文链接：https://blog.csdn.net/m0_59748326/article/details/139233780。
阿里云OSS图片图像处理在网站优化上有积极成效，列上可能遇到的问题
helgeal的博客
01-14 428
阿里云OSS图片图像处理在网站优化上有积极成效，列上可能遇到的问题 阿里云提供了一种极为简单的图片处理方式在img的src的url上添加参数： ?x-oss-process=image/resize,w_300/quality,q_90 类似的就可以对图片的的尺寸进行resize 该方法可以显著减少图片的大小 当我测出这张图片的最大尺寸 比如 137px 那我就可以设置?x-oss-process=image/resize,w_137 据测试据测试一张96.9KB大小的图片尺寸为width = 557px
阿里云OSS图片服务器使用，不要怀疑，可以用
qq_42455565的博客
06-22 1698
不废话了，oss是什么这些去姑够或度娘查； 我一springboot项目为例， 配置oss服务器 首先配置图片服务器的配置信息 图中oss为oss服务器的配置信息，tmpFilePath是本地存放临时图的地址 图片数据转码 为了安全图片肯定是要结果转码的，至于什么转码方式就根据业务需要了。 我们这里的图片经过URL传递过来，且使用了URL与base64双重编码，所以这里需要用URLDecoder解码后才可用。如果你有现成的图片可以省略这一步操作 String fileName = im
图片裁剪成圆形并上传到阿里云OSS-thinkPHP5
qq_41148682的博客
07-21 531
imagecopyresampled($final,$img,0,0,($width-$imsize)/2,($height-$imsize)/2,$imsize,$imsize,$imsize,$imsize);imagecopymerge($final,$im,0,0,0,0,$imsize,$imsize,100);imagefilledellipse($im,$imsize/2,$imsize/2,$imsize,$imsize,$black);
阿里云OSS上传文件夹下的图片遇到的坑
谁说学美术将来只能卖画了，我也有自己的梦想。
09-14 560
首先我想要的是一个脚本可以上传图片 需求是有一个文件夹，图片文件不详 结合官方API，https://help.aliyun.com/document_detail/111265.html nodejs代码如下： //获取项目工程里的图片 var fs = require('fs');//引用文件系统模块 var image = require("imageinfo"); //引用imageinfo模块 const OSS = require('ali-oss') const path = require
帝国CMS百度编辑器图片附件同步整合阿里云OSS
06-12
标题中的“帝国CMS百度编辑器图片附件同步整合阿里云OSS”表明了这个项目是关于将帝国CMS（Empire CMS）系统中使用的百度编辑器（UEditor）与阿里云的对象存储服务（OSS）进行集成，目的是实现图片附件在上传时能够...
阿里云oss上传照片js 、jquery
07-27
阿里云OSS（Object Storage Service）是阿里云提供的高可用、高可靠、低成本的数据存储服务。它可以帮助企业和个人存储大量的图片、视频、文档等非结构化数据，并且提供了丰富的API和SDK，方便开发者进行集成和二次...
阿里云oss图片上传代码.zip
11-06
开发者可以通过简单的API接口，将数据存储到阿里云OSS，并在任何时间、任何地点、任何互联网设备上进行访问。本教程主要讲解如何使用Java SDK实现阿里云OSS图片上传的详细步骤。 首先，你需要在阿里云官方网站注册...
阿里云-对象存储服务OSS最佳实践-D.docx
10-10
阿里云对象存储服务OSS（Object Storage Service）是一种大...总之，通过遵循这些最佳实践，开发者可以快速构建一个高效、安全的移动应用数据存储解决方案，充分利用阿里云OSS的优势，减少运维复杂性，提高用户体验。
对象存储OSS云存储
weixin_41274719的博客
01-19 2756
一.阿里云OSS云存储简介 1.什么是阿里云oss云存储 阿里云对象存储服务（Object Storage Service，简称 OSS），是阿里云提供的海量、安全、低成 本、高可靠的云存储服务。其数据设计持久性不低于 99.9999999999%（12 个 9），服务设计可用性 （或业务连续性）不低于 99.995%。 可以使用阿里云提供的 API、SDK 接口或者 OSS 迁移工具轻松地将海量数据移入或移出阿里云 OSS。 数据存储到阿里云 OSS 以后，可以选择标准存储（Sta
Image Cropper 裁剪图片
qq_31426247的博客
06-16 1150
使用Image Cropper插件裁剪图片，是将原图片流以及裁剪的top，left，width，height值传递/上传图片/ (‘.upload-img’).on(‘change’,function() {     var ieVersion = Number(document.documentMode);     if(ieVersion < 10) {(‘.upload-img’).on(‘
阿里云OSS对象存储的图片裁剪
zhaomengxia123的博客
08-21 6719
https://help.aliyun.com/document_detail/44693.html?spm=a2c4g.11186623.6.1402.1d55c1f6TYcY0S 裁剪可以是返回前段时图片链接末尾添加相应的参数，也可以是存储的时候拼接上相应的参数，根据具体业务需求灵活应用 通过阿里云OSS对象存储 返回的图片链接末尾加以下绿框中的信息即可进行裁剪 原图宽度或则高度大于我们...
阿里云图片处理之 图片样式(裁剪)
每天进步一点点, 靠近小目标一点点~
04-19 550
x-oss-process=style/stylename " 就可以看到效果了, 这个相比单独的图片处理(在图片url后拼接参数 https://help.aliyun.com/zh/oss/user-guide/resize-images-4?由于客户端界面展示的图片较多, 而且每个图片都过大并且高清高分辨率的, 导致打开页面时图片加载很慢, 而且是缩略图, 对图片清晰度要求不是那么得高, 因此可以对图片进行压缩。其实除了缩放, 还可以对图片进行 水印 / 裁剪 / 锐化 / 模糊 等等的操作。
x-oss-process=image/resize,请求图片附加参数不一样，显示大小和分辨率跟着改变，详解
热门推荐
橙-极纪元-cplvfx-JJY.Cheng
03-04 3万+
图片请求路径： https://i.vzan.cc/zt/image/HomeImage/jpeg/2017/12/20/19530418efddd9eba34b789d4942c7d8a98b8d.jpeg?x-oss-process=image/resize,limit_0,m_fill,w_200,h_200/quality,q_100 图片原路径： https://i.vzan....
图片裁剪并上传到阿里云oss
不积跬步，无以至千里
12-08 931
此案例需要基于我前面两遍文章的代码，建议先行阅读。 阿里云OSS图片上传（java web直传）https://blog.csdn.net/u011628753/article/details/110876234 前端图片裁剪并上传到七牛云kodohttps://blog.csdn.net/u011628753/article/details/110877703 逻辑思想 将dataUrl（base64）转换为file对象,利用uploader.addFile添加file文件，然后再上传文件..
阿里云OSS图片缩放处理
calm_encode的博客
08-03 2647
一 官方文档 图片缩放 - 对象存储 OSS - 阿里云 (aliyun.com) 二 注意事项 处理需要注意limit参数处理。只有当limit为0的时候才能够对图片进行放大处理，且最大的像素为4096*4096. 固定宽高放大示例： http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,m_fixed,limit_0,h_409...
为何图片经过OSS缩略之后尺寸变大了？——影响不同格式图片文件大小的一些因素和实际示例...
weixin_34087307的博客
04-28 879
简介 OSS提供了基本的图片处理功能和图片格式之间的转换功能，在实际使用过程中，很多用户使用OSS将原图缩略之后输出，在这个过程中也出现了很多用户询问为何缩略之后图片尺寸变大，如这个例子： 原图：http://batchtest.oss-cn-hangzhou.aliyuncs.com/example1.png 处理之后：http://batchtest...
阿里云oss图片的常用处理方法小结
pk142536的博客
09-10 1万+
代码转格式，缩略图 HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。 如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的。 canvas.toDataURL(type, encoderOpti...
阿里云OSS对象存储快速入门指南
"阿里云对象存储OSS 快速入门.pdf" 阿里云对象存储服务（Object Storage Service，简称OSS），是一种高度可扩展、安全可靠的网络数据存储解决方案。该服务专注于处理非结构化的数据文件，如文本、图像、音频和视频...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值