Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptを使用して複数の画像を1つの画像に結合する


以下は、JavaScriptを使用して複数の画像を1つの画像に結合するためのコードです-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
</style>
</head>
<body>
<h1>Combining multiple images into a single one</h1>
<img class="image" src="https://i.picsum.photos/id/845/250/250.jpg?hmac=2l7QArh4UKul2qF-JvTjaBu3-WF2KpKBgpBALmFoxWY"/>
<img class="image" src="https://i.picsum.photos/id/925/250/250.jpg?hmac=twWJdaKT46cPk1aNvB7aKdiLZoQ zvzu5VW85OEUO4ys"/>
<canvas class="result"></canvas>
<br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to combine the two images above together</h3>
<script>
   let imgEle1 = document.querySelectorAll(".image")[0];
   let imgEle2 = document.querySelectorAll(".image")[1];
   let resEle = document.querySelector(".result");
   var context = resEle.getContext("2d");
   let BtnEle = document.querySelector(".Btn");
   BtnEle.addEventListener("click", () => {
   resEle.width = imgEle1.width;
      resEle.height = imgEle1.height;
      context.globalAlpha = 1.0;
      context.drawImage(imgEle1, 0, 0);
      context.globalAlpha = 0.5;
      context.drawImage(imgEle2, 0, 0);
   });
</script>
</body>
</html>

出力

JavaScriptを使用して複数の画像を1つの画像に結合する

[ここをクリック]ボタンをクリックすると-

JavaScriptを使用して複数の画像を1つの画像に結合する


  1. 複数のWord文書を1つにマージする方法

    Microsoft Wordは、主にあらゆる種類のビジネスのドキュメントを作成、編集、および保存するために使用される一般的なワードプロセッシングツールです。ファイルだけを作成する以外に、Microsoft Wordを使用する最も重要な利点の1つは、複数のレビュー担当者からのドキュメントのフィードバックを簡単に分析し、レビュー用に送信された複数のドキュメントを1つにまとめることで書き直すことができることです。 複数のWord文書を1つにまとめるのはなぜですか? 迅速なレビュー、フィードバック、提案のために、ドキュメントを編集者やチームメンバーに送信しなければならない場合があります。レビュー後、

  2. Pandas(Matplotlib)を使用して、複数の時系列DataFrameを1つのプロットにプロットします。

    パンダを使用して複数の時系列データフレームを単一のプロットにプロットするには、次の手順を実行できます- 図のサイズを設定し、サブプロット間およびサブプロットの周囲のパディングを調整します。 時系列を使用してPandasデータフレームを作成します。 プロットの時系列インデックスを設定します。 プロットにルピーとドルをプロットします。 図を表示するには、 show()を使用します メソッド。 例 import numpy as np import pandas as pd from matplotlib import pyplot as plt, dates plt.rcParams[&qu