OpenCV.js GaussianBlur function is not working? - javascript

I'm trying to process image with GaussianBlur.
But I can't make it work. It says:
Uncaught TypeError: fields[fieldName].write is not a function
at Object.toWireType (opencv.js:30)
at Object.GaussianBlur (eval at new_ (opencv.js:30), <anonymous>:9:26)
at Object.proto.<computed> [as GaussianBlur] (opencv.js:30)
at HTMLImageElement.img.onload (pen.js:110)
Here is codepen: https://codepen.io/sundowatch/pen/jOEqrqY?editors=1010
I can't find what is the problem with that.

It works for me, here is a working example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello OpenCV.js</title>
</head>
<body>
<h2>Hello OpenCV.js</h2>
<p id="status">OpenCV.js is loading...</p>
<div>
<div class="inputoutput">
<img id="imageSrc" alt="No Image" />
<div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput" ></canvas>
<div class="caption">canvasOutput</div>
</div>
</div>
<script type="text/javascript">
let imgElement = document.getElementById('imageSrc');
let inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', (e) => {
imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);
imgElement.onload = function() {
let src = cv.imread(imgElement);
let dst = new cv.Mat();
let ksize = new cv.Size(5, 5);
cv.GaussianBlur(src, dst, ksize, 0, 0, cv.BORDER_DEFAULT);
cv.imshow('canvasOutput', dst);
src.delete(); dst.delete();
};
function onOpenCvReady() {
document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
</script>
<script async src="https://docs.opencv.org/master/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
</body>
</html>
Your problem is elsewhere. In developer tools on your snippet if I try to get the cv element I get an error. Can you double check that you are loading opencv.js <script async src="https://docs.opencv.org/master/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>

Related

Adding array result to a string

This is a little script randomizing what picture should it display. I can easily set this to an <img> using document.getElementById("pic").src = randPics[randNumGen], but the background tag requires me to use url(). How can I set document.body.style.background to "url(and the random image here)"? Please no JS libraries.
const randPics = ["https://i.ibb.co/6JBbMYm/pic1.jpg", "https://i.ibb.co/rHjTdfc/pic2.jpg"];
window.onload = choosePicture();
function choosePicture() {
let randNumGen = Math.floor(Math.random() * randPics.length);
console.log(randNumGen);
document.body.style.background = "randPics[randNumGen]";
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script async src="index.js" type="text/javascript"></script>
</head>
<body>
<img width="500px" src="#" alt="pic" id="pic">
</body>
</html>
var url = randPics[randNumGen];
document.body.style.backgroundImage = "url('"+ url + "')";

Adding and Removing Elements (Using Tickers)

I am having a hard time adding another object with tickers. I am trying to get eqn2 (i.e. 3+2=some input) to move down with the response() function. You can see in the response() function that the alert "New Question" is being called onto the screen correctly. The goal here is to have m=2 (it was at 1 before) so that the drop(2) gets called moving eqn2 down. I think the issue is that the ticker doesn't go back far enough to recognize obj[m].x = Math.random()*can.width that obj[m].y = 0.5. I don't know how to get it to work here, and any help would be much appreciated.
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="//code.createjs.com/createjs-2013.09.25.combined.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!----------------------------- Start Game ------------------->
<style>
#gameCanvas {
background-color: lightyellow;
}
</style>
<div class="canvasHolder1">
<div id="eqn1"> 3+3=<input type="text" id="q1j" />
</div>
<div id="eqn2"> 3+2=<input type="text" id="q2j" />
</div>
<button id="myBtn" onclick="response()">New Question</button>
<canvas id="gameCanvas" width="600" height="600">Not supported</canvas>
<script type="text/javascript">
var m=1;
function response(){
alert("New Question");
document.getElementById(`eqn${m}`).remove();
m=m+1;
stage.update();
}
const quest=[];
quest[m]= document.getElementById(`q${m}j`);
quest[m].addEventListener("keyup", function(event) {
if (event.keyCode === 13 ) {
document.getElementById("myBtn").click();
event.preventDefault();
}
});
const values = [];
values[m] = document.getElementById(`q${m}j`);
var stage = new createjs.Stage("gameCanvas");
var obj=[];
obj[m] = new createjs.DOMElement(document.getElementById(`eqn${m}`));
can = document.getElementById("gameCanvas");
obj[m].x = Math.random()*can.width;
obj[m].y = 0.5;
function startGame() {
stage.addChild(obj[m]);
createjs.Ticker.addEventListener("tick", handleTick);
createjs.Ticker.setFPS(1);
function handleTick(event){
drop(m);
stage.update();
}
}
function drop(i){
obj[i].x += 1;
obj[i].y +=3;
}
</script>
<body onload="startGame();">
<div >
<canvas>This browser or document mode doesn't support canvas object.</canvas>
</div>
</body>
</html>
This isn't really a ticker question. You have to redefine the variables you need in the response function before the ticker.
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="//code.createjs.com/createjs-2013.09.25.combined.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!----------------------------- Start Game ------------------->
<style>
#gameCanvas {
background-color: lightyellow;
}
</style>
<div class="canvasHolder1">
<div id="eqn1"> 3+3=<input type="text" id="q1j" />
</div>
<div id="eqn2"> 3+2=<input type="text" id="q2j" />
</div>
<div id="eqn3"> 5+2=<input type="text" id="q3j" />
</div>
<canvas id="gameCanvas" width="600" height="600">Not supported</canvas>
<script type="text/javascript">
var m=1;
var quest=[];
quest[m]= document.getElementById(`q${m}j`);
var values = [];
var stage = new createjs.Stage("gameCanvas");
var obj=[];
can = document.getElementById("gameCanvas");
function response(){
alert("New Question");
document.getElementById(`eqn${m}`).remove();
m=m+1;
quest[m] = document.getElementById(`q${m}j`);
quest[m].addEventListener("keyup", enterFunction);
values[m] = document.getElementById(`q${m}j`);
obj[m] = new createjs.DOMElement(document.getElementById(`eqn${m}`));
obj[m].x = Math.random()*can.width;
obj[m].y = 0.5;
stage.addChild(obj[m]);
}
function startGame() {
quest[m].addEventListener("keyup", enterFunction);
values[m] = document.getElementById(`q${m}j`);
obj[m] = new createjs.DOMElement(document.getElementById(`eqn${m}`));
obj[m].x = Math.random()*can.width;
obj[m].y = 0.5;
stage.addChild(obj[m]);
createjs.Ticker.addEventListener("tick", handleTick);
createjs.Ticker.setFPS(2);
function handleTick(event){
drop(m);
stage.update();
}
}
function drop(i){
obj[i].x += 1;
obj[i].y +=3;
}
function enterFunction(){
if (event.keyCode === 13 ) {
document.getElementById("myBtn").click();
}
}
</script>
<body onload="startGame();">
<div >
<canvas>This browser or document mode doesn't support canvas object.</canvas>
</div>
</body>
<button id="myBtn" onclick="response()">New Question</button>
</html>

Image wont load on canvas. canvas.width error

Hey my image wont load onto the canvas. I've been at this for hours and I cant figure out what it is. I started to debug my code in google chrome and the console says canvas.width is set to null. Thats the only error I can find.
Here is my code:
function gameLoop()
{
drawBackground();
drawPlayer();
}
function drawBackground()
{
var img = new Image();
img.src = "Images/GrassTexture.png";
g.drawImage(img,0, 0, 500, 500);
}
function drawPlayer()
{
var player1 = new Image();
player1.src = "Images/Players/Mignolet.png";
g.drawImage(player1,0, 0,50 , 50);
}
setInterval(gameLoop, 1);
var canvas = document.getElementById("Canvas");
canvas.width = 500;
canvas.height = 500;
var g = canvas.getContext("2d");
html
html>
<head>
<title>Football</title>
<link rel="stylesheet" type="text/css" href="Css/Css.css">
</head>
<body>
<script type="text/javascript" src="Js/Js.js"></script>
<div id="Background">
<div id="Header">
</div>
<div id="Wrapper">
<canvas id="Canvas">
</canvas>
</div>
</div>
</body>
</html>
Css
#Canvas
{
border: 1px solid black;
width:500px;
height:500px;
margin-left: 300px
}
the script is being called before the html is rendered which is why you were getting the error. its always best to place scripts just before the <body> tag ends.
<html>
<head>
<title>Football</title>
<link rel="stylesheet" type="text/css" href="Css/Css.css">
</head>
<body>
<div id="Background">
<div id="Header">
</div>
<div id="Wrapper">
<canvas id="Canvas">
</canvas>
</div>
</div>
<script type="text/javascript" src="Js/Js.js"></script>
</body>

Write script tag to body (or head if possible)

I'm making an image viewer in HTML5 and I want to write a script tag to the body or head but it won't work. Here is an extract from the main script:
function play() {
document.getElementsByClassName("play")[0].setAttribute("class", "play active");
document.getElementsByClassName("pause")[0].setAttribute("class", "pause");
var body = document.body.innerHTML;
body.innerHTML=body + "<script id='playpause' src='res/playpause.js'></script>";
}
Here is the script I'm trying to write:
var slideshow = setInterval("forward();",5000);
function pause() {
document.getElementsByClassName("play")[0].setAttribute("class", "play");
document.getElementsByClassName("pause")[0].setAttribute("class", "pause active");
window.clearInterval(slideshow);
var playpause = document.getElementById("playpause");
playpause.parentNode.removeChild(playpause);
}
And here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Image viewer</title>
<link rel="stylesheet" href="res/style.css" />
<script src="res/script.js"></script>
</head>
<body onload="play()">
<div class="img">
<img title="Hover over me to un-darken" alt="Error displaying image" src="images/1.jpg" id="img" data-number="1" />
</div>
<div title="Backward" class="backward" onclick="backward()"></div>
<div title="Forward" class="forward" onclick="forward()"></div>
<div title="Play" class="play active" onclick="play()"></div>
<div title="Pause" class="pause" onclick="pause()"></div>
<div title="Go to beginning" class="stop" onclick="stop()"></div>
</body>
</html>
Any ideas?
Maybe something like this:
var s = document.createElement('script');
s.setAttribute("type", "text/javascript");
s.setAttribute("src", "res/playpause.js");
var head = document.getElementsByTagName('head')[0];
head.appendChild(s);

JS/jQuery: Help modifying code to replace 4 images

So I have this code (below) that will replace one image. I need this to be modified so it will replace four separate images, and is triggered after a button (image) is clicked.
Can someone help me do this, and also make it so it is triggered after clicking a button (image). Thanks x
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
$(document).ready(function() {
function callback(imageLoader){
$('#image').attr('src', imageLoader.nextImage());
}
function ImageLoader(images){
this.images = images;
this.current = 0;
this.nextImage = function(){
this.current = (this.current+1) % this.images.length;
return this.images[this.current];;
}
}
imageLoader = new ImageLoader(['img/wallpaper/2.png', 'img/wallpaper/3.png', 'img/wallpaper/6.png', 'img/wallpaper/10.png']);
});
</script>
</head>
<body>
<img id="image" src="img/wallpaper/1.png">
</body>
</html>
If it helps here is my Design
It's hard to understand what you're trying to do here, but it does seem like a complicated way to swap out some images? Maybe something more like this would be easier :
$(document).ready(function() {
var images = ['img/wallpaper/2.png',
'img/wallpaper/3.png',
'img/wallpaper/6.png',
'img/wallpaper/10.png'
];
$('#buttonID').on('click', function() {
$('.image').attr('src', function(i, src) {
return images[i];
});
});
});
example HTML:
<body>
<img class="image" src="img/wallpaper/1.png" />
<img class="image" src="img/wallpaper/4.png" />
<img class="image" src="img/wallpaper/7.png" />
<img class="image" src="img/wallpaper/9.png" />
<input type="button" id="buttonID" value="Change images" />
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var imageLoader;
function ImageLoader(images)
{
this.images = images;
this.current = 0;
this.nextImage = function()
{
this.current = (this.current+1) % this.images.length;
return this.images[this.current];
}
}
$(document).ready(function()
{
imageLoader = new ImageLoader(
[
'img/wallpaper/2.png',
'img/wallpaper/3.png',
'img/wallpaper/6.png',
'img/wallpaper/10.png'
]);
$('#change').on('click', function()
{
$('#image').attr('src', imageLoader.nextImage());
});
});
</script>
</head>
<body>
<img id="image" src="img/wallpaper/1.png">
<input type="button" id="change" value="Change" />
</body>
</html>

Categories