Todos os produtos
Search
Central de documentação

Object Storage Service:Defina um modo de exibição de imagem

Última atualização: Jul 03, 2026

As imagens em páginas da web são apresentadas principalmente em dois modos: exibição padrão e exibição progressiva. A exibição padrão carrega e exibe as imagens linha por linha, de cima para baixo. A exibição progressiva mostra inicialmente uma versão de baixa resolução da imagem, que se torna mais nítida à medida que os dados são carregados. Para melhorar a experiência do usuário durante períodos de desempenho de rede ruim ou com imagens grandes, configure as imagens armazenadas no Object Storage Service (OSS) para exibição progressiva.

Parâmetros

Ação: interlace

A tabela a seguir descreve o parâmetro e seus valores.

Parâmetro

Descrição

Valor

[value]

Define se a imagem é exibida no modo progressivo.

  • 0: não exibe a imagem no modo progressivo.

  • 1: exibe a imagem no modo progressivo.

    Nota

    A exibição progressiva aplica-se apenas a imagens JPG. Se a imagem desejada não estiver no formato JPG, converta-a usando format,jpg.

Métodos

Use URLs de objetos, SDKs do OSS e operações da API do OSS para configurar parâmetros de processamento de imagem (IMG). As URLs de objetos processam apenas imagens acessíveis publicamente. Para configurar parâmetros IMG em imagens privadas, utilize os SDKs do OSS ou chame operações da API. Para obter mais informações, consulte Métodos de processamento de imagem.

Configure imagens de leitura pública ou leitura/gravação pública para exibição progressiva

Os exemplos a seguir mostram como exibir progressivamente as imagens example.jpg e panda.png armazenadas em um bucket cujo domínio público é https://oss-console-img-demo-cn-hangzhou.oss-cn-hangzhou.aliyuncs.com.

Defina imagens privadas para exibição progressiva

Utilize os SDKs do OSS e a API do OSS para defina imagens privadas para exibição progressiva.

Usar SDKs do OSS

O código de exemplo a seguir configura a exibição progressiva para imagens privadas usando SDKs do OSS para linguagens de programação comuns. Para obter informações sobre como configurar a exibição progressiva usando SDKs do OSS para outras linguagens de programação, consulte Introdução.

Java

É necessário o OSS SDK for Java V3.17.4 ou posterior.

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 {
        // Specify the endpoint of the region. 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 in which the bucket is located. 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 that you want to process. 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 an image that has the same name already exists in the path, the processed image overwrites the image. Otherwise, the processed image is saved in the path. 
        String pathName = "D:\\dest.jpg";

        // Create an OSSClient instance.
        // Call the shutdown method to release resources when the OSSClient is no longer in use. 
        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 it to display progressively. 
            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 of the processed image, 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

É necessário o OSS SDK for PHP V2.7.0 ou posterior.

<?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 name of the bucket. Example: examplebucket. 
$bucket= "examplebucket";
// Specify the full path of the object that you want to process. Do not include the bucket name in the full path. 
$object = "example.jpg";
// Specify the full path of the local file. Example: D:\\dest.jpg. If an image that has the same name already exists in the path, the processed image overwrites the image. Otherwise, the processed image is saved in the path. 
// 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 it to display progressively. 
$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

É necessário o OSS SDK for Python V2.18.4 ou posterior.

# -*- 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. 
# 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 image that you want to process. If the source 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 it to display progressively. 
image = 'image/resize,w_200/interlace,1'
bucket.get_object_to_file(key, new_pic, process=image)

Go

É necessário o OSS SDK for Go V3.0.2 ou posterior.

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. Specify your 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 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 image that you want to process. 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 it to display progressively. 
	image := "image/resize,w_200/interlace,1"
	err = bucket.GetObjectToFile(sourceImageName, targetImageName, oss.Process(image))
	if err != nil {
		HandleError(err)
	}
}

Usar a API RESTful

Se o seu negócio exigir um alto nível de personalização, chame diretamente a API RESTful do OSS. Para chamar uma API diretamente, inclua o cálculo da assinatura no seu código. Para obter mais informações, consulte (Recomendado) Incluir uma assinatura V4.

Defina um modo de exibição para uma imagem incluindo o parâmetro interlace na solicitação GetObject.

GET /oss.jpg?x-oss-process=image/format,jpg/interlace,1 HTTP/1.1
Host: oss-example.oss-cn-hangzhou.aliyuncs.com
Date: Fri, 28 Oct 2022 06:40:10 GMT
Authorization: OSS4-HMAC-SHA256 Credential=LTAI********************/20250417/cn-hangzhou/oss/aliyun_v4_request,Signature=a7c3554c729d71929e0b84489addee6b2e8d5cb48595adfc51868c299c0c218e