Blur
You can blur an entire image or part of an image in Object Storage Service (OSS) to protect sensitive information or enhance the visual effect.
Scenarios
-
Protect sensitive information: Before you publish an image that contains sensitive information, such as a license plate number or face, you can apply a partial blur to hide these details.
-
Image composition: When you combine multiple image layers, you can apply a blur effect to smooth the edges between layers. This creates a more seamless visual effect.
-
Mask low resolution: If an image has a low resolution and is not suitable for high-definition display, you can apply a moderate blur to reduce the pixelated appearance.
Methods
You can set image processing parameters using a file URL, a software development kit (SDK), or an API. The file URL method applies only to images with public access. For private images, you must use an SDK or an API. For more information, see Image processing methods.
Publicly accessible images
For images with public-read or public-read-write permissions, you can add processing parameters directly to the image URL. Anyone can then permanently and anonymously access the processed image.
The following example shows how to add the ?x-oss-process=image/blur,parameter_value parameter to an image URL. Replace parameter_value with the specific parameters and values described in the Parameters section. You can also combine multiple parameters.
|
Source image URL |
Image URL with processing parameters |
|
https://oss-console-img-demo-cn-hangzhou-3az.oss-cn-hangzhou.aliyuncs.com/example1.jpg |
Private images
Use an Alibaba Cloud SDK
The following code examples show how to add a blur effect to private images using common SDKs. For examples that use other SDKs, see SDK overview.
Java
Java SDK 3.17.4 or later is required.
import com.aliyun.oss.*;
import com.aliyun.oss.common.auth.*;
import com.aliyun.oss.common.comm.SignVersion;
import com.aliyun.oss.model.GetObjectRequest;
import java.io.File;
public class Demo {
public static void main(String[] args) throws Throwable {
// In this example, the endpoint of the China (Hangzhou) region is used. Replace it with the actual endpoint.
String endpoint = "https://oss-cn-hangzhou.aliyuncs.com";
// Specify the region that corresponds to the endpoint. Example: cn-hangzhou.
String region = "cn-hangzhou";
// Obtain access credentials from environment variables. Before you run this code, make sure that the OSS_ACCESS_KEY_ID and OSS_ACCESS_KEY_SECRET environment variables are configured.
EnvironmentVariableCredentialsProvider credentialsProvider = CredentialsProviderFactory.newEnvironmentVariableCredentialsProvider();
// Specify the bucket name. Example: examplebucket.
String bucketName = "examplebucket";
// Specify the full path of the object. The full path cannot contain the bucket name.
String objectName = "src.jpg";
// Specify the full path of the local file. Example: D:\\localpath\\example-new.jpg. If the specified local file exists, it is overwritten. Otherwise, a new file is created.
String pathName = "D:\\dest.jpg";
// Create an OSSClient instance.
// When the OSSClient instance is no longer used, call the shutdown method to release the resources.
ClientBuilderConfiguration clientBuilderConfiguration = new ClientBuilderConfiguration();
clientBuilderConfiguration.setSignatureVersion(SignVersion.V4);
OSS ossClient = OSSClientBuilder.create()
.endpoint(endpoint)
.credentialsProvider(credentialsProvider)
.clientConfiguration(clientBuilderConfiguration)
.region(region)
.build();
try {
// Apply a blur to the image with a radius of 10 and a standard deviation of 10.
String image = "image/blur,r_10,s_10";
GetObjectRequest request = new GetObjectRequest(bucketName, objectName);
request.setProcess(image);
// Name the processed image dest.jpg and save it to your local machine.
// If you specify only the file name (for example, dest.jpg) without a local path, the file is saved to the local path of the project by default.
ossClient.getObject(request, new File("D:\\dest.jpg"));
} catch (OSSException oe) {
System.out.println("Caught an OSSException, which means your request made it to OSS, "
+ "but was rejected with an error response for some reason.");
System.out.println("Error Message:" + oe.getErrorMessage());
System.out.println("Error Code:" + oe.getErrorCode());
System.out.println("Request ID:" + oe.getRequestId());
System.out.println("Host ID:" + oe.getHostId());
} catch (ClientException ce) {
System.out.println("Caught an ClientException, which means the client encountered "
+ "a serious internal problem while trying to communicate with OSS, "
+ "such as not being able to access the network.");
System.out.println("Error Message:" + ce.getMessage());
} finally {
if (ossClient != null) {
ossClient.shutdown();
}
}
}
}
PHP
PHP SDK 2.7.0 or later is required.
<?php
if (is_file(__DIR__ . '/../autoload.php')) {
require_once __DIR__ . '/../autoload.php';
}
if (is_file(__DIR__ . '/../vendor/autoload.php')) {
require_once __DIR__ . '/../vendor/autoload.php';
}
use OSS\Credentials\EnvironmentVariableCredentialsProvider;
use OSS\OssClient;
// Obtain access credentials from environment variables. Before you run this code, make sure that the OSS_ACCESS_KEY_ID and OSS_ACCESS_KEY_SECRET environment variables are configured.
$provider = new EnvironmentVariableCredentialsProvider();
// Set yourEndpoint to the endpoint of the region where the bucket is located. In this example, the endpoint of the China (Hangzhou) region is used.
$endpoint = "https://oss-cn-hangzhou.aliyuncs.com";
// Specify the bucket name. Example: examplebucket.
$bucket= "examplebucket";
// Specify the full path of the object. Example: exampledir/exampleobject.jpg. The full path cannot contain the bucket name.
$object = "src.jpg";
// Specify the full path of the local file. Example: D:\\localpath\\example-new.jpg. If the specified local file exists, it is overwritten. Otherwise, a new file is created.
// If you specify only the local file name (for example, example-new.jpg) without a local path, the file is saved to the local path of the project by default.
$download_file = "D:\\dest.jpg";
$config = array(
"provider" => $provider,
"endpoint" => $endpoint,
"signatureVersion" => OssClient::OSS_SIGNATURE_VERSION_V4,
// Specify the general-purpose Alibaba Cloud region ID.
"region" => "cn-hangzhou"
);
$ossClient = new OssClient($config);
// Apply a blur to the image with a radius of 10 and a standard deviation of 10.
$image = "image/blur,r_10,s_10";
$options = array(
OssClient::OSS_FILE_DOWNLOAD => $download_file,
OssClient::OSS_PROCESS => $image);
// Save the processed image to your local machine.
$ossClient->getObject($bucket, $object, $options);
Python
Python SDK 2.18.4 or later is required.
# -*- coding: utf-8 -*-
import oss2
from oss2.credentials import EnvironmentVariableCredentialsProvider
# Obtain access credentials from environment variables. Before you run this code, make sure that the OSS_ACCESS_KEY_ID and OSS_ACCESS_KEY_SECRET environment variables are configured.
auth = oss2.ProviderAuthV4(EnvironmentVariableCredentialsProvider())
# Set yourEndpoint to the endpoint of the region where the bucket is located. In this example, the endpoint of the China (Hangzhou) region is used.
# Specify the endpoint of the region where the bucket is located. In this example, the endpoint of the China (Hangzhou) region is used.
endpoint = 'https://oss-cn-hangzhou.aliyuncs.com'
# Specify the general-purpose Alibaba Cloud region ID.
region = 'cn-hangzhou'
bucket = oss2.Bucket(auth, endpoint, 'examplebucket', region=region)
# Specify the name of the source image. If the image is not in the root directory of the bucket, specify the full path of the image, such as exampledir/example.jpg.
key = 'src.jpg'
# Specify the name of the processed image.
new_pic = 'D:\\dest.jpg'
# Apply a blur to the image with a radius of 10 and a standard deviation of 10.
image = 'image/blur,r_10,s_10'
bucket.get_object_to_file(key, new_pic, process=image)
Go
Go SDK 3.0.2 or later is required.
package main
import (
"fmt"
"os"
"github.com/aliyun/aliyun-oss-go-sdk/oss"
)
func HandleError(err error) {
fmt.Println("Error:", err)
os.Exit(-1)
}
func main() {
// Obtain access credentials from environment variables. Before you run this code, make sure that the OSS_ACCESS_KEY_ID and OSS_ACCESS_KEY_SECRET environment variables are configured.
provider, err := oss.NewEnvironmentVariableCredentialsProvider()
if err != nil {
fmt.Println("Error:", err)
os.Exit(-1)
}
// Create an OSSClient instance.
// Set yourEndpoint to the endpoint of the bucket. In this example, the endpoint of the China (Hangzhou) region is used. Replace it with the actual endpoint.
client, err := oss.New("https://oss-cn-hangzhou.aliyuncs.com", "", "", oss.SetCredentialsProvider(&provider), oss.AuthVersion(oss.AuthV4), oss.Region("cn-hangzhou"))
if err != nil {
HandleError(err)
}
// Specify the name of the bucket where the source image is stored. Example: examplebucket.
bucketName := "examplebucket"
bucket, err := client.Bucket(bucketName)
if err != nil {
HandleError(err)
}
// Specify the name of the source image. If the image is not in the root directory of the bucket, specify the full path of the image, such as exampledir/example.jpg.
sourceImageName := "src.jpg"
// Specify the name of the processed image.
targetImageName := "D://dest.jpg"
// Apply a blur to the image with a radius of 10 and a standard deviation of 10.
image := "image/blur,r_10,s_10"
err = bucket.GetObjectToFile(sourceImageName, targetImageName, oss.Process(image))
if err != nil {
HandleError(err)
}
}
Use a REST API
If your application requires a high degree of customization, you can make REST API requests directly. This requires you to manually write code to calculate the signature. For more information about how to calculate the Authorization request header, see Version 4 signature (recommended).
You can add blur parameters to the GetObject operation to process an image. For more information, see GetObject.
GET /oss.jpg?x-oss-process=image/blur,r_10,s_10 HTTP/1.1
Host: oss-example.oss-cn-hangzhou.aliyuncs.com
Date: Fri, 28 Oct 2022 06:40:10 GMT
Authorization: SignatureValue
Private images (requires binding an IMM project)
To use the g_face or g_faces parameter, you must first bind the bucket to an Intelligent Media Management (IMM) project. For more information, see Quick Start.
Use an Alibaba Cloud SDK
The following code examples show how to add a blur effect to private images using common SDKs. For examples that use other SDKs, see SDK overview.
Java
Java SDK 3.17.4 or later is required.
import com.aliyun.oss.*;
import com.aliyun.oss.common.auth.*;
import com.aliyun.oss.common.comm.SignVersion;
import com.aliyun.oss.model.GetObjectRequest;
import java.io.File;
public class Demo {
public static void main(String[] args) throws Throwable {
// In this example, the endpoint of the China (Hangzhou) region is used. Replace it with the actual endpoint.
String endpoint = "https://oss-cn-hangzhou.aliyuncs.com";
// Specify the region that corresponds to the endpoint. Example: cn-hangzhou.
String region = "cn-hangzhou";
// Obtain access credentials from environment variables. Before you run this code, make sure that the OSS_ACCESS_KEY_ID and OSS_ACCESS_KEY_SECRET environment variables are configured.
EnvironmentVariableCredentialsProvider credentialsProvider = CredentialsProviderFactory.newEnvironmentVariableCredentialsProvider();
// Specify the bucket name. Example: examplebucket.
String bucketName = "examplebucket";
// Specify the full path of the source image. The full path cannot contain the bucket name.
String objectName = "example.jpg";
// Specify the full path to which you want to save the processed image. Example: D:\\dest.jpg. If the specified local file exists, it is overwritten. Otherwise, a new file is created.
String pathName = "D:\\dest.jpg";
// Create an OSSClient instance.
// When the OSSClient instance is no longer used, call the shutdown method to release the resources.
ClientBuilderConfiguration clientBuilderConfiguration = new ClientBuilderConfiguration();
clientBuilderConfiguration.setSignatureVersion(SignVersion.V4);
OSS ossClient = OSSClientBuilder.create()
.endpoint(endpoint)
.credentialsProvider(credentialsProvider)
.clientConfiguration(clientBuilderConfiguration)
.region(region)
.build();
try {
// Set the blur scope to all faces, and apply a blur with a radius of 25 and a standard deviation of 50.
String image = "image/blur,g_faces,r_25,s_50";
GetObjectRequest request = new GetObjectRequest(bucketName, objectName);
request.setProcess(image);
// Save the processed image to your local machine.
// If you specify only the file name (for example, dest.jpg) without a local path, the file is saved to the local path of the project by default.
ossClient.getObject(request, new File("D:\\dest.jpg"));
} catch (OSSException oe) {
System.out.println("Caught an OSSException, which means your request made it to OSS, "
+ "but was rejected with an error response for some reason.");
System.out.println("Error Message:" + oe.getErrorMessage());
System.out.println("Error Code:" + oe.getErrorCode());
System.out.println("Request ID:" + oe.getRequestId());
System.out.println("Host ID:" + oe.getHostId());
} catch (ClientException ce) {
System.out.println("Caught an ClientException, which means the client encountered "
+ "a serious internal problem while trying to communicate with OSS, "
+ "such as not being able to access the network.");
System.out.println("Error Message:" + ce.getMessage());
} finally {
if (ossClient != null) {
ossClient.shutdown();
}
}
}
}
PHP
PHP SDK 2.7.0 or later is required.
<?php
if (is_file(__DIR__ . '/../autoload.php')) {
require_once __DIR__ . '/../autoload.php';
}
if (is_file(__DIR__ . '/../vendor/autoload.php')) {
require_once __DIR__ . '/../vendor/autoload.php';
}
use OSS\Credentials\EnvironmentVariableCredentialsProvider;
use OSS\OssClient;
// Obtain access credentials from environment variables. Before you run this code, make sure that the OSS_ACCESS_KEY_ID and OSS_ACCESS_KEY_SECRET environment variables are configured.
$provider = new EnvironmentVariableCredentialsProvider();
// Set yourEndpoint to the endpoint of the region where the bucket is located. In this example, the endpoint of the China (Hangzhou) region is used.
$endpoint = "https://oss-cn-hangzhou.aliyuncs.com";
// Specify the bucket name. Example: examplebucket.
$bucket= "examplebucket";
// Specify the full path of the source image. The full path cannot contain the bucket name.
$object = "src.jpg";
// Specify the full path to which you want to save the processed image. Example: D:\\dest.jpg. If the specified local file exists, it is overwritten. Otherwise, a new file is created.
// If you specify only the local file name (for example, dest.jpg) without a local path, the file is saved to the local path of the project by default.
$download_file = "D:\\dest.jpg";
$config = array(
"provider" => $provider,
"endpoint" => $endpoint,
"signatureVersion" => OssClient::OSS_SIGNATURE_VERSION_V4,
// Specify the general-purpose Alibaba Cloud region ID.
"region" => "cn-hangzhou"
);
$ossClient = new OssClient($config);
// Set the blur scope to all faces, and apply a blur with a radius of 25 and a standard deviation of 50.
$image = "image/blur,g_faces,r_25,s_50";
$options = array(
OssClient::OSS_FILE_DOWNLOAD => $download_file,
OssClient::OSS_PROCESS => $image);
// Save the processed image to your local machine.
$ossClient->getObject($bucket, $object, $options);
Python
Python SDK 2.18.4 or later is required.
# -*- coding: utf-8 -*-
import oss2
from oss2.credentials import EnvironmentVariableCredentialsProvider
# Obtain access credentials from environment variables. Before you run this code, make sure that the OSS_ACCESS_KEY_ID and OSS_ACCESS_KEY_SECRET environment variables are configured.
auth = oss2.ProviderAuthV4(EnvironmentVariableCredentialsProvider())
# Specify the endpoint of the region where the bucket is located. In this example, the endpoint of the China (Hangzhou) region is used.
endpoint = 'https://oss-cn-hangzhou.aliyuncs.com'
# Specify the general-purpose Alibaba Cloud region ID.
region = 'cn-hangzhou'
bucket = oss2.Bucket(auth, endpoint, 'examplebucket', region=region)
# If the source image is in the root directory of the bucket, specify only the image name, such as source-example.jpg. If the source image is not in the root directory, specify the full path, such as exampledir/source-example.jpg.
key = 'source-example.jpg'
# Specify the full path of the local file. Example: D:\\target-example.jpg. If the specified local file exists, it is overwritten. Otherwise, a new file is created.
local_file_name = 'D:\\target-example.jpg'
# Set the blur scope to all faces, and apply a blur with a radius of 25 and a standard deviation of 50.
process = 'image/blur,g_faces,r_25,s_50'
# Use the get_object method and pass the processing instruction in the process parameter.
result = bucket.get_object_to_file(key, local_file_name, process=process)
Go
Go SDK 3.0.2 or later is required.
package main
import (
"fmt"
"os"
"github.com/aliyun/aliyun-oss-go-sdk/oss"
)
func HandleError(err error) {
fmt.Println("Error:", err)
os.Exit(-1)
}
func main() {
// Obtain access credentials from environment variables. Before you run this code, make sure that the OSS_ACCESS_KEY_ID and OSS_ACCESS_KEY_SECRET environment variables are configured.
provider, err := oss.NewEnvironmentVariableCredentialsProvider()
if err != nil {
fmt.Println("Error:", err)
os.Exit(-1)
}
// Create an OSSClient instance.
// Set yourEndpoint to the endpoint of the bucket. In this example, the endpoint of the China (Hangzhou) region is used. Replace it with the actual endpoint.
client, err := oss.New("https://oss-cn-hangzhou.aliyuncs.com", "", "", oss.SetCredentialsProvider(&provider), oss.AuthVersion(oss.AuthV4), oss.Region("cn-hangzhou"))
if err != nil {
HandleError(err)
}
// Specify the name of the bucket where the source image is stored. Example: examplebucket.
bucketName := "examplebucket"
bucket, err := client.Bucket(bucketName)
if err != nil {
HandleError(err)
}
// Specify the name of the source image. If the image is not in the root directory of the bucket, specify the full path of the image, such as exampledir/example.jpg.
sourceImageName := "example.jpg"
// Specify the name of the processed image.
targetImageName := "D://dest.jpg"
// Set the blur scope to all faces, and apply a blur with a radius of 25 and a standard deviation of 50.
image := "image/blur,g_faces,r_25,s_50"
err = bucket.GetObjectToFile(sourceImageName, targetImageName, oss.Process(image))
if err != nil {
HandleError(err)
}
}
Use a REST API
If your application requires a high degree of customization, you can make REST API requests directly. This requires you to manually write code to calculate the signature. For more information about how to calculate the Authorization request header, see Version 4 signature (recommended).
You can add blur parameters to the GetObject operation to process an image. For more information, see GetObject.
GET /oss.jpg?x-oss-process=image/blur,g_faces,r_25,s_50 HTTP/1.1
Host: oss-example.oss-cn-hangzhou.aliyuncs.com
Date: Fri, 28 Oct 2022 06:40:10 GMT
Authorization: SignatureValue
Parameters
Action: blur
The following table describes the parameters.
|
Parameter |
Required |
Description |
Valid values |
|
r |
Yes |
The blur radius. |
[1, 50] The larger the value, the blurrier the image. |
|
s |
Yes |
The standard deviation of the normal distribution. |
[1, 50] The larger the value, the blurrier the image. |
|
g |
No |
The scope of the blur. |
Note
|
|
p |
No |
The scaling factor. |
[1, 200] Unit: percent. Note
This parameter is effective only when g_face or g_faces is set. |
Examples
References
You can apply image processing operations directly to an image URL. You can also use Cascading Style Sheets (CSS) to further adjust the style and optimize the visual effect. The following code shows how to use the OSS image processing feature to blur an image and combine it with CSS for a richer visual effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blur Effect Example</title>
<style>
.blurred {
filter: blur(5px);
}
.container {
position: relative;
width: 300px;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 24px;
}
</style>
</head>
<body>
<div class="container">
<img src="https://oss-console-img-demo-cn-hangzhou-3az.oss-cn-hangzhou.aliyuncs.com/example1.jpg" alt="Sample Image" class="blurred">
<div class="text">Hello World</div>
</div>
<div>
<img src="https://oss-console-img-demo-cn-hangzhou-3az.oss-cn-hangzhou.aliyuncs.com/example1.jpg?x-oss-process=image%2Fblur%2Cr_10%2Cs_10&spm=a2c4g.11186623.0.i12">
</div>
</body>
</html>





