I have the src (data) of an image, that is not saved yet and doesn't have a path yet.
I would like to know the future ipfs hash that will result from it once it is saved and sent to ipfs.
So far I have done this, but the hashes don't match.
import { saveAs } from 'file-saver';
const dagPB = require('ipld-dag-pb')
const UnixFS = require('ipfs-unixfs')
func = async () => {
let bgImage = await import(`./images/bg.png`);
let bodyImage = await import(`./images/body.png`);
let headImage = await import(`./images/head.png`);
let eyesImage = await import(`./images/eye.png`);
let mouthImage = await import(`./images/mouth.png`);
let levelImage = await import(`./images/level.png`);
src = await mergeImages([
bgImage.default,
bodyImage.default,
headImage.default,
eyesImage.default,
mouthImage.default,
levelImage.default,
]);
image.src = src;
saveAs(image.src, `photo.png`);
const fileBuffer = Buffer.from(image.src)
const file = new UnixFS('file', fileBuffer)
dagPB.DAGNode.create(file.marshal(), (err, node) => {
if(err) return console.error(err)
console.log(node._cid.toBaseEncodedString())
})
}
What is missing or wrong ?
And here is what I did.
const Hash = require('ipfs-only-hash')
func = async () => {
let bgImage = await import(`./images/bg${ex}.png`);
let bodyImage = await import(`./images/body${ex}.png`);
let headImage = await import(`./images/head${ex}.png`);
let eyesImage = await import(`./images/eye${ex}.png`);
let mouthImage = await import(`./images/mouth${ex}.png`);
let levelImage = await import(`./images/level${ex}.png`);
src = await mergeImages([
bgImage.default,
bodyImage.default,
headImage.default,
eyesImage.default,
mouthImage.default,
levelImage.default,
]);
const endOfPrefix = src.indexOf(",");
const cleanStrData = src.slice(endOfPrefix+1);
const imageData = Buffer.from(cleanStrData, "base64");
const imageHash = await Hash.of(imageData);
console.log("fetch data CID: " + imageHash)
}
Remove the header of the data, to keep only the data and then hash it it with ipfs-hash-only.
The image hash is then written in the .json and the same process is used to hash the .json and know before hand the metadata's ipfs address.
Related
I have been trying to send the var logtraceArr = []; value to the browser using Expressjs but one first call empty array is displayed on 2nd call array is filled with first called function and on 3rd call array is appended with the same element.
I want the content to be displayed on the first.
var express = require("express");
var router = express.Router();
const fs = require("fs");
const path = require("path");
const readline = require('readline');
const directoryPath = path.resolve(__dirname,"../logtrace-filestore/edepoze-logs");
var logtraceArr = [];
router.get("/",function(req,res,next){
const fetchFileContentParsed = async (fileContentObj) => {
var logtraceObj = {
Direction : '',
FromServer: '',
ToServer:''
};
var pipearray = fileContentObj.toString().split("|");
for( i=0;i<pipearray.length;i++){
var Direction = new Array();
Direction = pipearray[5].split("::");
if (Direction.length == 2) {
logtraceObj.Direction = Direction[1];
} else {
logtraceObj.Direction = "";
}
}
logtraceArr.push(logtraceObj);
return {
logtraceArr
}
}
// Iterates all users and returns their Github info.
const getfileContent = async (files) => {
const fileContent = files.map((file) => {
const filePath = path.join(directoryPath,file);
//console.log("filePath ----->",filePath);
const readStream = fs.createReadStream(filePath);
const fileContent = readline.createInterface({
input: readStream
});
fileContent.on('line', function(line) {
const regExp = /\[Event([^]+\])/g
var matchedContent;
if ((matchedContent = line.match(regExp)) != null){
return fetchFileContentParsed(matchedContent) // Async function that fetches the user info.
.then((a) => {return a })
}
})
})
return Promise.all(fileContent) // Waiting for all the requests to get resolved.
}
function readFiles(dirname) {
//console.log(dirname);
fs.readdir(dirname, async function (err,filenames)
getfileContent(filenames).then((a) => {return a })
});
}
res.header("Access-Control-Allow-Origin", "*");
res.contentType('application/json');
//console.log(readFiles(directoryPath))
readFiles(directoryPath,logtraceArr);
res.send(logtraceArr);
});
module.exports = router;
i want the content to be loaded and print the array only once on refresh of the page
var express = require("express");
var router = express.Router();
const fs = require("fs");
const path = require("path");
const readline = require('readline');
const directoryPath = path.resolve(__dirname,"../logtrace-filestore/edepoze-logs");
var logtraceArr = [];
router.get("/",function(req,res,next){
const fetchFileContentParsed = async (fileContentObj) => {
var logtraceObj = {
Direction : '',
FromServer: '',
ToServer:''
};
var pipearray = fileContentObj.toString().split("|");
for( i=0;i<pipearray.length;i++){
var Direction = new Array();
Direction = pipearray[5].split("::");
if (Direction.length == 2) {
logtraceObj.Direction = Direction[1];
} else {
logtraceObj.Direction = "";
}
}
logtraceArr.push(logtraceObj);
return {
logtraceArr
}
}
// Iterates all users and returns their Github info.
const getfileContent = async (files) => {
const fileContent = files.map((file) => {
const filePath = path.join(directoryPath,file);
//console.log("filePath ----->",filePath);
const readStream = fs.createReadStream(filePath);
const fileContent = readline.createInterface({
input: readStream
});
fileContent.on('line', function(line) {
const regExp = /\[Event([^]+\])/g
var matchedContent;
if ((matchedContent = line.match(regExp)) != null){
return fetchFileContentParsed(matchedContent) // Async function that fetches the user info.
.then((a) => {return a })
}
})
})
return Promise.all(fileContent) // Waiting for all the requests to get resolved.
}
function readFiles(dirname) {
//console.log(dirname);
fs.readdir(dirname, async function (err,filenames)
getfileContent(filenames).then((a) => {return a })
});
}
res.header("Access-Control-Allow-Origin", "*");
res.contentType('application/json');
//console.log(readFiles(directoryPath))
readFiles(directoryPath,logtraceArr);
res.send(logtraceArr);
});
module.exports = router;
I have been trying to send the var logtraceArr = []; value to the browser using Expressjs but one first call empty array is displayed on 2nd call array is filled with first called function and on 3rd call array is appended with the same element.
I want the content to be displayed on the first.
You define logtraceArr in the global scope, so it never will be cleared. If you want to have an empty array for each request - define logtraceArr inside the router callback (for example on the line before calling readFiles)
Promise.all() doesn't wait if you don't await it. To wait you can return result of getfileContent from readFiles and then send request after result of readFiles. Fof example:
async function readFiles(dirname) {
fs.readdir(dirname, async function (err,filenames)
await getfileContent(filenames).then((a) => {return a })
});
return
}
res.header("Access-Control-Allow-Origin", "*");
res.contentType('application/json');
readFiles(directoryPath,logtraceArr).then(() => res.send(logtraceArr));
How I can make this
var imageurl = 'https://tr.wikipedia.org/wiki/'
let queryimage = `${imageurl}Dosya:${cityName}.jpg`
console.log(queryimage)
When ı look console ı see this ;
https://tr.wikipedia.org/wiki/Dosya:england.jpg
thats ok but now
How ı can download image on this page https://tr.wikipedia.org/wiki/Dosya:england.jpg
This is your way :
// Your url must be like this : 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/England.jpg/800px-England.jpg'
let cityName = 'England';
let imageurl = 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/'
let queryimage = `${imageurl}${cityName}.jpg/800px-${cityName}.jpg`
let img = document.getElementById('image');
img.setAttribute('src',queryimage)
You can use MediaWiki's Action API to retrieve information about the images in these pages and grab the source of this image.
async function grabImageInfo(pageTitle) {
const resp = await fetch(`https://tr.wikipedia.org/w/api.php?action=query&prop=pageimages&titles=${pageTitle}&piprop=original&format=json&origin=*`);
if (!resp.ok) {
throw new Error("Network Error");
}
return resp.json();
}
async function grabImageSource(pageTitle) {
const imageInfo = await grabImageInfo(pageTitle);
return Object.values(imageInfo.query.pages)[0].original.source;
}
const select = document.querySelector("select");
const img = document.querySelector("img");
const a = document.querySelector("a");
async function handleChange() {
try {
const pageTitle = `Dosya:${select.value}.jpg`;
const imgUrl = await grabImageSource(pageTitle);
img.src = imgUrl;
a.href = `https://tr.wikipedia.org/wiki/${pageTitle}`
}
catch(err) {
console.error(err);
}
}
select.onchange = handleChange;
handleChange();
<select>
<option>England</option>
<option>Italy</option>
<option>Germany</option>
<option>Flower</option>
<option>Cat</option>
</select><br>
<a>Go to Wikipedia's page</a><br>
<img>
I'm new to async and await. I'm working on a recipe website using an api and fetch. need help to add async await to the fetch. I'm using spoonacular api.
there are no errors just want to add async await.
function retrieve(e) {
newsList.innerHTML = "";
e.preventDefault();
const apiKey = "my api key";
let topic = input.value;
let url = `https://api.spoonacular.com/recipes/complexSearch?query=${topic}&apiKey=${apiKey}&cuisine=&fillIngredients=false&addRecipeInformation=true&maxReadyTime=120&ignorePantry=flase&number=20&intolerances=gluten&sourceUrl=http://www.foodista.com`;
fetch(url)
.then((res) => {
return res.json();
})
.then((data) => {
console.log(data);
data.results.forEach((results) => {
let li = document.createElement("li");
let a = document.createElement("a");
let div = document.createElement("div");
let img = document.createElement("img");
let btn = document.createElement("button");
// styling
div.className = "newsdiv";
img.className = "newsimg";
btn.className = "btns";
li.style.width = "300px";
a.setAttribute("href", results.sourceUrl);
a.setAttribute("target", "_blank");
img.setAttribute("src", results.image);
div.textContent = results.title;
// btn.prepend(br);
div.appendChild(a);
div.prepend(img);
li.prepend(div);
btn.textContent = "Get Recipe";
div.appendChild(btn);
a.appendChild(btn);
newsList.appendChild(li);
});
})
.catch((error) => {
console.log(error);
});
}
Look at below snippet. This will be useful to your solution. In the function you may do whatever operations you want.
const retrieve = async (e) => {
newsList.innerHTML = "";
e.preventDefault();
const apiKey = "my api key";
let topic = input.value;
let url = `https://api.spoonacular.com/recipes/complexSearch?query=${topic}&apiKey=${apiKey}&cuisine=&fillIngredients=false&addRecipeInformation=true&maxReadyTime=120&ignorePantry=flase&number=20&intolerances=gluten&sourceUrl=http://www.foodista.com`;
const response = await fetch(url);
const myJson = await response.json(); //extract JSON from the http response
console.log(myjson);
}
retrieve(null);
I have put the code below my for a simple weather app using Open Weather
The code to get the icon code from the JSON works in the first block but not in the second?
i can console log the variable no problem but when i am trying to display the icon it isnt loading the png file?
The line in question is
let icon1 = jsonResponse.list[8].weather[0].icon
nextDayWeather.src = `/resources/icons/${icon1}.png`
full code for reference including same code working in an earlier function
async function getWeather(input) {
const city = input
try {
const response = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=`)
if (response.ok) {
const jsonResponse = await response.json()
const {icon} = jsonResponse.weather[0]
currTemp.innerText = Math.floor(jsonResponse.main.temp - 273)
currWind.innerText = jsonResponse.wind.speed
currWeather.src = `/resources/icons/${icon}.png`
return
}
throw new Error('Request Failed')
} catch(error) {
window.location = '/'
}
}
async function extraWeather(input) {
const city = input
try {
const response = await fetch(`http://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=`)
if (response.ok){
const jsonResponse = await response.json()
let icon1 = jsonResponse.list[8].weather[0].icon
let icon2 = jsonResponse.list[16].weather[0].icon
let icon3 = jsonResponse.list[24].weather[0].icon
nextDayWeather.src = `/resources/icons/${icon1}.png` //needs fixing??
nextDayWind.innerText = jsonResponse.list[8].wind.speed
nextDayTemp.innerText = Math.floor(jsonResponse.list[8].main.temp - 273)
nextDayWeather2.src = `/resources/icons/${icon2}.png`
nextDayWind2.innerText = jsonResponse.list[16].wind.speed
nextDayTemp2.innerText = Math.floor(jsonResponse.list[16].main.temp - 273)
nextDayWeather3.src = `/resources/icons/${icon3}.png`
nextDayWind3.innerText = jsonResponse.list[24].wind.speed
nextDayTemp3.innerText = Math.floor(jsonResponse.list[24].main.temp - 273)
console.log(jsonResponse.list[16].weather[0].icon)
return
}
throw new Error ('error') }
catch(error){
console.log(error)
}
}