I'm trying to make a Generator where a user can insert their Battlenet Name (name) and have it output their Emblem (data.characters[2].embemBackground) plus their light level (data.characters[0].light) on the image too.
Then, I want the user to be able to use an image link, such as: http://www.test.com/image.png
And have it get updated automatically with the stats from the API, so it overwrites the image without changing the URL.
Result:
I used html2canvas capture to get the image itself from (#character2img)
I do realize this is probably not the best way to approach this.
Code:
const { Client } = require('destiny2');
const client = new Client('apiKey');
const html2canvas = require('html2canvas');
window.memberName = function(){
var pName = document.getElementById("pageheader");
var pLl = document.getElementById('LightLevel');
var pLl2 = document.getElementById('LightLevel2');
var pLl3 = document.getElementById('LightLevel3');
var gT = document.getElementById('Guardian');
var gT2 = document.getElementById('Guardian2');
var gT3 = document.getElementById('Guardian3');
var divI = document.getElementById('character1img');
var name = document.getElementById('search').value;
client.getProfile(name, '4')
.then(data => console.log(data));
client.getProfile(name, '4').then(data => {
pName.appendChild(document.createTextNode(`${data.profile.displayName}`));
// Character 1
// Emblem Image
var elem = document.createElement("img");
elem.src = `http://bungie.net${data.characters[0].embemBackground}`;
var image = document.getElementById('character1img').appendChild(elem);
// Light Level
pLl.appendChild(document.createTextNode(`♦ ${data.characters[0].light}`));
// Character 2
// Emblem Image
var elem = document.createElement("img");
elem.src = `http://bungie.net${data.characters[1].embemBackground}`;
var image2 = document.getElementById('character2img').appendChild(elem);
// Light Level
pLl2.appendChild(document.createTextNode(`♦ ${data.characters[1].light}`));
// Character 3
// Emblem Image
var elem = document.createElement("img");
elem.src = `http://bungie.net${data.characters[2].embemBackground}`;
var image2 = document.getElementById('character3img').appendChild(elem);
// Light Level
pLl3.appendChild(document.createTextNode(`♦ ${data.characters[2].light}`));
});
}
window.screenshot = function(){
html2canvas(document.querySelector("#character1img"), {allowTaint : true}).then(canvas => {
document.body.appendChild(canvas)
});
}
window.screenshot2 = function(){
html2canvas(document.querySelector("#character2img"), {allowTaint : true}).then(canvas => {
document.body.appendChild(canvas)
});
}
window.screenshot3 = function(){
html2canvas(document.querySelector("#character3img"), {allowTaint : true}).then(canvas => {
document.body.appendChild(canvas)
});
}
Related
I am trying to display Unsplash images on cards.
The cards are created using JavaScript.
The 10 objects from the Unsplash API is shown on the console.
However, I cannot seem to find the problem on why the cards and the API Unsplash images are not displaying.
Appreciate any help, thanks.
const resultsNav = document.getElementById('resultsNav');
const favouritesNav = document.getElementById('favouritesNav');
const imagesContainer = document.querySelector('.images-container');
const saveConfirmed = document.querySelector('.saveConfirmed');
const loader = document.querySelector('.loader');
// Unsplash API
const count = 10;
const apiKey = 'DEMO KEY';
const apiUrl = `https://api.unsplash.com/photos/random?client_id=${apiKey}&count=${count}`;
let resultsArray = [];
function updateDOM() {
resultsArray.foreach((result) => {
// Card Container
const card = document.createElement('div');
card.classList.add('card');
// link
const link = document.createElement('a');
link.href = result.hdurl;
//Images
const image = document.createElement('img');
image.src = result.url;
image.alt = 'Image';
image.loading = 'lazy';
image.classList.add('card-img-top');
//Card Body
const cardBody = document.createElement('div');
cardBody.classList.add('card-body');
// Save Text
const saveText = document.createElement('p');
saveText.classList.add('clickable');
saveText.textContent = 'Add To Favourites';
// Append
cardBody.append(saveText);
link.appendChild(image);
card.append(link, cardBody);
imagesContainer.appendChild(card);
});
}
// Get 10 Images from Unsplash API
async function getUnplashPictures() {
try {
const response = await fetch(apiUrl);
resultsArray = await response.json();
console.log(resultsArray);
updateDOM();
} catch (error) {
// Catch Error Here
}
}
// On Load
getUnplashPictures();
Let's fix the for loop part;
foreach() usage should be with capital E as .forEach() that cause an error and your response objects prop were different named.
let resultsArray = [];
function updateDOM() {
for (let result of resultsArray) {
// Card Container
const card = document.createElement('div');
card.classList.add('card');
// link
const link = document.createElement('a');
link.href = result.links.self;
//Images
const image = document.createElement('img');
image.src = result.urls.small;
image.alt = 'Image';
image.loading = 'lazy';
image.classList.add('card-img-top');
//Card Body
const cardBody = document.createElement('div');
cardBody.classList.add('card-body');
// Save Text
const saveText = document.createElement('p');
saveText.classList.add('clickable');
saveText.textContent = 'Add To Favourites';
// Append
cardBody.append(saveText);
link.appendChild(image);
card.append(link, cardBody);
imagesContainer.appendChild(card);
};
}
When I click on the image, the image changes randomly, but it happens that some images are repeated after the click. how can I solve it?
Below is my queue.
let h1 = document.querySelector('h1')
let bigSquare = document.createElement('div')
bigSquare.id = 'bigSquare'
h1.after(bigSquare)
let images = ['01.jpg', '02.jpg', '03.jpg', '04.jpg', '05.jpg']
let randomImage = function(){
return (Math.round(Math.random()*(images.length-1)))
}
let image = document.createElement('img')
bigSquare.append(image)
image.src = images[randomImage()]
image.onclick = function(event){
event.target.src = images[randomImage()]
}
Just create a variable called say, "randNumb" that stores the random number generated in it and whenever the image is clicked, compare the previous random number with the new one and if they're different, change the img src else run the random image function again.
Check and run the following Code Snippet for a practical example of the above approach:
let h1 = document.querySelector('h1');
let bigSquare = document.createElement('div');
let randNumb = 0;
bigSquare.id = 'bigSquare';
h1.after(bigSquare);
let images = ['01.jpg', '02.jpg', '03.jpg', '04.jpg', '05.jpg'];
let image = document.createElement('img');
bigSquare.append(image);
image.src = images[randNumb];
let randomImage = function(){
let x = Math.round(Math.random()*(images.length-1)); // get random number
if (x == randNumb) {
randomImage(); // same random number so run function again
}
else {
randNumb = x;
image.src = images[randNumb]; // not same random number so change src
console.log("The image src right now is: " + image.src);
}
}
image.onclick = function(){randomImage()};
<h1></h1>
var displayedImage = document.querySelector('.displayed-img');
var thumbBar = document.querySelector('.thumb-bar');
btn = document.querySelector('button');
var overlay = document.querySelector('.overlay');
/* Looping through images */
for(var i=1;i<=5;i++){
var newImage = document.createElement('img');
newImage.setAttribute('src', "images/pic"+i+".jpg");
thumbBar.appendChild(newImage);
}
function getPath(){
var path = this.document.getAttribute('src').value;
}
newImage.onclick=function(){
var path = newImage.getAttribute('src');
console.log(path);
displayedImage.setAttribute('src', path);
}
i tried printing out the path when i click on the image, but it only return the last value of newImage..but i have 4 pictures that can be selected
Why don't you append a CSS class to each of the image elements and use the class name as the CSS selector? Like so,
newImage.className = 'my-class-name';
You'll have to set the event listener inside the loop for each new element. Like this:
var displayedImage = document.querySelector('.displayed-img');
var thumbBar = document.querySelector('.thumb-bar');
btn = document.querySelector('button');
var overlay = document.querySelector('.overlay');
/* Looping through images */
for(var i=1;i<=5;i++){
var newImage = document.createElement('img');
newImage.setAttribute('src', "images/pic"+i+".jpg");
thumbBar.appendChild(newImage);
// **************************************************
newImage.onclick=function(){
var path = this.getAttribute('src'); // instead of newImage use this
console.log(path);
displayedImage.setAttribute('src', path);
}
// **************************************************
}
function getPath(){
var path = this.document.getAttribute('src').value;
}
Note: If you are planing on using i inside the the function assigned to the onclick then consider taking a look at this.
'use strict';
/**
* Created by tqcenglish on 15-8-12.
* 若请静态文件使用默认账号，若添加参数则需要服务器动态生成此文件
*/
(function () {
var createScriptElement = function (src, onload, onerror) {
var element = document.createElement("script");
element.type = "text\/javascript";
element.src = src;
element.onload = onload;
element.onerror = onerror;
return element;
};
var createLinkElement = function (src) {
var element = document.createElement('link');
element.href = src;
element.rel = 'Stylesheet';
element.media_type = 'text/css';
return element;
};
var createUI = function () {
var clickCallDiv = document.createElement('div');
clickCallDiv.style.cssText = 'width: 300px;height: 60px;position: fixed;z-index: 999;right: 20px;bottom: 320px;';
var call_btn = document.createElement("button");
call_btn.id = "dial_btn_call";
var session_div = document.createElement("div");
session_div.id = 'sessions';
var webcam_div = document.createElement("div");
webcam_div.style.cssText = 'height:0';
webcam_div.id = 'webcam';
var video_remote = document.createElement('video');
video_remote.id = 'remoteView';
video_remote.autoplay = 'autoplay';
video_remote.hidden = 'hidden';
var video_local = document.createElement('video');
video_local.autoplay = 'autoplay';
video_local.hidden = 'hidden';
video_local.muted = 'muted';
video_local.id = 'selfView';
webcam_div.appendChild(video_remote);
webcam_div.appendChild(video_local);
clickCallDiv.appendChild(call_btn); //add the text node to the newly created div.
var contain = document.createElement('div');
contain.appendChild(session_div);
contain.appendChild(webcam_div);
clickCallDiv.appendChild(contain);
return clickCallDiv;
};
var urls = {};
urls.rtcninja = 'location/rtcninja.js';
urls.jquery = 'location/jquery.js';
urls.i18n = "location/jquery.i18n.js";
urls.messagestore = "location/jquery.i18n.messagestore.js";
urls.jssip = 'location/jssip.js';
urls.init = 'location/init.js';
urls.gui = 'location/gui.js';
urls.css = 'location/style.css';
var rtcninja_script = createScriptElement(urls.rtcninja, function () {
// Must first init the library
rtcninja();
// Then check.
if (!rtcninja.hasWebRTC()) {
console.log('WebRTC is not supported in your browser :(');
} else {
document.body.appendChild(createUI());
}
});
var jquery_script = createScriptElement(urls.jquery, function(){
document.head.appendChild(i18_script);
document.head.appendChild(jssip_script);
document.head.appendChild(gui_script);
document.head.appendChild(init_script);
});
var i18_script = createScriptElement(urls.i18n, function(){
document.head.appendChild(messagestore_script);
});
var messagestore_script = createScriptElement(urls.messagestore);
var jssip_script = createScriptElement(urls.jssip);
var init_script = createScriptElement(urls.init);
var gui_script = createScriptElement(urls.gui);
var click_call_css = createLinkElement(urls.css);
document.head.appendChild(jquery_script);
document.head.appendChild(rtcninja_script);
document.head.appendChild(click_call_css);
})();
The above code is perfectly working on a HTTPS web server. The problem is, our website is running on HTTP server. I have done some few alterations, experimentation and a lot of research but the same result occurs. Button does not appear when I am embedding it on our website. I cannot track any error regarding these codes. Anything wrong with it? Any suggestion would be a great help for me. Thanks.
By the way, this code should be able to call through our phones on our office. clicking the button would direct user to the web rtc which would directly call our office.
Chrome doesn't allow WebRTC on HTTP. You must use HTTPS or test with Firefox.
<img id="opeth"> </img>
<script type="text/javascript">
var gearpics = [];
document.getElementById("opeth").innerHTML = gearpics;
var prs = new Image();
prs.onload = function() {
};
prs.src = src
var prs2 = new Image();
prs2.onload= function() {
};
prs2.src = src
var prs3 = new Image();
prs3.onload= function() {
};
prs3.src = src
function insert() {
gearpics.push(document.getElementById('opeth').src = prs.src);
gearpics.push(document.getElementById('opeth').src = prs2.src);
gearpics.push(document.getElementById('opeth').src = prs3.src);
}
</script>
This is my code. When I run it, and press the "Show pictures" button, only the third picture (id=prs3) appears. I want all of them to show up.
You are using the same ID for your 3 pictures:
gearpics.push(document.getElementById('opeth').src = ...);
ID should be unique in HTML document.