We Keep Coding

post image on a blog with this script

I have a webpage in PHP in which there is an image.
Post this image on a blog with this script.
<div id="x"></div>
<script>
let div = document.getElementById("x");
let aTag = document.createElement("a");
aTag.href = 'http://www.meteoarachova.com/ws';
aTag.title = 'Εικόνα Κάμερας Μετεωρολογικού Σταθμού Αράχωβας';
aTag.target = '_blank';
aTag.outline = 'none';
let img = document.createElement("img");
img.src = "http://www.meteoarachova.com/webcam/arachova1.jpg";
img.style.width = '100%';
img.style.height = '80%';
aTag.append(img)
div.append(aTag);
console.log(document.getElementsByTagName('a')[0])
</script>
But I also want to post a second images at a different point on the same blog.
The two images to be in completely different places on the page and not next to each other.
I put the same code but it does not work.
How can I customize it to work?

Id's are unique to the page, hence you can only have a single div with the id "x".
That is why it probably won't work, or you're appending to the same place on the page.

document.getElementById().src could not present images under Jquery template

I have a question of document.getElementById().src under jQuery Template.
Firstly I created an array of 5 pictures(only the first element was depicted) as showed below:
var Image = function(src){
this.src = src;
}
var images = [];
images[0] = new Image("images/hedgehog.jpg");
Then I created a function which includes passing the src of the array to an ID(only relevant code was depicted):
document.getElementById("theQ").src = images[0].src;
The final part is the place expected to present the picture, but it didn't work:
<p style="text-align:center;" id="theQ"></p>
The navigation is correct as I could see the picture when I hover on the URL in text editor. Thank you for the help!

A paragraph is not an image. You can't attach a source to it. And it makes no sense to shadow the image constructor, just use the native one:
const img = new Image();
img.src = "images/hedgehog.jpg";
Now you can easily append that image to the dom:
document.getElementById("theQ").appendChild(img);

Since you already use jQuery in your template.
var Image = function(src){
this.src = src;
}
var images = [];
images[0] = new Image("https://thumbs.dreamstime.com/b/woman-wearing-yellow-floral-top-116695890.jpg");
$("#theQ").append("<img src=\""+images[0].src+"\" width=\"150\" />");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p style="text-align:center;" id="theQ"></p>

How to generate a html2canvas images with a hidden source (html) div

I am working in a project where I need to generate a profile picture of any member and its reviews, and some data, I started working with GDI, but it was so hard to understand, so I searched for other options and found Html2Canvas that works with javascript/jquery, everything is fine, the only thing I couldn't handle, and would like to know if there is a way to hide the source html div without breaking the result image.
Ex:
This is how is it now
This is how it should look
So, when I apply display:none on the css of the source div, the image result is like this:
And finally here is the code that I have so far
var div_to_hide = $("#mydiv:hidden");
$(function() {
$('span.stars').stars();
});
html2canvas([document.getElementById('mydiv')], {
onrendered: function (canvas) {
document.getElementById('canvas').appendChild(canvas);
var data = canvas.toDataURL('image/png');
var image = new Image();
image.src = data;
document.getElementById('image').appendChild(image);
}
});
$.fn.stars = function() {
return $(this).each(function() {
var val = parseFloat($(this).html());
val = Math.round(val * 4) / 4;
var size = Math.max(0, (Math.min(5, val))) * 16;
var $span = $('<span />').width(size);
$(this).html($span);
});
}
https://jsfiddle.net/ricardojriosr/6ap9Lx1f/8/
Now the question is how do I made this work showing only the image and not the HTML source. Thanks in advace.

Instead of trying to hide it before, hide (or remove) it after the canvas is rendered.
I'm not sure why var div_to_hide equals $("#mydiv:hidden"); but if you change it to var div_to_hide = $("#mydiv"); then, on line 12, after appending the image, you can run div_to_hide.hide();
And to avoid a flash of the HTML content, you can use some CSS trickery to cover up the original HTML. I made an example here, but you can adjust to fit whatever your actual needs are. https://jsfiddle.net/m5zq2kzn/

I had the same issue.
The solution that worked for me is a css trickery to position the div that I want to hide offscreen:
.offscreen {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
Then use it like this:
html2canvas(document.getElementById("ticket_template"))
.then((canvas) => {
let imgData = canvas.toDataURL('image/png');
});

append string to image src using js

I've got a page where there is <img src="/images/product/whatever-image.jpg" alt="" />
I want it so that upon loading of the page, the string "?Action=thumbnail" is appended to src's value, making it src="/images/product/whatever-image.jpg?Action=thumbnail"
how do I achieve this using js?

window.addEventListener('load', function(){
/* assuming only one img element */
var image = document.getElementsByTagName('img')[0];
image.src += '?Action=thumbnail';
}, false);
Note, changing the source of the image will "re-fetch" the image from the server — even if the image is the same. This will be better done on the server-side.
Update after comment:
window.addEventListener('load', function(){
/* assuming only one div with class "divclassname" and img is first child */
var image = document.getElementsByClassName('divclassname')[0].firstChild;
image.src += '?Action=thumbnail';
}, false);

Use this:
window.onload = function() {
document.getElementById('myImage').src += "/Action=thumbnail";
};

JavaScript images

How do I display the same image on the same page multiple times?
<head>
<Script language="javascript">
function xdf(){
for (i=0;i<10;i++) {
document.write('<b>hello world</b><br>');
}
}
</script>
</head>
this code displays "hello world" 10 times.
i would like the same thing but with certain image instead of "hello word"...

You can use document.createElement() to create an img element in JavaScript, and Node.appendChild() to append it to some other node:
var img = document.createElement('img');
img.setAttribute('src', 'my_image.png');
document.getElemenetById('some-div').appendChild(img);
The image will be loaded from the browser's cache if the above is repeated multiple times, appending each new img element to multiple nodes.
As #Matthew Flaschen suggested in a comment below, you could also use the Node.cloneNode() solution instead. You can create your img elment once:
var img = document.createElement('img');
img.setAttribute('src', 'my_image.png');
... and then use img.cloneNode(false) as an argument for appendChild():
document.getElemenetById('some-div').appendChild(img.cloneNode(false));
document.getElemenetById('some-other-div').appendChild(img.cloneNode(false));

<img src="/path/to/img.png"/> <img src="/path/to/img.png"/>

you can clone the images:
<div><img src="http://www.google.com/favicon.ico" id="image" /></div>
<script type="text/javascript">
n = 5;
img = document.getElementById("image");
for (i=0; i<n-1; i++) {
img2 = img.cloneNode(false);
img2.id = img.id + "_clone" + i;
img.parentNode.appendChild(img2);
}
</script>

.. or maybe you'd rather want to define the background, using CSS?
<style type="text/css">
body { background: url("http://www.google.com/favicon.ico") left repeat-y; }
</style>
(assuming from your previous comment, that you want to have the images in one column on the left edge)

Change:
document.write('<b>hello world</b><br>');
Into:
document.write('<img src="IMAGE FILE NAME HERE.png" alt="TEXT HERE"><br>');