ネットワーク環境が悪い場合や画像サイズが大きい場合は、標準表示と段階的表示の2つの方法で画像をwebページに表示できます。 標準ディスプレイは、画像を上から下に行ごとに読み込み、表示します。 徐々に表示すると、画像のあいまいな輪郭が表示され、完全な画像が表示されるまで画像が徐々に読み込まれます。 このトピックでは、OSSバケットに保存されているイメージの表示モードを設定する方法について説明します。
パラメーター
操作名: interlace
次の表にパラメーターを示します。
パラメーター | 説明 | 有効値 |
[値] | 画像の表示モードを設定します。 | 0と1
説明 段階的な表示操作は、JPG形式のソース画像にのみ適用されます。 ソースイメージがJPG形式でない場合は、 |
操作方法
パブリック読み取りまたはパブリック読み取り /書き込み画像の表示モードを設定する
例として、中国 (杭州) リージョンにあるoss-console-img-demo-cn-hangzhouバケットを使用します。 イメージのパブリックエンドポイントが https://oss-console-img-demo-cn-hangzhou.oss-cn-hangzhou.aliyuncs.com
です。 使用される画像は、ルートディレクトリのexample.jpgとpanda.pngです。
画像のサイズを200ピクセルの幅に変更し、画像を段階的に表示するように設定します
要件とパラメータ:
画像のサイズを200ピクセルの幅に変更する:
Resize, w_200
画像を段階的な表示に設定する:
interlace,1
画像の処理に使用されるURLは、次の形式です。https://oss-console-img-demo-cn-hangzhou.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_200/interlace,1
PNG画像をJPG画像として保存し、画像を段階的に表示するように設定します
要件とパラメータ:
画像のフォーマットをJPG:
format,jpg
に変換する画像を段階的な表示に設定する:
interlace,1
画像の処理に使用されるURLは、次の形式です。https://oss-console-img-demo-cn-hangzhou.oss-cn-hangzhou.aliyuncs.com/panda.png?x-oss-process=image/format,jpg/interlace,1
プライベート画像の表示モードを設定する
OSS SDKまたはAPI操作を使用して、プライベートイメージの表示モードを設定できます。
OSS SDKの使用
次のサンプルコードは、プライベートイメージの表示モードを設定する方法の例を示しています。 他のプログラミング言語のOSS SDKを使用してプライベートイメージの表示モードを設定する方法の詳細については、「SDKリファレンス」をご参照ください。
Java
Java 3.17.4以降のOSS SDKが必要です。
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. Specify your actual endpoint.
String endpoint = "https://oss-cn-hangzhou.aliyuncs.com";
// Specify the region of the endpoint. Example: cn-hangzhou.
String region = "cn-hangzhou";
// Obtain access credentials from environment variables. Before you run the sample code, make sure that the OSS_ACCESS_KEY_ID and OSS_ACCESS_KEY_SECRET environment variables are configured.
EnvironmentVariableCredentialsProvider credentialsProvider = CredentialsProviderFactory.newEnvironmentVariableCredentialsProvider();
// Specify the name of the bucket. Example: examplebucket.
String bucketName = "examplebucket";
// Specify the full path of the object. Do not include the bucket name in the full path.
String objectName = "example.jpg";
// Specify the full path of the local file. Example: D:\\dest.jpg. If a file that has the same name already exists in the path, the processed image overwrites the file. Otherwise, the processed image is saved in the path.
String pathName = "D:\\dest.jpg";
// Create an OSSClient instance.
ClientBuilderConfiguration clientBuilderConfiguration = new ClientBuilderConfiguration();
clientBuilderConfiguration.setSignatureVersion(SignVersion.V4);
OSS ossClient = OSSClientBuilder.create()
.endpoint(endpoint)
.credentialsProvider(credentialsProvider)
.clientConfiguration(clientBuilderConfiguration)
.region(region)
.build();
try {
// Resize the image to a width of 200 pixels and set the image to gradual display
String image = "image/resize,w_200/interlace,1";
GetObjectRequest request = new GetObjectRequest(bucketName, objectName);
request.setProcess(image);
// Set the name of the processed image to dest.jpg and save it to your local computer.
// If you specify only the name of the processed image such as dest.jpg without specifying the local path, the processed image is saved to the local path of the project to which the sample program belongs.
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 2.7.0以降のOSS SDKが必要です。
<?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 the sample code, make sure that the OSS_ACCESS_KEY_ID and OSS_ACCESS_KEY_SECRET environment variables are configured.
$provider = new EnvironmentVariableCredentialsProvider();
// Specify the endpoint of the region in which the bucket is located. For example, if the bucket is located in the China (Hangzhou) region, set the endpoint to https://oss-cn-hangzhou.aliyuncs.com.
$endpoint = "https://oss-cn-hangzhou.aliyuncs.com";
// Specify the bucket name. Example: examplebucket.
$bucket= "examplebucket";
// Specify the full path of the object. Do not include the bucket name in the full path.
$object = "example.jpg";
// Set the name of the processed image to dest.jpg and save it to your local computer.
// If you specify only the name of the processed image such as dest.jpg without specifying the local path, the processed image is saved to the local path of the project to which the sample program belongs.
$download_file = "D:\\dest.jpg";
$config = array(
"provider" => $provider,
"endpoint" => $endpoint,
"signatureVersion" => OssClient::OSS_SIGNATURE_VERSION_V4,
// Specify the ID of the Alibaba Cloud region in which the bucket is located.
"region" => "cn-hangzhou"
);
$ossClient = new OssClient($config);
// Resize the image to a width of 200 pixels and set the image to gradual display
$image = "image/resize,w_200/interlace,1";
$options = array(
OssClient::OSS_FILE_DOWNLOAD => $download_file,
OssClient::OSS_PROCESS => $image);
// Save the processed image to your local computer.
$ossClient->getObject($bucket, $object, $options);
Python
Python 2.18.4以降のOSS SDKが必要です。
# -*- coding: utf-8 -*-
import oss2
from oss2.credentials import EnvironmentVariableCredentialsProvider
# Obtain access credentials from environment variables. Before you run the sample 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 in which the bucket is located. For example, if the bucket is located in the China (Hangzhou) region, set the endpoint to https://oss-cn-hangzhou.aliyuncs.com.
endpoint = 'https://oss-cn-hangzhou.aliyuncs.com'
# Specify the ID of the Alibaba Cloud region in which the bucket is located.
region = 'cn-hangzhou'
bucket = oss2.Bucket(auth, endpoint, 'examplebucket', region=region)
# Specify the name of the source image. If the image is not stored in the root directory of the bucket, you must include the full path of the image. Example: exampledir/src.gif.
key = 'example.jpg'
# Specify the name of the processed image.
new_pic = 'D:\\dest.jpg'
# Resize the image to a width of 200 pixels and set the image to gradual display
image = 'image/resize,w_200/interlace,1'
bucket.get_object_to_file(key, new_pic, process=image)
Go
Go 3.0.2以降のOSS SDKが必要です。
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 the sample 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.
// Specify the endpoint of the region in which the bucket is located. For example, if the bucket is located in the China (Hangzhou) region, set the endpoint to https://oss-cn-hangzhou.aliyuncs.com.
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 in which 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 stored in the root directory of the bucket, you must include the full path of the image. Example: exampledir/src.gif.
sourceImageName := "example.jpg"
// Specify the name of the processed image.
targetImageName := "D://dest.jpg"
// Resize the image to a width of 200 pixels and set the image to gradual display
image := "image/resize,w_200/interlace,1"
err = bucket.GetObjectToFile(sourceImageName, targetImageName, oss.Process(image))
if err != nil {
HandleError(err)
}
}
RESTful APIの使用
ビジネスで高度なカスタマイズが必要な場合は、RESTful APIを直接呼び出すことができます。 APIを直接呼び出すには、コードに署名計算を含める必要があります。 詳しくは、「GetObject」をご参照ください。
GetObject操作を呼び出して画像の明るさを調整するときに、brightパラメーターを指定できます。
GET /oss.jpg?x-oss-process=image/bright,50 HTTP/1.1
Host: oss-example.oss-cn-hangzhou.aliyuncs.com
Date: Fri, 28 Oct 2022 06:40:10 GMT
Authorization: OSS qn6q**************:77Dv****************