Jak złączyć kilka obrazów w jeden za pomocą javascripta lub jquery?

pytanie zadane 28 czerwca 2020 w JavaScript przez SCpl Użytkownik (590 p.)
edycja 29 czerwca 2020 przez SCpl

Ja potrzebuję to do innego kodu, ale żeby było prościej daje ten:

<html lang="pl">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	</head>
	<body>
		<canvas style="position: absolute" id="bg-canvas" width="512" height="288"></canvas>
		<canvas style="position: absolute" id="fg-canvas" width="512" height="288"></canvas>
        <img id="image">

		<script src="script.js"></script>
	</body>
</html>

window.onload = start();

function start() {
	[...]
    var finishImage = [...];
    [...]
    document.getElementById("image").src = finishImage; 
}

I zakładamy, że funkcja start ma połączone obrazy wyświetlić pod płótnami. Z łączeniem obrazów chodzi mi o to, żeby tam gdzie na fg-canvas są przezroczyste piksele było widać piksele, które były w tym samym miejscu na bg-canvas. Serdecznie pozdrawiam. :D

Z powodu nieścisłości dam pewien przykład zastosowania takiego mechanizmu. Załóżmy, że chciałbym zrobić painta w przeglądarce z warstwami obrazu, a potem dać możliwość pobrania pliku w formacie png ze złączonymi warstwami. Czyli jak mamy dwie warstwy to w miejscach, gdzie są przezroczyste na wyższej warstwie widać piksele, które są na tej niższej.

komentarz 29 czerwca 2020 przez VBService Ekspert (256,660 p.)

Czy Tobie nie chodzi o blend two images on a javascript canvas ?

Canvas blend two images javascript

komentarz 29 czerwca 2020 przez SCpl Użytkownik (590 p.)

No chodzi, żeby na złączonym obrazie były widoczne wszystkie piksele fg-canvas i wszystkie piksele bg-canvas, które są na tej samej pozycji co przezroczyste piksele fg-canvas.

komentarz 29 czerwca 2020 przez SCpl Użytkownik (590 p.)
edycja 29 czerwca 2020 przez SCpl

Na złączonym*. I on ma właśnie powstać z dwóch innych, które są na płótnach. Przykładowo chciałbym zrobić painta w przeglądarce z warstwami obrazu, a potem dać możliwość pobrania pliku w formacie png ze złączonymi warstwami.