Pixel modification on a Video frame in HTML5 canvas - javascript

I am in the process of building an app for my research and I am new to canvas. I am trying to make a video out of a set of images and I need to be able to dynamically change a particular frame. I was successful in making the video but unable to modify a particular frame when I reach it. Below is the code for the same.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Images with intervals</title>
</head>
<body>
<canvas id="myCanvas1" width="400" height="200" style="position:absolute;right:0; margin-right:auto; background-color:#bbb"></canvas>
<canvas id="myCanvas2" width="400" height="200" style="position:absolute;left:0; margin-left:auto; background-color:#666"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas2');
var context = canvas.getContext('2d');
var i = 0;
var im1 = 'images/img1.png';
function drawScreen() {
context.drawImage(im1, 0, 0,50,50);
}
setInterval(function() {
var im = ['images/img1.png', 'images/img2.png', 'images/img3.png', 'images/img4.png', 'images/img5.png'];
// Create the image object
var img = new Image();
//alert(window["i"]);
// If the image is loaded draw it on canvas
img.addEventListener('load', function() {
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img, 0, 0);
});
//alert(window["i"]);
// pass in the image source
img.src = im[i++];
alert(window["i"]);
// if the image is last, change it back to the first
i = i > im.length - 1 ? 0 : i;
//alert(window["i"]);
if(i==3)
{ drawScreen();
//alert(window["i"]);
}
}, 1000);
</script>
</body>
</html>
When the value of i=3(meaning in 3 seconds according to the setInterval function), I am trying to display another image 'im1' as an example, which I am unable to do. I am new with HTML5 and canvas. Any help and suggestions here is deeply appreciated.

Related

How to make a minimap of the whole page in Javascript

I am working on a simple JS/HTML/CSS project. I have a box that's very big (400vw, 400vh) and it acts like a map. What I want to do is a mini-map for that huge thing on the top left corner.
What I understand is that it has to be done with canvas by getting the whole page, put it in canvas and then display it in another box that's just for example 10 times smaller. If my logic is correct, then what is wrong in the code?
<html>
<head>
<script defer src="js/main.js"></script>
<link rel="stylesheet" href="css/main.css">
<style>
#minimapCanvas {
position: absolute;
top: 0;
left: 0;
}
</style>
<script>
window.onload = function() {
// Get the canvas element and its context
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// Draw something on the main canvas
context.fillRect(0, 0, canvas.width, canvas.height);
saveCanvas();
}
function saveCanvas() {
// Get the canvas element and its context
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// Get the image data from the canvas
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
// Create a new canvas for the minimap
var minimapCanvas = document.getElementById("minimapCanvas");
minimapCanvas.width = 100;
minimapCanvas.height = 100;
var minimapContext = minimapCanvas.getContext("2d");
// Draw the image data on the minimap canvas
minimapContext.putImageData(imageData, 0, 0, 0, 0, minimapCanvas.width, minimapCanvas.height);
}
</script>
</head>
<body>
<div class="box">
<canvas id="myCanvas" width="500" height="500"></canvas>
<canvas id="minimapCanvas" width="100" height="100"></canvas>
</div>
</body>
</html>
and after I run the application I get a big black box instead of the minimap -
I have been trying to search every possible topic about JS mini-map in stackoverflow but couldn't find my solution. I also tried Chat GPT (which usually helps me).
EDIT:
Here is a github link to my repository (NOTE: you have to run it with a live server for example in VSCode, in order for the character's image to work properly) -
https://github.com/ApooBG/minimap

Get base64 data of image inside a canvas

I know this question is asked man times but my problem is this. I want to get data of image inside a canvas and get that! But when I change the image resource derived data does not change. In an other words it doesn't matter what image I use in my code. For best understanding my question my code is below.
<!DOCTYPE html>
<html>
<body>
<canvas id="viewport" style="border:1px solid #d3d3d3;"></canvas>
<script>
var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');
make_base();
function make_base()
{
base_image = new Image();
base_image.src = 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';
base_image.onload = function(){
context.drawImage(base_image, 0, 0);
}
}
const base64Canvas = canvas.toDataURL("image/jpeg").split(';base64,')[1];
document.write('<br>');
document.write(base64Canvas);
</script>
</body>
</html>
I the code above it does not matter what picture to use. The base64 data is same or every one. Any help?
you should capture the image after it has been loaded and drawn. this is asynchronous action so:
Update: please use an image locally or from an origin that allows CORS.
<!DOCTYPE html>
<html>
<body>
<canvas id="viewport" style="border:1px solid #d3d3d3;"></canvas>
<script>
var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');
make_base();
function make_base() {
base_image = new Image();
base_image.onload = function() {
context.drawImage(base_image, 0, 0);
const base64Canvas = canvas.toDataURL("image/jpeg").split(';base64,')[1];
console.log(base64Canvas);
}
base_image.crossOrigin = "anonymous"
base_image.src = 'https://picsum.photos/200';
}
</script>
</body>
</html>

How to overlay Canvas with a Canvas dynamically?

i have a canvas dynamically written with no id assigned to it. How can i overlay image on the first canvas (out of multiple canvas) via JS ?
<canvas width="240" height="297">
<canvas id = "image_to_Overlay" width = "800" height = "500"></canvas>
In order to get the 1st canvas of the DOM using plain javascript you can use the good old function document.getElementsByTagName(). Then do what you want with it.
Probably it would be safer matching even on other attributes - such as class name - just to avoid getting the wrong canvas (jquery selectors would work great).
BTW the following should work
<html>
<head>
<script>
var image = new Image();
image.onload = function (){//react on image download completed
//you can get the 1st canvas of the DOM accessing the array of canvas
var canvas = document.getElementsByTagName("canvas")[0];
//then draw on it as needed
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
};
//load image
image.src = "http://i.imgur.com/ITWfejd.png";
</script>
</head>
<body>
<canvas width="240" height="297"></canvas>
<canvas id = "image_to_Overlay" width = "800" height = "500"></canvas>
</body>
</html>

How to set BPG on background

Can I use a BPG image as a <div> or <body> background? background: url('bg.bpg'); doesn't work.
There is a Javascript decoder which allows .bpg images to be displayed in <img> tags, but I want to use one as a <body> background.
The Javascript BPG decoder works by converting the source .bpg file into an ImageData object, which can then be drawn to a canvas. So all you need to do is get the canvas as a PNG data string and set that as the body background image:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BPG background example.</title>
<!-- Decoder script from http://bellard.org/bpg/ -->
<script src="bpgdec8a.js"></script>
<script>
"use strict";
function setBackground(filename)
{
// Create a hidden canvas with the same dimensions as the image.
var canvas = document.createElement("canvas");
canvas.style.visibility = "hidden";
canvas.width = 512;
canvas.height = 512;
document.body.appendChild(canvas);
// Create a drawing context and a BPG decoder.
var ctx = canvas.getContext("2d");
var img = new BPGDecoder(ctx);
// Attempt to load the image.
img.onload = function()
{
// Once the image is ready, draw it to the canvas...
ctx.putImageData(this.imageData, 0, 0);
// ...and copy the canvas to the body background.
document.body.style.background = "url('" + canvas.toDataURL("image/png") + "')";
};
img.load(filename);
}
</script>
</head>
<body onload="setBackground('lena512color.bpg');">
<p>Hello, World!</p>
</body>
</html>

Can you load an img tag's src inside javascript file and then draw it to the canvas?

index.html
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>DCView</title>
<script type="text/javascript" src="dcview.js"></script>
</head>
<body>
<div style="float:center; text-align:center;">
<canvas id="dcviewCanvas" width="1024" height="1024"/>
<img id="bgImage" src="" hidden="true"/>
</div>
</body>
</html>
dcview.js
var backgroundImage,
backgroundImageSrc,
canvas,
context;
window.onload = function()
{
//Initially set the background image source to DCView.png
backgroundImageSrc = "Foundation\\WebService\\Downloads\\DCView.png";
//Load the background image with the given source
loadBackgroundImage(backgroundImageSrc);
}
function loadBackgroundImage(imageSrc)
{
canvas = document.getElementById("dcviewCanvas");
context = canvas.getContext("2d");
backgroundImage = document.getElementById("bgImage");
backgroundImage.src = imageSrc;
context.drawImage(backgroundImage, 0, 0);
}
When I try to load index.html in chrome it doesn't load the background image. But when I hard-code the src of the img tag in to that path, it proceeds to load it in.
The only error chrome gives me is:
Uncaught SyntaxError: Unexpected token .
It points this error to line 47 in dcview.js.
Is the way I am going about this completely wrong? I am a beginner with HTML and Javascript.
Thanks,
Virat
UPDATED
dcview.js
window.onload = function()
{
//Initially set the background image source to DCView.png
backgroundImageSrc = 'Foundation/WebService/Downloads/Layout_Basement.png';
//Load the background image which is initially set to DCView.png
loadBackgroundImage(backgroundImageSrc);
//Load the other various pin images;
loadPinImages();
}
function loadBackgroundImage(imageSrc)
{
context = document.getElementById('dcviewCanvas').getContext('2d');
backgroundImage = new Image();
backgroundImage.src = imageSrc;
backgroundImage.onload = function(){
context.drawImage(backgroundImage, 0, 0);
};
}
UPDATED
Once I have loaded the background image, other images I draw on top are being drawn underneath the background image. Ideas?
window.onload = function()
{
//Initially set the background image source to DCView.png
backgroundImageSrc = 'Foundation/WebService/Downloads/Layout_Basement.png';
//Load the background image which is initially set to DCView.png
loadBackgroundImage(backgroundImageSrc);
canvas = document.getElementById('dcviewCanvas');
context = canvas.getContext('2d');
context.drawImage(sortationLanePinBlue, 0, 0);
}
You can use the Javascript Image class to draw to a canvas. See this article on MDN.

Categories