如何在 Node Jimp 中將一個影像疊加到另一個影像上？

該 `composite()` 方法將影像疊加到另一個 Jimp 影像上的指定 x、y 座標處。影像將放置在指定的座標位置。

語法

composite( src, x, y, [{ mode, opacitySource, opacityDest }] );

composite() 引數定義

  • src – src 定義了該影像所在檔案的源位置。它可以是本地位置或遠端位置。

  • x, y – 表示放置檔案位置的座標。

  • mode – 你可以在這裡為影像定義模式。例如，`Jimp.BLEND_SOURCE_OVER` – 此模式將嘗試將新影像混合到舊影像中。

  • opacityDest – 這將定義目標影像的不透明度，即放置新影像的影像的不透明度。

  • opacitySource – 這將定義源影像的不透明度，即新影像的不透明度。

輸入影像

疊加影像

使用 Node JIMP – GREYSCALE()

在繼續使用 greyscale() 函式之前，請檢查以下語句是否已執行以設定環境。

  • npm init -y // 初始化 Node 環境

  • npm install jimp --save // 安裝 jimp 依賴項

  • 建立一個名為 imageOverlay.js 的檔案，並將以下程式碼片段複製貼上到其中。

  • 使用 node imageOverlay.js 執行程式碼。

注意 – 方法名稱應與 JS 檔名匹配。只有這樣才能呼叫所需的方法。

示例

const Jimp = require('jimp') ;

async function imageOverlay(imageOverlay) { // Function name is same as of file
name
// Reading watermark Image
   let watermark = await Jimp.read(imageOverlay);
   watermark = watermark.resize(150,150); // Resizing watermark image
// Reading original image
   const image = await Jimp.read('/home/jimp/tutorials_point_img.jpg');
   watermark = await watermark
   image.composite(watermark, 0, 0, {
      mode: Jimp.BLEND_SOURCE_OVER,
      opacityDest: 1,
      opacitySource: 0.5
   })
   await image.writeAsync('/home/jimp/newImage.png');
}

// Calling this function using async
imageOverlay('/home/jimp/overlay_image.png');
console.log("Image is processed successfully");

輸出

更新於：2021年4月27日

2K+ 次瀏覽

啟動你的 職業生涯

完成課程獲得認證

開始學習
廣告