实现一个阿里云oss图片处理库

已于 2024-08-26 17:54:55 修改
阅读量891 收藏 28
点赞数 8
分类专栏： Go 图片处理 文章标签： 阿里云 云计算 Go 图像处理
于 2024-08-23 20:58:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AndCo/article/details/141474516
版权

在这里插入图片描述

0.概述

在web开发中我们页面需要对图片做各种处理,如图片缩放、自定义裁剪、质量变换、格式转换等。

而且长期以来，加载速度一直是优化网站最重要的因素之一，访问者和搜索引擎都将调用页面所需的时间作为重要的评价标准。精简的代码或使用缓存机制是解决网站快速加载方案的一部分，而网页中展示的图片大小也影响着加载速度。因此我们不能仅仅通过前端处理，而是在返回图片的时间就要减少大小。

如果是国内用户使用阿里云oss，里面的图片处理使用起来就很方便。但是你如果使用s3或自己搭建得文件服务系统的话，你就得自己实现了。以往我们对于这种得话，我们需要提取准备很多规格得图片上传到文件系统，然后再不同场景使用，但是使用场景会随时变化。那电商来说上传到不同平台得图片尺寸要求不尽相同，这是就得准备大量不同规格得图片了。

因此我们可以自己设计一个类似oss图片处理系统，让以前不支持图片处理得文件系统拥有动态处理图片得能力。

imageprocess库可以帮助我们非常简单实现。

Imageprocess是一个简单的Go图像处理包。支持 WEBP,JPG,JPEG,PNG,BMP,TIFF,GIF。提供了类似阿里云oss的图片处理能力。 包括:

图片缩放

图片水印

自定义裁剪

质量变换

格式转换

模糊效果

旋转

亮度

锐化

对比度

参数兼容阿里云oss图片处理参数，可以用于搭建本地文件oss图片处理系统。

1.安装

go get github.com/AndsGo/imageprocess

2.api调用

import (
	"image/color"
	"os"
	"testing"
    "github.com/AndsGo/imageprocess"
)

func Test_Process(t *testing.T) {
	img, f, err := imageprocess.LoadImage("examples/example.jpg")
	if err != nil {
		t.Error(err)
	}
	file, _ := os.Create("examples/out.jpg")
	options := make([]Option, 0)
	// 格式转换为PNG
	options = append(options, Option{FormatType, FormatOption{Format: PNG}})
	//  改变大小
	options = append(options, Option{Resize, ResizeOption{ResizeMode: Pad, Width: 300, Height: 300, Color: &color.RGBA{R: 255, G: 255, B: 0, A: 255}}})
	// 裁剪
	options = append(options, Option{Crop, CropOption{Width: 200, Height: 200, X: 0, Y: 0, Position: Center}})
	// 水印
	options = append(options, Option{Watermark, TextWatermarkOption{WatermarkOption: WatermarkOption{
		Opacity: 100, Position: South, X: 10, Y: 10,
	}, Color: &color.RGBA{111, 222, 111, 1}, Size: 40, Text: "hello watermark"}})
	// 模糊
	options = append(options, Option{Blur, GammaOption{Value: 5}})
	// 质量
	options = append(options, Option{Quality, QualityOption{Quality: 500}})
	err = imageprocess.Process(img, file, f, options)
	if err != nil {
		t.Error(err)
	}
}

func Test_ProcessGif(t *testing.T) {
	img, err := imageprocess.LoadGif("examples/example.gif")
	if err != nil {
		t.Error(err)
	}
	file, _ := os.Create("examples/out.gif")
	options := make([]Option, 0)
	// 格式转换为GIF
	options = append(options, Option{FormatType, FormatOption{Format: GIF}})
	options = append(options, Option{Gamma, GammaOption{Value: 500}})
	options = append(options, Option{Resize, ResizeOption{ResizeMode: Pad, Width: 300, Height: 300, Color: &color.RGBA{R: 255, G: 255, B: 255, A: 1}}})
	options = append(options, Option{Crop, CropOption{Width: 200, Height: 200, X: 0, Y: 0, Position: Center}})
	options = append(options, Option{Watermark, TextWatermarkOption{WatermarkOption: WatermarkOption{
		Opacity: 20, Position: Center, X: 10, Y: 10,
	}, Color: &color.RGBA{0, 0, 0, 1}, Size: 40, Text: "hello watermark"}})
	err = imageprocess.ProcessGif(img, file, options)
	if err != nil {
		t.Error(err)
	}
}

func Test_UrlOptions(t *testing.T) {
	img, f, err := imageprocess.LoadImage("examples/example.jpg")
	if err != nil {
		t.Error(err)
	}
	file, _ := os.Create("examples/out.jpg")
	// 增加水印，然后修改大小
	options, err := imageprocess.ParseOptions("image/watermark,t_30,g_center,x_10,y_10,text_hello watermark,color_1366ec,size_200/resize,m_pad,h_100,w_100,color_FF0000")
	if err != nil {
		t.Error(err)
	}
	err = imageprocess.Process(img, file, f, options)
	if err != nil {
		t.Error(err)
	}

}

更多api查看 doc

3.Url参数调用

在源码 examples 目录里面实现了一个简单得文件服务器。我们可以轻松实现图片得动态处理。

cd examples
go run example.go

我们可以启动后进行测试。下面我们进行测试

原图：

原图

我们可以和阿里oss一样进行调用了，参数放在url上,固定参数x-oss-process=image/后面接你需要进行逻辑。

调用测试:

http://127.0.0.1:8080/file/example.jpg?x-oss-process=image/resize,w_500,h_300/watermark,t_80,g_se,x_10,y_10,text_hello,color_FFFFFF,size_40/format,webp

在这里插入图片描述

http://127.0.0.1:8080/file/example.gif?x-oss-process=image/resize,w_500,h_300/watermark,t_80,g_se,x_10,y_10,text_hello,color_FF00FF,size_40/format,gif

在这里插入图片描述

更多参数测试如下:

OptionsMeaningImage
resize,h_100,w_300,m_lfit改变大小，高100px，宽300px，模式等比缩放匹配最大边break
resize,m_fill,h_100,w_100将原图缩放成宽高100 px：resize,h_100,w_100 缩放模式fill：m_fill自动裁剪
resize,m_pad,h_100,w_100,color_FF0000将原图缩放成宽高100 px：resize,h_100,w_100 缩放模式pad：m_pad。 以红色填充：color_FF0000填充红色
resize,w_300,h_300/watermark,size_30,text_Hello World,color_FFFFFF,g_se,x_10,y_10将example.jpg缩略为宽高300：resize,w_300,h_300 水印内容为“Hello World”：text_Hello%20World 水印文字颜色为白色、字体大小为30：color_FFFFFF,size_30 水印文字位置是右下、水平边距10、中线垂直偏移10：g_se,x_10,y_10图片处理1
crop,x_800,y_500,w_300,h_300裁剪起点为（800,500）：crop,x_800,y_500 裁减范围300 px*300 px：w_300,h_300裁剪2
crop,w_900,h_900,g_se裁剪起点为原图右下角：crop,g_se 裁减范围900 px*900 px：w_900,h_900裁剪3
resize,w_100/quality,q_80原图缩放为宽100 px：resize,w_100 图片相对质量设置为80%：quality,q_80变换1
format,png将原图转换为PNG格式png
rotate,90将原图按顺时针旋转90°旋转1
bright,50将图片亮度提高50亮度1
sharpen,100对原图进行锐化处理，锐化参数为100锐化1
contrast,-50对比度提高50外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

下面是文件服务器测试代码,可以在源码examples文件夹中找到。

package main

import (
	"fmt"
	"image/gif"
	"io"
	"net/http"
	"os"
	"strings"

	"github.com/AndsGo/imageprocess"
)

// 文件夹，you need change it
var fileFolders = "./"

func main() {
	http.HandleFunc("/file/", fileHandler)

	fmt.Println("Starting server on :8080")
	if err := http.ListenAndServe(":8080", nil); err != nil {
		fmt.Println("Server failed:", err)
	}
}

func fileHandler(w http.ResponseWriter, r *http.Request) {
	// 获取文件名称
	fileName := strings.TrimPrefix(r.URL.Path, "/file/")
	// 打开文件
	file, err := os.Open(fmt.Sprintf("%s%s", fileFolders, fileName))
	if err != nil {
		http.Error(w, "File not found", http.StatusNotFound)
		return
	}
	defer file.Close()
	// 获取参数
	// 获取文件后缀
	f, err := imageprocess.FormatFromExtension(fileName)
	if err != nil {
		// 将处理后的文件内容写入响应
		if _, err := io.Copy(w, file); err != nil {
			http.Error(w, "Failed to send file", http.StatusInternalServerError)
		}
		return
	}
	//处理处理参数
	ossParams := r.URL.Query().Get("x-oss-process")
	if ossParams == "" {
		//无需处理
		if _, err := io.Copy(w, file); err != nil {
			http.Error(w, "Failed to send file", http.StatusInternalServerError)
		}
		return
	}
	options, err := imageprocess.ParseOptions(ossParams)
	if err != nil {
		http.Error(w, fmt.Sprintf("ParseOptions %s", err.Error()), http.StatusInternalServerError)
		return
	}
	if len(options) == 0 {
		//无需处理
		if _, err := io.Copy(w, file); err != nil {
			http.Error(w, "Failed to send file", http.StatusInternalServerError)
		}
		return
	}
	//处理图片
	err = processImg(file, w, f, options)
	if err != nil {
		http.Error(w, fmt.Sprintf("processFile %s", err.Error()), http.StatusInternalServerError)
	}
}

// 进行转换
func processImg(file io.Reader, w io.Writer, f imageprocess.Format, options []imageprocess.Option) error {
	if f == imageprocess.GIF {
		imgGif, err := gif.DecodeAll(file)
		if err != nil {
			return err
		}
		return imageprocess.ProcessGif(imgGif, w, options)
	} else {
		img, err := imageprocess.DecodeImage(file, f)
		if err != nil {
			return err
		}
		return imageprocess.Process(img, w, f, options)
	}
}

原文地址：
https://mp.weixin.qq.com/s/AG2_fJPCSkKlkPeZV5olRQ?token=573702923&lang=zh_CN
源码地址:

https://github.com/AndsGo/imageprocess

AndCo
关注
专栏目录
阿里云图片处理之 图片样式(裁剪)
每天进步一点点, 靠近小目标一点点~
04-19 579
x-oss-process=style/stylename " 就可以看到效果了, 这个相比单独的图片处理(在图片url后拼接参数 https://help.aliyun.com/zh/oss/user-guide/resize-images-4?由于客户端界面展示的图片较多, 而且每个图片都过大并且高清高分辨率的, 导致打开页面时图片加载很慢, 而且是缩略图, 对图片清晰度要求不是那么得高, 因此可以对图片进行压缩。其实除了缩放, 还可以对图片进行 水印 / 裁剪 / 锐化 / 模糊 等等的操作。
图片裁剪与上传处理方案 —— 基于阿里云 OSS 处理用户资料
chengbo_eva的博客
05-30 986
图片裁剪与上传处理方案 —— 基于阿里云 OSS 处理用户资料
在项目中使用阿里云oss实现文件上传功能
m0_63445035的博客
04-30 3340
1. 慢慢的增强查询文档的能力，这一次的OSS的使用，其实也是锻炼查询文档的能力。2. OSS的具体使用，可以简化成以下几步：1. 购买OSS服务，创建好Bucket2. 获取AK（可以通过root或者ARM用户进行获取）3. 在程序中完成oss所需的参数配置包括AK参数的配置，以及上传文件功能的封装。
js 前端上传多张图片到阿里云OSS
Suger的博客
02-27 2493
结合vantUI上传多张图片到阿里云oss
阿里云对象存储OSS的前端直传-demo
JackieDYH的博客
08-26 1205
在项目里有时候会碰到比如上传文件相关的，一般都是后端提供个接口，然后我们上传的时候后端再传到阿里OSS或者其他服务商的对象存储，然后把最终的url拿到存起来或者返回给前端，这种方式其实在上传图片的频率不高的业务场景中可能并无大碍，但是如果你的项目是相册类的，资源提供类的，总之就是有很频繁的上传文件的场景，可能服务器的带宽就有点扛不住了，那么有没有更好的解决方案呢？此时服务端的工作已经完结了，可以提供前端一个接口，通过鉴权之后，返回给前端这么几个参数，接下来，让我们把舞台交给我们的前端~
前端直传阿里云OSS
热门推荐
dan_seek的博客
08-29 1万+
前端直传阿里云OSS，支持h5，支持小程序，支持uniapp。 阿里云对象存储服务（Object Storage Service，简称OSS），是阿里云对外提供的海量、安全、低成本、高可靠的云存储服务。
Typora图床配置：Typora + PicGo + 阿里云OSS
电子开发的经验笔记
02-26 970
使用Typora + PicGo + 阿里云OSS，搭建私有MarkDown图床。
如何实现文件上传到阿里云OSS！！！（结合上传pdf使用）
qq_64847107的博客
04-19 2023
对象存储 OSS_云存储服务_企业数据管理_存储-阿里云阿里云对象存储 OSS 是一款海量、安全、低成本、高可靠的云存储服务，提供 99.995 % 的服务可用性和多种存储类型，适用于数据湖存储，数据迁移，企业数据管理，数据处理等多种场景，可对接多种计算分析平台，直接进行数据处理与分析，打破数据孤岛，优化存储成本，提升业务价值。
WordPress添加阿里云OSS对象云储存配置教程
运维密码
04-11 1355
背景：随着页面文章增多，内置图片存储拖连网站响应速度，这里对我来说主要是想提升速度 目的：使用第三方云存储作为图片外存储(图床)，这样处理可以为服务器节省很多磁盘空间，在网站搬家的时候减少文件迁移的工作量，并且独立云储存在访问文件的时候也避开了服务器带宽的限制，其实主要为了提升响应速度，这里我使用的是阿里云OSS对象云存储作为第三方的一个平台，下面简单介绍如何在WordPress上添加os...
阿里云oss web上传demo.rar
08-17
阿里云OSS（Object Storage Service）是阿里云提供的一个高可用、高可靠、低成本的云存储服务，适合存储各类非结构化的数据，如图片、视频、文档等。本示例是一个Web应用程序，演示如何实现从网页直接上传文件到阿里...
阿里云oss c-sdk交叉编译移植 oss-demo.tar.gz
07-20
阿里云OSS（Object Storage Service）C-SDK交叉编译移植是将阿里云提供的C语言SDK在非目标系统上进行编译，以便在特定的目标硬件或操作系统上运行OSS相关的应用，例如物联网设备、嵌入式系统等。在这个过程中，我们...
前端Jquery，Vue通过授权URL直传阿里云OSS
11-16
本文将详细介绍如何使用Jquery和Vue.js这两个前端库，结合阿里云OSS提供的API，实现通过授权URL进行文件的直传。 首先，让我们了解下阿里云OSS。对象存储服务（OSS）是阿里云提供的一种海量、安全、低成本、高可靠...
Vue.js上传图片到阿里云OSS存储的方法示例
10-17
Vue.js与阿里云OSS集成实现图片上传 在Web开发中，有时我们需要将用户上传的图片存储到云端，以方便后续的访问和管理。阿里云的对象存储服务（OSS）提供了一个高效、安全的解决方案。本文将详细介绍如何在Vue.js...
AliossUploader：layui 阿里云OSS上传插件
06-09
阿里云OSS上传插件AliossUploader是专门为layui框架设计的一个组件，它使得在layui应用中集成阿里云OSS的文件上传功能变得更加便捷。本文将详细讲解AliossUploader的使用方法、功能特性以及如何在实际项目中进行配置...
基于ESP8266—AT指令连接阿里云+MQTT透传数据（3）
qq_26043945的博客
09-29 305
MQTT_RX设备为接收(订阅)数据的Topic，使用ESP8266通过AT指令实现。首先需要串口通信软件，如等串口调试工具，功能丰富，支持常见的串口调试功能，用于发送AT指令。
阿里云域名解析和备案
最新发布
小丁的博客
10-02 156
阿里云域名解析和备案
阿里云部署1Panel(失败版)
joke博客
09-27 516
阿里云Linux部署1Panel
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值