Node.js でオンラインで SVG を PNG に変換する方法

Node.js でオンラインで SVG を PNG に変換する方法

SVG(Scalable Vector Graphics) は、2 次元画像のレンダリングに一般的なベクトルベースのグラフィックスを定義します。一方、PNG 画像形式は、ラスターベースの透明ファイルに最適な選択肢の 1 つです。ピクセルと透明度を扱う場合は、SVG よりも PNG の方が適しています。 SVG は、写真のような詳細、テクスチャ、品質が豊富な画像にも適していません。このようなシナリオでは、オンラインで SVG ファイルを PNG 形式に変換できます。それでは、Node.js でオンラインで SVG を PNG に変換する方法を見てみましょう。

この記事では次のトピックについて説明します。

SVG を PNG API および Node.js SDK に変換する

この記事では、GroupDocs.Conversion Cloud の Node.js SDK 強力なライブラリを使用して、Nodejs アプリケーションで SVG を PNG 形式に変換します。この API を使用すると、ドキュメントを必要な形式に変換できます。 PDF、HTML、Word、Excel、PowerPoint, JPG、PNG、GIF、CAD など 50 種類以上のドキュメントや画像の 変換をサポート。.NET、Java、PHP、Ruby も提供、Android、および Python SDK を Cloud API の ドキュメント変換ファミリー メンバー として使用します。

コンソールで次のコマンドを使用して、GroupDocs.Conversion SVG to PNG コンバーターの無料ダウンロード ライブラリを Node.js アプリケーションにインストールします。

npm install groupdocs-conversion-cloud

手順と利用可能なコード例に従う前に、ダッシュボード からクライアント ID とクライアント シークレットを取得してください。 ID とシークレットを取得したら、以下に示すようにコードを追加します。

# http://api.groupdocs.cloud から Node.js SDK をノード アプリケーションにインポートします
global.groupdocs_conversion_cloud = require("groupdocs-conversion-cloud");
global.fs = require("fs");

// https://dashboard.groupdocs.cloud から clientId と clientSecret を取得します (無料の登録が必要です)。
global.clientId = "xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx";
global.clientSecret = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
global.myStorage = "test-internal-storage";
const config = new groupdocs_conversion_cloud.Configuration(clientId, clientSecret);
config.apiBaseUrl = "https://api.groupdocs.cloud";

Node.js でオンラインで画像を SVG から PNG に変換する方法

SVG コードをオンラインで PNG に変換するには、以下の手順に従ってください。

  1. SVGファイルをクラウドにアップロード
  2. 変換 Node.js で品質を損なうことなく SVG を PNG に変換
  3. ダウンロード変換したPNGファイル

画像をアップロードする

まず、次のコードサンプルを使用して、SVG ファイルをクラウドにアップロードします。

// システム ドライブから IOStream 内のファイルを開きます。
var resourcesFolder = 'H:\\groupdocs-cloud-data\\sample-file.svg';
// ファイルを読み取る
fs.readFile(resourcesFolder, (err, fileStream) => {
  // FileApi を構築する
  var fileApi = groupdocs_conversion_cloud.FileApi.fromConfig(config);
  // アップロードファイルリクエストの作成
  var request = new groupdocs_conversion_cloud.UploadFileRequest("sample-file.svg", fileStream, myStorage);
  // ファイルをアップロードする
  fileApi.uploadFile(request)
    .then(function (response) {
      console.log("Expected response type is FilesUploadResult: " + response.uploaded.length);
    })
    .catch(function (error) {
      console.log("Error: " + error.message);
    });
});

その結果、アップロードされた SVG ファイルは、クラウド上のダッシュボードの ファイル セクション で利用できるようになります。

Node.js でオンラインで SVG を PNG に高品質に変換

このセクションでは、以下の手順に従って、プログラムでオンラインで SVG を PNG 透明背景に変換します。

  • ConvertApi のインスタンスを作成します。
  • 次に、ConvertSettings オブジェクトを作成します
  • クラウドストレージ名を入力します
  • 入力SVGファイルのパスを設定します。
  • 形式に「png」を割り当てる
  • 出力ファイルのパスを指定します
  • ConvertDocumentRequest の作成
  • 最後に、変換設定を使用して ConvertApi.convertDocument() メソッドを呼び出して、SVG を PNG に変更します。

次のコード例は、Node.js の REST API を使用して、品質を損なうことなくオンライン SVG を PNG に変換する方法を示しています。

// Node.js でオンラインで画像を SVG から PNG に変換する方法

const convert = async () => {
  const convertApi = groupdocs_conversion_cloud.ConvertApi.fromKeys(clientId, clientSecret);

  const settings = new groupdocs_conversion_cloud.ConvertSettings();
  settings.storageName = myStorage;
  settings.filePath = "nodejs-testing/sample-file.svg";
  settings.format = "png";
  settings.outputPath = "nodejs-testing/sample-file.png";

  try {
    // 変換ドキュメントリクエストの作成
    const request = new groupdocs_conversion_cloud.ConvertDocumentRequest(settings);
    await convertApi.convertDocument(request);
  }
  catch (err) {
    throw err;
  }
}

convert()
.then(() => {
  console.log("Successfully converted SVG to PNG without losing quality.");
})
.catch((err) => {
  console.log("Error occurred while converting SVG document:", err);
})
Node.js を使用して SVG を PNG 形式でオンラインで保存する方法

Node.js で SVG を高品質の PNG にオンライン変換します

変換されたファイルをダウンロードする

上記のコードサンプルは、変換された PNG ファイルをクラウドに保存します。次のコードサンプルを使用してダウンロードできます。

// 変換されたファイルをダウンロードするための FileApi を構築する
var fileApi = groupdocs_conversion_cloud.FileApi.fromConfig(config);
// ダウンロードファイルリクエストの作成
let request = new groupdocs_conversion_cloud.DownloadFileRequest("nodejs-testing/sample-file.png", myStorage);
// ダウンロード ファイルと応答タイプ ストリーム
fileApi.downloadFile(request)
    .then(function (response) {
        // ファイルをシステムディレクトリに保存します
        fs.writeFile("H:\\groupdocs-cloud-data\\sample-file.png", response, "binary", function (err) { });
        console.log("Expected response type is Stream: " + response.length);
    })
    .catch(function (error) {
        console.log("Error: " + error.message);
    });

高度なオプションを使用して Node.js でオンラインで SVG ファイルを PNG に変換する

高度な設定を使用して SVG 画像を PNG に変換するには、以下の手順に従って実行してください。

  • まず、ConvertApi のインスタンスを作成します。
  • ConvertSettings インスタンスを作成する
  • 次に、クラウドストレージの値を設定します
  • SVG ファイルのパスを入力ファイルとして設定します
  • 形式に「png」を割り当てる
  • PngConvertOptions を定義する
  • グレースケール、品質、rotateAngle、usePdf などのさまざまな変換設定を設定します。
  • 次に、convertOptions と出力ファイルのパスを割り当てます
  • ConvertDocumentRequest の作成
  • 最後に、ConvertApi.convertDocument() メソッドを呼び出して、SVG ドキュメントを PNG 画像に変換します。

次のコード例は、高度な変換オプションを使用して SVG を高解像度の PNG に変換する方法を示しています。

// 詳細オプションを使用して Node.js でオンラインで SVG ファイルを PNG に変換する方法

const convert_options = async () => {
  const convertApi = groupdocs_conversion_cloud.ConvertApi.fromKeys(clientId, clientSecret);

  const settings = new groupdocs_conversion_cloud.ConvertSettings();
  settings.storageName = myStorage;
  settings.filePath = "nodejs-testing/sample-file.svg";
  settings.format = "png";
  
  convertOptions = new groupdocs_conversion_cloud.PngConvertOptions()
  convertOptions.grayscale = true;
  convertOptions.fromPage = 1;
  convertOptions.pagesCount = 1;
  convertOptions.quality = 100;
  convertOptions.rotateAngle = 90;
  convertOptions.usePdf = false;

  settings.convertOptions = convertOptions;
  settings.outputPath = "nodejs-testing/sample-file.png";

  try {
    // 変換ドキュメントリクエストの作成
    const request = new groupdocs_conversion_cloud.ConvertDocumentRequest(settings);
    await convertApi.convertDocument(request);
  }
  catch (err) {
    throw err;
  }
}

convert_options()
.then(() => {
  console.log("Successfully render SVG to PNG format with advanced options.");
})
.catch((err) => {
  console.log("Error occurred while converting the SVG file:", err);
})

無料のSVGからPNGへのオンラインコンバーター

オンラインでSVGをPNGに無料で変換するにはどうすればよいですか?以下の オンライン SVG から PNG への無料コンバーター をお試しください。オンラインでSVGを透明なPNGに変更するための最高のSVGからPNGへのコンバーターであり、上記のAPIを使用して開発されました。

結論

この記事では、次のことを学びました。

  • クラウド上の Nodejs でオンラインで SVG を PNG に変換する方法;
  • 高度なオプションを使用して Nodejs で SVG を透明 PNG に変換する方法;
  • プログラムでファイルをアップロードし、変換されたファイルをクラウドからダウンロードします。
  • SVGからPNGへのオンラインコンバーターは無料です。

GroupDocs.Conversion Cloud API の詳細については、ドキュメント を使用して学習できます。また、ブラウザーを通じて API を直接視覚化し操作できるようにする API リファレンス セクションも提供しています。

質問する

API の使用中に SVG から PNG ファイルへのコンバーターに関するご質問がございましたら、無料の製品サポート フォーラム 経由でお気軽にお問い合わせください。

よくある質問

Node.js を使用して SVG を PNG に変換するにはどうすればよいですか?

このリンク に従って、SVG を PNG に簡単かつ迅速に変換するための Node.js コード スニペットを学習してください。

REST APIを使用してNode.jsでオンラインでSVGからPNGに変更するにはどうすればよいですか?

ConvertApi のインスタンスを作成し、変換設定の値を設定し、ConvertDocumentRequest で convertDocument メソッドを呼び出して、SVG を PNG に変換します。

無料でSVGファイルをPNGに変換できますか?

はい、オンライン SVG ファイルから PNG コンバータを使用して、SVG ファイルを PNG に無料で変換できます。オンライン SVG から PNG コンバーターを使用すると、SVG ファイルを PNG 形式にすばやく変更できます。 SVG から PNG への変換プロセスが完了すると、クラウドから PNG 画像をダウンロードできます。

オンラインでSVGをPNGに無料で変換するにはどうすればよいですか?

  1. 最高の SVG から PNG へのコンバーター ソフトウェア を開きます。
  2. ファイル ドロップ領域内をクリックして SVG ファイルをアップロードするか、SVG ファイルをドラッグ アンド ドロップします。
  3. 「今すぐ変換」ボタンをクリックして、オンラインでSVGを背景が透明なPNGに変換します。
  4. 出力ファイルのダウンロード リンクを使用すると、変換後すぐに SVG を PNG にエクスポートできます。

SVGからPNGへのコンバータライブラリをインストールしてダウンロードするにはどうすればよいですか?

SVG to PNG JavaScript ライブラリ をダウンロードしてインストールし、プログラムで SVG から PNG への高解像度を作成、処理、レンダリングします。

Windows 10 で SVG を PNG に変換するにはどうすればよいですか?

このリンクにアクセスして SVG から PNG コンバーターを無料でダウンロードしてください。この無料の SVG から PNG コンバーターは、Windows でワンクリックで SVG ファイルを PNG 形式に変換します。

関連項目

詳細については、次の関連リンクにアクセスすることをお勧めします。