HTML
<img id="myImg"src="slide/2.jpg" name="img" width="1000" height="250"/>
JS
var image1 = new Image();
image1.src = "slide/23.jpg";
var image2 = new Image();
image2.src = "slide/7.jpg";
var image3 = new Image();
image3.src = "slide/4.jpg";
var image4 = new Image();
image4.src = "slide/5.jpg";
var image5 = new Image();
image5.src = "slide/6.jpg";
var step = 1;
function slideImages() {
if (!document.images) {
return
document.images.img.src = eval("image" + step + ".src");
}
if (step < 5) {
step++;
} else {
step = 1;
setTimeout("slideImages()", 3000);
}
}
slideImages();
This line will never execute.
setTimeout("slideImages()", 3000);
Because you are calling the slideImages function only once with step = 1 and hence it will not go through the else case.
Try this.
var image1 = new Image();
image1.src = "slide/23.jpg";
var image2 = new Image();
image2.src = "slide/7.jpg";
var image3 = new Image();
image3.src = "slide/4.jpg";
var image4 = new Image();
image4.src = "slide/5.jpg";
var image5 = new Image();
image5.src = "slide/6.jpg";
var step = 1;
function slideImages() {
console.log('here' + step);
if (!document.images) {
return
}
document.images.img.src = eval("image" + step + ".src");
if (step < 5) {
step++;
} else {
step = 1;
}
setTimeout(slideImages, 3000);
}
slideImages();
Related
I have seen people use this method for SVG-based NFTs:
function p5jsToImageURI(){
string memory baseURL = "data:image/svg+xml;base64,PUT-BASE64-HERE"
}
But, since I don't want to generate a fixed image how can I use my p5js script (that looks slightly different each time the js code runs)? Is there a way to just somehow pass the seed to my script and the script with the seed passed to it is stored on-chain?
var img,inpt,div
function convertImgToDataURLviaCanvas(url, callback, outputFormat){
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function(){
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var dataURL;
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
canvas = null;
};
img.src = url;
}
function convertFileToDataURLviaFileReader(url, callback){
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function () {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.send();
}
function img2b64(imagefile){
var imageUrl = imagefile;
var convertType = 'Canvas';
var convertFunction = convertType === 'FileReader' ? convertFileToDataURLviaFileReader : convertImgToDataURLviaCanvas;
convertFunction(imageUrl, function(base64Img){
code='foto = "'+base64Img+'";'
inpt.value(code)
div.html('<img src="'+base64Img+'">');
});
}
function setup() {
but = createButton("CONVERT");
but.mousePressed(function () {
img2b64('nature100b.jpg');
});
inpt = createP('');
inpt = createElement("textarea",'');
inpt.elt.rows = 5;
inpt.elt.cols = 50;
div = createDiv('');
}
Try this
https://editor.p5js.org/josepssv/full/wsCZnJqkA
If I have an array:
var imgArray = New Array();
imgArray[0] = "example_A"
imgArray[1] = "example_B"
imgArray[2] = "example_C"
imgArray[3] = "example_D"
...
imgArray[n] = "example_n"
and my javascript sheet is:
var imgArray = New Array();
imgArray[0] = "example_A"
imgArray[1] = "example_B"
imgArray[2] = "example_C"
imgArray[3] = "example_D"
...
imgArray[n] = "example_n"
var linkArray = New Array();
linkArray[0] = "example_A"
linkArray[1] = "example_B"
linkArray[2] = "example_C"
linkArray[3] = "example_D"
...
linkArray[n] = "example_n"
function diceCast(){return Math.floor(Math.random()*n+1);};
function showImage(){
var imgNum = diceCast();
var objImg = document.getElementById("mainImg");
objImg.src = imgArray[imgNum];
objImg.onclick = ()=>window.open(linkArray[imgNum], '_blank');
}
How can I make array number '[n]' automatically?
you have to change diceCast to include the imgArray.length instead of using n
var imgArray = [
'https://dummyimage.com/100x100/000/f00',
'https://dummyimage.com/100x100/f00/000'
]
var linkArray = [
'https://example.com',
'https://google.com'
]
const diceCast = () => Math.floor(Math.random() * imgArray.length)
function showImage(){
var imgIndex = diceCast()
var objImg = document.getElementById("mainImg")
objImg.src = imgArray[imgIndex]
objImg.onclick = () => {
console.log('opening', linkArray[imgIndex])
window.open(linkArray[imgIndex], '_blank')
}
}
showImage()
<img id=mainImg>
I believe that you can achieve the desired effect through the following code snippet:
function getArray(n){
var arr = new Array();
for (var i = 0; i < n; i++) {
arr.push("example_" + String.fromCharCode(65 + i)); // Start from 'A'
}
return arr;
}
console.log("Array: %o", getArray(10));
EDIT:
In case n exceeds the alphabet/printable chars you may prepend as HEX e.g.
arr.push("example_" + (10 + i).toString(16));
Basically I have two images that i need to display at the same time(and more later).
var Canvas = function(canvasEl, width, height){
this.el= canvasEl;
this.el.width = width;
this.el.height = height;
this.ctx = canvasEl.getContext("2d");
}
var canvas = new Canvas(document.querySelector("#mycanvas"), 1100, 650);
var add = new Image();
add.onload = function() {
canvas.ctx.drawImage(this, 500,-215);
};
add.src="add.png";
var currentdate = new Date();
var datetime = currentdate.getHours();
if(datetime==1||datetime==13){
var clock1 = new Image();
add.onload = function() {
canvas.ctx.drawImage(this, 0,0);
};
add.src="clock/clock1.png";
}
else if(datetime==2||datetime==14){
var clock2 = new Image();
add.onload = function() {
canvas.ctx.drawImage(this, 0,0);
};
add.src="clock/clock2.png";
}
else if(datetime==3||datetime==15){
var clock3 = new Image();
add.onload = function() {
canvas.ctx.drawImage(this, 0,0);
};
add.src="clock/clock3.png";
}
else if(datetime==4||datetime==16){
var clock4 = new Image();
add.onload = function() {
canvas.ctx.drawImage(this, 0,0);
};
add.src="clock/clock4.png";
}
else if(datetime==5||datetime==17){
var clock5 = new Image();
add.onload = function() {
canvas.ctx.drawImage(this, 0,0);
};
add.src="clock/clock5.png";
}
else if(datetime==6||datetime==18){
var clock6 = new Image();
add.onload = function() {
canvas.ctx.drawImage(this, 0,0);
};
add.src="clock/clock6.png";
}
else if(datetime==7||datetime==19){
var clock7 = new Image();
add.onload = function() {
canvas.ctx.drawImage(this, 0,0);
};
add.src="clock/clock7.png";
}
else if(datetime==8||datetime==20){
var clock8 = new Image();
add.onload = function() {
canvas.ctx.drawImage(this, 0,0);
};
add.src="clock/clock8.png";
}
else if(datetime==9||datetime==21){
var clock9 = new Image();
add.onload = function() {
canvas.ctx.drawImage(this, 0,0);
};
add.src="clock/clock9.png";
}
else if(datetime==10||datetime==22){
var clock10 = new Image();
add.onload = function() {
canvas.ctx.drawImage(this, 600,100);
};
add.src="clock/clock10.png";
}
else if(datetime==11||datetime==23){
var clock11 = new Image();
add.onload = function() {
canvas.ctx.drawImage(this, 0,0);
};
add.src="clock/clock11.png";
}
else if(datetime==12||datetime==0){
var clock12 = new Image();
add.onload = function() {
canvas.ctx.drawImage(this, 0,0);
};
add.src="clock/clock12.png";
}
</script>
</body>
I have that currently and all it is supposed to do is have one image named "add.png" and another (based on the time) called "clock.png" to display at the same time in different locations on the canvas. The code works but it only shows the clock.
You need a separate .onload for each image--not just 1 add.onload
// not always add.onload ...
add.onload ... add.src="add.png";
clock1.onload ... clock1.src="clock/clock1.png";
clock2.onload ... clock2.src="clock/clock2.png";
// same for clock3-12
Keep in mind that images are loaded asynchronously, so the load order of your images is not guaranteed to be the same as your code. That may or may not be a problem depending on how the images fit together.
Here's an example of an image loader that guarantees all images are loaded and that the images are all in your specified order:
// image loader
var imageURLs=[];
var imagesOK=0;
var imgs=[];
imageURLs.push("add.png");
imageURLs.push("clock/clock1.png");
imageURLs.push("clock/clock2.png");
imageURLs.push("clock/clock3.png");
imageURLs.push("clock/clock4.png");
imageURLs.push("clock/clock5.png");
imageURLs.push("clock/clock6.png");
imageURLs.push("clock/clock7.png");
imageURLs.push("clock/clock8.png");
imageURLs.push("clock/clock9.png");
imageURLs.push("clock/clock10.png");
imageURLs.push("clock/clock11.png");
imageURLs.push("clock/clock12.png");
loadAllImages(start);
function loadAllImages(callback){
for (var i=0; i<imageURLs.length; i++) {
var img = new Image();
imgs.push(img);
img.onload = function(){
imagesOK++;
if (imagesOK>=imageURLs.length ) {
callback();
}
};
img.onerror=function(){alert("image load failed");}
img.crossOrigin="anonymous";
img.src = imageURLs[i];
}
}
function start(){
// the imgs[] array holds your fully loaded images
// the imgs[] are in the same order as imageURLs[]
}
I have found a question regarding the images
How to detect if the image path is broken?
I have tried the following codes
var image = new Image;
image.src = "http://project" + path + '.png';
image.onload = function(){
var imageWidth = this.width + this.height;
if(imageWidth==0){
image.src = "http://project2" + path + '.png';
//the project2 path could be broken too and
//I want to use project3 or project4 as the
//path and keep testing it, but there is no way to do it from here.
}
}
Would it be possible to do a recursive test here? Thanks a lot!
You could try this setup:
var paths = ["/img1", "/img2", "/img3"];
var beginning = "http://project";
var ending = ".png";
function getImage(images, prefix, suffix, callback) {
var iterator = function (i) {
if (i < images.length) {
var image = new Image();
image.onload = function () {
var imageWidth = this.width + this.height;
if (imageWidth === 0) {
console.log("onload problem");
iterator(++i);
} else {
console.log("onload good");
callback(i, image);
}
};
image.onerror = function () {
console.log("onerror");
iterator(++i);
};
image.src = prefix + images[i] + suffix;
}
};
iterator(0);
}
getImage(paths, beginning, ending, function (index, img) {
console.log("Callback: ", index, ", ", img);
});
DEMO: http://jsfiddle.net/2mRMr/2/
Broken images would call onerror, not onload.
image.onerror = function () {
console.log("broken");
callToTryNewSrc();
}
Basic recursive check
function getImage(path, callback) {
//if numeric
var ind = 1;
var maxServer = 5;
//if named differently
//var ind = 0;
//var servers = ["//foo1","//foo2","//bar1"];
//var maxServer = servers.length-1;
function test() {
var img = new Image();
img.onload = function () {
if (callback) {
callback(img);
}
}
img.onerror = function () {
if (ind <= maxServer) {
test();
} else {
if (callback) {
callback(img);
}
}
}
var currentPath = "http://project" + ind + path + '.png';
//var currentPath = servers[ind] + path + '.png';
img.src = currentPath;
ind++;
}
test();
}
//calling it
getImage("/foo", function (img) {
console.log(img);
});
The code below allows the user to hover over 1 object and it not only replaces the object but also shows an additional object between the buttons.
It works great in Firefox, but does not in Internet Explorer.
HELP
webpage:
http://www.isp.ucar.edu/
Thx,
Terri
if ( < document.images) {
img1on = new Image();
img1on.src = "images/buttons/button-beachon-on.gif";
img1off = new Image();
img1off.src = "images/buttons/button-beachon.gif";
img2on = new Image();
img2on.src = "images/buttons/button-bgs-on.gif";
img2off = new Image();
img2off.src = "images/buttons/button-bgs.gif";
img3on = new Image();
img3on.src = "images/buttons/button-iam-on.gif";
img3off = new Image();
img3off.src = "images/buttons/button-iam.gif";
img4on = new Image();
img4on.src = "images/buttons/button-nvia-on.gif";
img4off = new Image();
img4off.src = "images/buttons/button-nvia.gif";
img5on = new Image();
img5on.src = "images/buttons/button-utls-on.gif";
img5off = new Image();
img5off.src = "images/buttons/button-utls.gif";
img6on = new Image();
img6on.src = "images/buttons/button-water-on.gif";
img6off = new Image();
img6off.src = "images/buttons/button-water.gif";
img7on = new Image();
img7on.src = "images/buttons/button-exploratory-on.gif";
img7off = new Image();
img7off.src = "images/buttons/button-exploratory.gif";
// second image that does not appear in original button space
img1ad = new Image();
img1ad.src = "images/buttons/beachon-overview-sm.gif";
img2ad = new Image();
img2ad.src = "images/buttons/bgs-overview-sm.gif";
img3ad = new Image();
img3ad.src = "images/buttons/iam-overview-sm.gif";
img4ad = new Image();
img4ad.src = "images/buttons/nvia-overview-sm.gif";
img5ad = new Image();
img5ad.src = "images/buttons/utls-overview-sm.gif";
img6ad = new Image();
img6ad.src = "images/buttons/water-overview-sm.gif";
img7ad = new Image();
img7ad.src = "images/buttons/exploratory-overview-sm.gif";
}
function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "on.src");
document["holder"].src = eval(imgName + "ad.src");
}
}
function imgOff(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "off.src");
document["holder"].src = "images/buttons/isp-overview-sm.gif";
}
}
First of all, eval in these functions are totally uncalled for
function imgOn(imgName) {
if ( < document.images) {
document[imgName].src = eval(imgName + "on.src");
document["holder"].src = eval(imgName + "ad.src");
}
}
function imgOff(imgName) {
if ( < document.images) {
document[imgName].src = eval(imgName + "off.src");
document["holder"].src = "images/buttons/isp-overview-sm.gif";
}
}
They should read
function imgOn(imgName) {
document.getElementById(imgName).src = window[imgName + "on"].src;
document.getElementById("holder").src = window[imgName + "ad"].src;
}
function imgOff(imgName) {
document.getELementById(imgName).src = window[imgName + "off"].src;
document.getElementById("holder").src = "images/buttons/isp-overview-sm.gif";
}
And instead of multiple img1on = new Image(); followed by calls to window[foo] you should do this
var myImages = {};
myImages["img1on" = new Image();
Then you can later on do
var foo = myImages[imgName + "on"].src;
to get the src.