CamanJS image manipulation, strange error - javascript

i'm using CamanJS to do some images manipulation with javascript, and I have two similar really simple scripts, the first works well, the second not (and this is the script i need working).
This is the first working:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CamanJS Testing Playground</title>
<script type="text/javascript" src="caman.full.min.js"></script>
</head>
<body>
<button onclick="filtraPhoto();">MODIFICA</button><br />
<img id="smallImage" />
<script>
var immagine;
var smallImage = document.getElementById('smallImage');
smallImage.src = "test1_600.jpg";
immagine = Caman("#smallImage", function () {});
function filtraPhoto() {
immagine.brightness(10).contrast(500).render(function () {
alert("Done!");
});
}
</script>
</body>
</html>
This is the second not working, it return in firebug the error: TypeError: this.c.pixelData is undefined
<!DOCTYPE html>
<html lang="en">
<head>
<title>CamanJS Testing Playground</title>
<script type="text/javascript" src="caman.full.min.js"></script>
<script>
var immagine;
function carica()
{
var smallImage = document.getElementById('smallImage');
smallImage.src = "test1_600.jpg";
immagine = Caman("#smallImage", function () {});
}
function filtraPhoto() {
immagine.brightness(10).contrast(500).render(function () {
alert("Done!");
});
}
</script>
</head>
<body>
<button onclick="carica();">carica immagine</button><br />
<button onclick="filtraPhoto();">MODIFICA</button><br />
<img id="smallImage" />
</body>
</html>
Any help please?

It runs just fine in both Firefox and Chrome for me. In my limited experience, this.c.pixelData typically comes when your conversion to a CamanInstance was not successfully created.
This can be because of many things, but one that isn't expected is that CamanJS won't let you use the same html identifier (class or id) for more than one object, even if you've swapped them out. So if you're running the two scripts above on the same page, it will cause errors.
Sorry, without being able to reproduce your error, it's hard to help more than that.

Related

I'm trying this example of sessionStorage from an HTML5 tutorial but it is not working and nothing is changing in the 'rightbox' section

The 'rightbox' section must show the key and value entered in the form after they were stored using sessionStorage.
I tried Chrome, Firefox, Edge, and Opera browsers. The code didn't work on any of them.
Here is the code:
function doFirst() {
var button = document.getElementById('button');
button.addEventListener('click', saveStuff, false);
}
function saveStuff() {
var one = getElementById('one').value;
var two = getElementById('two').value;
sessionStorage.setItem(one, two);
display(one);
}
function display(one) {
var rightbox = document.getElementById('rightbox');
var thedata = sessionStorage.getItem(one);
rightbox.innerHTML = 'Name of variable: ' + one + '<br />Value: ' + thedata;
}
window.addEventListener('load', doFirst, false);
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<section id="leftbox">
<form>
<p>(key) One: <input type="text" id="one"></p>
<p>(value) Two: <textarea id="two"></textarea></p>
<p><input type="button" id="button" value="Save"></p>
</form>
</section>
<section id="rightbox">
Nothing yet!
</section>
</body>
</html>
The following block from your code:
function saveStuff() {
var one = getElementById('one').value;
var two = getElementById('two').value;
console.log(one, two);
sessionStorage.setItem(one, two);
display(one);
}
You need to use document.getElementById() instead of just getElementById. That will solve your issue.
Furthemore, you have used document.getElementById() properly in your first function, so make sure to check for errors in the browser console next time before posting a question. That will help you in long run.
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

Calling .jSignature() on div doesn't update the div

I got this code from the GitHub:
<script src="path/to/jSignature.min.js"></script>
<script>
$(document).ready(function() {
$("#signature").jSignature()
})
</script>
<div id="signature"></div>
But it doesn't pull anything up on the actual webpage. I would think there is more code required but I don't know where to start.
Here is a minimal working example
<!DOCTYPE html>
<html lang="en">
<head>
<lang>
<title>Minimal working jSignature Example</title>
<meta charset="UTF-8">
<!-- Files from the origin -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://willowsystems.github.io/jSignature/js/libs/jSignature.min.js"></script>
<head>
<script>
$(document).ready(function() {
// Initialize jSignature
$("#signature").jSignature();
})
// ripped from the description at their the Github page
function getBase64Sig(){
// get the element where the signature have been put
var $sigdiv = $("#signature");
// get a base64 URL for a SVG picture
var data = $sigdiv.jSignature("getData", "svgbase64");
// build the image...
var i = new Image();
i.src = "data:" + data[0] + "," + data[1];
// and put it somewhere where the sun shines brightly upon it.
$(i).appendTo($("#output"));
}
</script>
<body>
Put your signature here:
<div id="signature"></div>
<button onclick="getBase64Sig()">Get Base64</button>
<div id="output"></div>
</body>
</html>
I hope you can go on from here.
It is really as simple as they describe it to be, only their description of the actual example is a bit lacking for beginners.

"TypeError: Math.Floor is not a function at load (<anonymous>:4:17) at HTMLButtonElement.onclick

I am working on the base for a simple Russian roulette simulator. Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RR</title>
</head>
<body>
<button onclick=load()>Load</button>
<button onclick=fire()>trigger</button>
<script>
var slot=0;
var load=function(){
slot=Math.Floor(Math.random()*6+1);
};
var fire=function(){
slot=slot-1;
if(slot===0){
confirm("BANG!!");
}else{
if(slot<0){
confirm("There is no bullet in this gun.");
}
}
};
</script>
</body>
</html>
When I click load I get the error in the title. I know Math.Floor is a function because I've used it before and I looked it up. Did I mess something up in the code? Thanks.
Change...
slot=Math.Floor(Math.random()*6+1);
to...
slot=Math.floor(Math.random()*6+1);
As Roland and Sterling pointed out, the floor function starts with a lower case f letter.

What can't I get this random quote generator to work?

I've been trying to make a "Random Quote Machine" that randomly selects a quote from an array of 5 quotes and inserts the text into a paragraph on a webpage. The Machine uses HTML and JavaScript(jQuery). I suspect my error is pretty simple given how simple the project is.
Here's the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Random Quote Machine</title>
<script src="jquery.min.js"></script>
<script src="quotes.js"></script>
</head>
<body>
<h1>Mason Cooley Quotes</h1>
<div>
<p id="quote"></p>
</div>
<button id="quoteGen">Generate A Random Quote</button>
</body>
</html>
Here's the JavaScript:
var quotes = ["Innocence is thought charming because it offers delightful possibilities for exploitation.",
"Every day begins with an act of courage and hope: getting out of bed.",
"Hatred observes with more care than love does.",
"To understand someone, find out how he spends his money.",
"The educated do not share a common body of information, but a common state of mind."
];
function getQuote() {
return Math.floor(Math.random() * quotes.length);
}
$('#quoteGen').click(function() {
$('#quote').text(quotes[getQuote()]);
});
Because your scripts are included in the head element, the quoteGen button doesn't exist in the DOM at the time that you try to bind an event handler to it. You need to either include the scripts just before the end of your body tag, or wrap your code in a DOM-ready event handler to ensure that the DOM exists as you expect it to when your code runs.
So, you could either go with this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Random Quote Machine</title>
</head>
<body>
<h1>Mason Cooley Quotes</h1>
<div>
<p id="quote"></p>
</div>
<button id="quoteGen">Generate A Random Quote</button>
<script src="jquery.min.js"></script>
<script src="quotes.js"></script>
</body>
</html>
... or, use a DOM-ready handler, such as this:
$(function () {
$('#quoteGen').click(function() {
$('#quote').text(quotes[getQuote()]);
});
});
Works just fine?
http://jsfiddle.net/tj3dvz1m/.
make sure to run your code in a
$( document ).ready(function() {
Your code here.
});
The handler is being set before the #quoteGen dom node exists.
You need to move the inclusion of quotes.js to the end of your file, right before the closing of /BODY.
Or register the handler to be installed once the document is ready:
$(document).ready(function(){
$('#quoteGen').click(function() {
$('#quote').text(quotes[getQuote()]);
});
});
This code works fine. Credit to owner.
// Random Quotes
var Quotation=new Array()
Quotation[0] = "Time is of the essence! Comb your hair.";
Quotation[1] = "Sanity is a golden apple with no shoelaces.";
Quotation[2] = "Repent! The end is coming, $9.95 at Amazon.";
Quotation[3] = "Honesty blurts where deception sneezes.";
Quotation[4] = "Pastry satisfies where art is unavailable.";
Quotation[5] = "Delete not, lest you, too, be deleted.";
Quotation[6] = "O! Youth! What a pain in the backside.";
Quotation[7] = "Wishes are like goldfish with propellors.";
Quotation[8] = "Love the river's \"beauty\", but live on a hill.";
Quotation[9] = "Invention is the mother of too many useless toys.";
var Q = Quotation.length;
var whichQuotation=Math.round(Math.random()*(Q-1));
function showQuotation()
{document.write(Quotation[whichQuotation]);}
showQuotation();

cannot change content of div - Uncaught TypeError: Cannot set property 'innerHTML' of null

I would like to change the contents of a div, using javascript and innerHTML.
I cannot get it to work. I just added the code for changing the div, before that the code was working fine. I double checked the syntax.
I'm using webshims, openlayers and jquery/javascript
In the in the console I see
Uncaught TypeError: Cannot set property 'innerHTML' of null
imagegaledit - myFile.php :768
so.onmessage - myFile.php :324
768 is that line
document.getElementById("imgedtitle").innerHTML=mnmi[0];
and 324 is this
imagegaledit(0);
Little help?
Thanks
edit
websockets work and responce fine
Here is the code (concise and simplified)
<!doctype html>
<header>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html">
<script src="jquery-1.8.2.min.js"></script>
<script src="js-webshim/minified/extras/modernizr-custom.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script>
<script>
$.webshims.polyfill();
</script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!--open layers api library-->
<script type='text/javascript' src='OpenLayers.js'></script>
<script type='text/javascript'>
//openlayers vars and stuff here...
function init(){
//when a point on map clicked...
function selected_feature(event){
//some openlayers magic...
var so = new WebSocket("ws://localhost:8000");
so.onerror=function (evt)
{response.textContent = evt;}
so.onopen = function(){
response.textContent = "opened";
so.send(JSON.stringify({command:'map',fmid:jas}));
}
so.onmessage = function (evt) {
var received_msg = evt.data;
var packet = JSON.parse(received_msg);
//pass data to var and arrays...
imagegaledit(0);
}
}//closes function selected_feature
}//closes init
function imagegaledit (w){
if (w==0){
document.getElementById("imgedtitle").innerHTML=mnmi[0];
}
}//closes imagegaledit
</script>
<body onload='init();'>
Title</br><div id="imgedtitle"> </div> </br>
</body>
You need a closing script tag:
</script>
<body>

Categories

Resources