As a newcomer to Frontend Development, I have been struggling with a particular problem for the past two days. I am attempting to embed an image from an external source into an HTML page that I am building. Whether it is done through CSS as a background image or directly via HTML doesn't matter to me.
The source I am working with is within my control—a Github-Pages site that displays map snippets of a game at specific coordinates specified by parameters in the URL.
I create the image using a Canvas and have tried converting this Canvas to a PNG to display on the website's body. Unfortunately, no matter what I try, I cannot get it to display correctly with the necessary link.
Essentially, I need to be able to embed a link like this: githubpagessite.com?x=500&y=-500 in my code so that the displayed map position changes based on these parameters. The challenge lies in needing the parameters within the URL rather than having a direct link that redirects to the source as githubpagessite.com/....png.
I prefer resolving this issue using JS/HTML/CSS or jQuery exclusively. I have explored AJAX as a potential solution but haven't been successful in implementing it.
In further detail, my Github Pages site consists mainly of the following script (excluding unnecessary parts, focusing on image creation using canvas):
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const x = urlParams.get('x') //X coordinate retrieved from link
const y = urlParams.get('y') //Y coordinate retrieved from link
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//images gets loaded etc.
ctx.drawImage(images[0], coordinateXPosition, coordinateYPosition, snippedWidth, snippedHeight, 0, 0, snippedWidth, snippedHeight);
//Image of the map gets drawn at the specific coordinate with a specific height.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script src="script.js"></script>
</body>
</html>
My goal is to utilize the querylink style mentioned above to embed two pictures with different coordinates on another site. However, the challenge arises because the request link does not lead to any PNG or JPG resource—this resource is only generated when the request link is sent and is temporary.
I aim to find a way to retrieve the dynamically created picture from the website. Initially, I considered using toDataURL() to transform the Canvas into a single image:
img src="data:image/png;base64,iVBORw0KGgoAAAANSUh....>Hopefully, this clarification sheds light on the problem I am facing and will guide towards finding a suitable solution.