Develop Reference

Use p5js script for an NFT?

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

Using object's member instead of object itself when calling object

Here's the class and object:
class BDImage
{
constructor(path)
{
this.img = new Image();
this.img.src = path;
}
}
var myImage = new BDImage("path/to/image.png");
I want to access/use myImage's img member without typing myImage.img all the time. Instead just myImage and then I'm actually referring to myImage.img.
How?

extends ;)
class BDImage extends Image
{
constructor(path)
{
super()
this.src = path
}
}
var myImage = new BDImage("path/to/image.png");
console.log(myImage, myImage.src);
Object.defineProperty
class BDImage
{
constructor(path)
{
this.image = new Image()
this.image.src = path
Object.defineProperty(this, 'src', {
get(){
return this.image.src;
},
set(path){
this.image.src = path
}
})
}
}
myImage = new BDImage("path/to/image.png");
console.log(myImage, myImage.src);
myImage.image.src = "path/to/image2.png"
console.log(myImage, myImage.src);
myImage.src = "path/to/image3.png"
console.log(myImage, myImage.src);

Just cache the reference in a variable:
class BDImage
{
constructor(path)
{
this.img = new Image();
this.img.src = path;
}
}
var myImage = new BDImage("path/to/image.png");
var imgProp = myImage.img; // Now imgProp points to myImage.img
console.log(imgProp.src);

It looks like you need some Functional programming !
function BDImage(path) {
const img = new Image();
img.src = path;
return img;
};
const myImage = BDImage("path/img.png");
Hope it helps !

Saving Facebook profile picture (fetched from Facebook API) as file object using javascript

I want to save facebook profile image URL to file object I tried to convert it to base64 then convert it to file object but i want file object outside the function maybe it some sort of stupid question but any help? following what i tried
var imgUrl = 'https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png';
var convertImgToDataURLviaCanvas = function(url, callback) {
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();
callback(dataURL);
canvas = null;
};
img.src = url;
}
convertImgToDataURLviaCanvas(imgUrl, function(base64_data) {
var byteString = atob(base64_data.split(',')[1]);
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
var blob = new Blob([ia], {
type: 'image/jpeg'
});
var file = new File([blob], "images.jpg");
console.log(file)
});

You can use global variable and assign file object to that variable inside your function.
basically split var file = new File([blob], "images.jpg");
into
var file = null; //outside convertImgToDataURLviaCanvas
file = new File([blob], "images.jpg"); //inside convertImgToDataURLviaCanvas

Add next and prev button in slide show

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();

How to overlay an image in HTML 5 canvas

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[]
}