Skip to main content

Cloudinary Node.js

Khởi động nhanh này cho phép bạn triển khai toàn diện và chạy bằng Node.js SDK trong vòng 5 phút hoặc ít hơn.

Trên trang này:

Điều kiện tiên quyết​

1. Thiết lập và cấu hình SDK​

Cài đặt SDK​

Trong terminal của môi trường Node.js, hãy chạy:

Đặt biến môi trường API của bạn​

Trong terminal, hãy thiết lập CLOUDINARY_URLbiến môi trường.

Sao chép định dạng biến môi trường API từ trang Khóa API của Cài đặt Bảng điều khiển Cloudinary. Thay thế <your_api_key>và <your_api_secret>bằng các giá trị thực của bạn, trong khi tên đám mây của bạn đã được bao gồm chính xác trong định dạng.

  • Trên máy Mac hoặc Linux:

    export CLOUDINARY_URL=cloudinary://API_KEY:API_SECRET@CLOUD_NAME

  • Trên Windows:

    set CLOUDINARY_URL=cloudinary://API_KEY:API_SECRET@CLOUD_NAME

  • Khi viết ứng dụng của riêng bạn, hãy tuân thủ chính sách lưu trữ bí mật của tổ chức và không tiết lộ bí mật API của bạn.

  • Nếu bạn sử dụng phương pháp liên quan đến việc ghi biến môi trường vào một tệp (ví dụ dotenv), tệp đó phải được loại trừ khỏi hệ thống kiểm soát phiên bản của bạn để không bị công khai.

Cấu hình Cloudinary​

Tạo một tệp mới có tên là index.js và sao chép và dán nội dung sau vào tệp này:

// Require the cloudinary library
const cloudinary = require('cloudinary').v2;

// Return "https" URLs by setting secure: true
cloudinary.config({
  secure: true
});

// Log the configuration
console.log(cloudinary.config());

2. Tải lên một hình ảnh​

Sao chép và dán đoạn mã này vào index.js :

/////////////////////////
// Uploads an image file
/////////////////////////
const uploadImage = async (imagePath) => {

    // Use the uploaded file's name as the asset's public ID and 
    // allow overwriting the asset with new versions
    const options = {
      use_filename: true,
      unique_filename: false,
      overwrite: true,
    };

    try {
      // Upload the image
      const result = await cloudinary.uploader.upload(imagePath, options);
      console.log(result);
      return result.public_id;
    } catch (error) {
      console.error(error);
    }
};

3. Nhận và sử dụng các chi tiết của hình ảnh​

Sao chép và dán đoạn mã này vào index.js :

/////////////////////////////////////
// Gets details of an uploaded image
/////////////////////////////////////
const getAssetInfo = async (publicId) => {

    // Return colors in the response
    const options = {
      colors: true,
    };

    try {
        // Get details about the asset
        const result = await cloudinary.api.resource(publicId, options);
        console.log(result);
        return result.colors;
        } catch (error) {
        console.error(error);
    }
};

4. Biến đổi hình ảnh​

Sao chép và dán đoạn mã này vào index.js :

//////////////////////////////////////////////////////////////
// Creates an HTML image tag with a transformation that
// results in a circular thumbnail crop of the image  
// focused on the faces, applying an outline of the  
// first color, and setting a background of the second color.
//////////////////////////////////////////////////////////////
const createImageTag = (publicId, ...colors) => {

    // Set the effect color and background color
    const [effectColor, backgroundColor] = colors;

    // Create an image tag with transformations applied to the src URL
    let imageTag = cloudinary.image(publicId, {
      transformation: [
        { width: 250, height: 250, gravity: 'faces', crop: 'thumb' },
        { radius: 'max' },
        { effect: 'outline:10', color: effectColor },
        { background: backgroundColor },
      ],
    });

    return imageTag;
};

5. Chạy mã của bạn​

Sao chép và dán đoạn mã này vào index.js để gọi các hàm bạn vừa tạo:

//////////////////
//
// Main function
//
//////////////////
(async () => {

    // Set the image to upload
    const imagePath = 'https://cloudinary-devs.github.io/cld-docs-assets/assets/images/happy_people.jpg';

    // Upload the image
    const publicId = await uploadImage(imagePath);

    // Get the colors in the image
    const colors = await getAssetInfo(publicId);

    // Create an image tag, using two of the colors in a transformation
    const imageTag = await createImageTag(publicId, colors[0][0], colors[1][0]);

    // Log the image tag to the console
    console.log(imageTag);

})();

Lưu thay đổi rồi chạy tập lệnh từ terminal:

Bạn có thể xem hình ảnh đã được tải lên bộ lưu trữ Cloudinary của mình bằng cách sao chép hình ảnh secure_urlđược trả về trong phản hồi tải lên và dán vào trình duyệt.

[

Hình ảnh người hạnh phúc

](https://res.cloudinary.com/demo/image/upload/v1651585298/happy_people.jpg)

Bạn có thể sử dụng thẻ hình ảnh trả về để hiển thị hình ảnh trên trang web của mình. Bây giờ, hãy sao chép và dán URL để xem hình ảnh đã chuyển đổi trong trình duyệt:

[

Hình ảnh khuôn mặt được biến đổi

](https://res.cloudinary.com/demo/image/upload/c_thumb,g_faces,h_250,w_250/r_max/co_rgb:F8F3F0,e_outline:10/b_rgb:DBE0EA/happy_people)

Xem mã đã hoàn thành​

Bạn có thể xem toàn bộ tập lệnh Node.js trong GitHub và trong trình khám phá mã bên dưới.

Code explorer: Ví dụ đầy đủ về Node.js​

Sau đây là toàn bộ tập lệnh Node.js:

Mã này cũng có sẵn trên GitHub .

Bạn có thể chạy nó bằng cách mở nó trên Replit, fork nó vào tài khoản của bạn và thiết lập biến môi trường API trong Secrets .

Trả lời bí mật

Các bước tiếp theo​

  • Tìm hiểu thêm về Node.js SDK bằng cách truy cập các trang khác trong hướng dẫn SDK này.
  • Nhận thông tin chi tiết về các tính năng và khả năng của Cloudinary:
5:10:58 AM