Alright i can't really seem to find anything regarding EXACTLY what i'm doing.
Anyways i need to set a hyperlink to download an image. That image has an id already.
Everytime the user displays an image, the download link will download that image they have entered.
When you run the code, enter 255812 for image code.
function myFunction() {
var x = document.getElementById("imagetxt").value;
var y = "http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-" + x + ".jpg";
// Creating an image
var img = new Image();
// Defining the function if image loads successfully.
img.onload = function() {
document.getElementById("image1").src = y;
};
//Defining the function if image fails to load.
img.onerror = function() {
alert("Image not found");
};
img.src = y;
}
<body align="center">
<div>
<img src="http://i.imgur.com/dXo8Fxp.png" width="20%" height="20%">
</div>
<div>
<img src="http://i.imgur.com/jCOLCiU.png" width="8%" height="8%">
</div>
<div>
<input id="imagetxt" size="6" type="text" value="">
</div>
<div>
<input id="btn1" type="button" value="Display" onclick="myFunction()" style="top: 5px; position: relative;">
</div>
<div>
<img id="image1" src="" width="30%" height="30%" style="top: 10px; position: relative;">
</div>
DOWNLOAD THIS
Get rid of the onclick on the anchor tag
<a href="#" id="imageDL" download>DOWNLOAD THIS</a>
Set the anchor's href in the img.onload
img.onload = function() {
document.getElementById("image1").src = y;
document.getElementById("imageDL").href = y;
};
Add this to the end of myFunction
document.getElementById("imageDL").href = y;
function myFunction() {
var x = document.getElementById("imagetxt").value;
var y = "http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-" + x + ".jpg";
// Creating an image
var img = new Image();
// Defining the function if image loads successfully.
img.onload = function() {
document.getElementById("image1").src = y;
};
//Defining the function if image fails to load.
img.onerror = function() {
alert("Image not found");
};
img.src = y;
document.getElementById("imageDL").href = y;
}
<body align="center">
<div>
<img src="http://i.imgur.com/dXo8Fxp.png" width="20%" height="20%">
</div>
<div>
<img src="http://i.imgur.com/jCOLCiU.png" width="8%" height="8%">
</div>
<div>
<input id="imagetxt" size="6" type="text" value="">
</div>
<div>
<input id="btn1" type="button" value="Display" onclick="myFunction()" style="top: 5px; position: relative;">
</div>
<div>
<img id="image1" src="" width="30%" height="30%" style="top: 10px; position: relative;">
</div>
DOWNLOAD THIS
Related
im trying to build a website, where u click on a text, and a picture appears, when you click on this picture, the next one appears and so on. If you reach the last picture, the first one should appear if you click on it. My code is very complicated and it does not work with the last picture. I hope somebody can help me!
<head>
<script type="text/javascript">
function showImage() {
document.getElementById('loadingimage').style.visibility="visible";
}
function showImage2() {
document.getElementById('loadingimage2').style.visibility="visible";
}
function showImage3() {
document.getElementById('loadingimage3').style.visibility="visible";
}
</script>
</head>
<body>
<a onclick="showImage()">Hier clicken</a>
<img onclick="showImage2()" id="loadingimage" src="pic/pic1.jpg" alt="" style="visibility:hidden"></img>
<img onclick="showImage3()" id="loadingimage2" src="pic/pic2.jpg" alt="" style="visibility:hidden"></img>
<img onclick="showImage4()" id="loadingimage3" src="pic/pic3.jpg" alt="" style="visibility:hidden"></img>
</body>
For simplicity, the button will be hidden after you click the first time on the button.
let start = 0,
total = 3,
hasStarted = false;
const images = [...document.querySelectorAll(".image")];
const button = document.querySelector("button");
function showImage() {
if (!hasStarted) {
button.classList.add("hide")
hasStarted = !hasStarted;
}
images.forEach(image => {
if (image.classList.contains("show")) {
image.classList.remove("show");
image.classList.add("hide");
}
})
document.querySelector(`.image${start}`).classList.add("show");
++start;
start = start % total;
}
images.forEach(image => {
image.addEventListener("click", showImage)
})
.hide {
visibility: hidden;
}
.show {
visibility: visible;
}
<button onclick="showImage()">Hier clicken</button>
<img class="image image0 hide" id="loadingimage1" src="https://source.unsplash.com/random/200x200" alt=""></img>
<img class="image image1 hide" id="loadingimage2" src="https://source.unsplash.com/random/200x200" alt=""></img>
<img class="image image2 hide" id="loadingimage3" src="https://source.unsplash.com/random/200x200" alt=""></img>
I feel this is what you need:
<head>
<script type="text/javascript">
function showImage() {
document.getElementById('loadingimage').style.visibility = "visible";
document.getElementById('loadingimage').style.position = 'absolute';
}
function showImage2() {
document.getElementById('loadingimage2').style.visibility = "visible";
document.getElementById('loadingimage2').style.zIndex = '10';
document.getElementById('loadingimage2').style.position = 'absolute'
}
function showImage3() {
document.getElementById('loadingimage3').style.visibility = "visible";
document.getElementById('loadingimage3').style.zIndex = '15';
document.getElementById('loadingimage3').style.position = 'absolute'
}
function showImage4() {
document.getElementById('loadingimage').style.zIndex = '20';
}
</script>
</head>
<body>
<a onclick="showImage()">Hier clicken</a>
<img onclick="showImage2()" id="loadingimage" src="https://source.unsplash.com/random/200x201" alt="" style="visibility:hidden">
<img onclick="showImage3()" id="loadingimage2" src="https://source.unsplash.com/random/200x202" alt="" style="visibility:hidden">
<img onclick="showImage4()" id="loadingimage3" src="https://source.unsplash.com/random/200x203" alt="" style="visibility:hidden">
</body>
Hi I am new to javascript and I want to change the image when I click the image. I can do this with 2 images, how do I do this with 3 images?
function change() {
var image = document.getElementById('changeimg');
console.log(image)
switch (image) {
case "image2":
document.getElementById('changeimg').src = "css3.png";
break;
default:
case "image3":
document.getElementById('changeimg').src = "javascript.png";
}
}
<h1 align="center">Change Image</h1>
<br>
<div class="container" align="center">
<img src="html5.png" style="height: 500px; width: 500px" id="changeimg" onclick="change()">
</div>
Just replace your real image name in the imgArr
var img = 0;
var imgArr = ["img1.png", "img2.png", "img3.png"]
function change() {
var image = document.getElementById('changeimg');
console.log("Current image => ", imgArr[img])
document.getElementById('changeimg').src = imgArr[img];
if (img == 2) img = 0;
else
img++;
}
<h1 align="center">Change Image</h1>
<br>
<div class="container" align="center">
<img src="html5.png" style="height: 500px; width: 500px" id="changeimg" onclick="change()">
</div>
I'm working with the croppers library, I have the problems implementing it on some Android devices the photo being taken vertically I get horizontal I tried to adapt the horizontal or vertical rotation part (90 or 180 degrees) with copper js but not Succeeded at all.
video
I'm working my code in meteor I leave a part of the code.
html part
<div class=" col-xs-6 ">
<div>
{{#if photo_2}}
<img class="img-responsive" src='{{photo_2}}' alt="" style="width:1531px;height:114px;"/>
{{else}}
<img class="img-responsive" src="/persona2.png" alt="" />
{{/if}}
</div>
<div class="col-xs-12">
<button type="" class="btn-default btn-picture btn" id="btn2"><i class="fa fa-plus plus" aria-hidden="true"></i></button>
</div>
</div>
<input type="hidden" id="photoid">
<input id="file-upload" style="display: none;" type="file" accept="image/*" />
<div id="snackbar">
<img class="img-responsive cameraphoto" id="cameraphoto" src="/camera-icon-55.png" alt="" />
<img class="img-responsive" id="explorer" onclick="$('#file-upload').click();" src="/camera-icon-56.png" alt="" />
<img class="img-responsive" id="delete" src="/delete.png" />
</div>
<div id="crops" style="display: none; background-color: black;height: 100vh;">
<canvas id="canvas" height="5" width="5" style="display: none;"></canvas>
<img id="target" style="max-width: 100%" />
<img id="targeted" style="max-width: 100%" />
<div style="position: absolute; margin-top: 145px; bottom: 20px; width: 100%;text-align: center;">
<center>
<img class="img-responsive" id="Save" src="/save.png" alt="" style="width: 48px;margin-left: -78px;"/>
<img class="img-responsive" id="cancel" src="/cancel.png" alt="" style="width: 54px;margin-left: 62px;margin-top: -50px;"/>
<image id="Browser" src=""/>
</center>
<input type="hidden" id="photoid">
</div>
<input type="hidden" name="imgX1" id="imgX1" />
<input type="hidden" name="imgY1" id="imgY1" />
<input type="hidden" name="imgWidth" id="imgWidth" />
<input type="hidden" name="imgHeight" id="imgHeight" />
<input type="hidden" name="imgrotate" id="imgrotate" />
<input type="hidden" name="imgscaleX" id="imgscaleX" />
<input type="hidden" name="imgscaleY" id="imgscaleY" />
</div>
javaScript code
'click .cameraphoto' : function(e , instance) {
var photoid = $('#photoid').val();
var options = {
width: 800,
height: 600,
};
MeteorCamera.getPicture(options, function (error, data) {
if (!error) {
$('#photos').hide();
$('#crops').show();
document.getElementById('target').src = "";
document.getElementById('target').src = data;
$('#target').cropper( {
aspectRatio: 1 / 1,
minCropBoxWidth : 150,
minCropBoxHeight :150,
crop: function(e) {
$('#imgX1').val(e.x);
$('#imgY1').val(e.y);
$('#imgWidth').val(e.width);
$('#imgHeight').val(e.height);
$('#imgrotate').val(e.rotate);
$('#imgscaleX').val(e.scaleX);
$('#imgscaleY').val(e.scaleY);
}
// cropper.rotate(instance.state.get("left"));
// rotateTo(instance.state.get("left"))
});
}
});
}
'change #file-upload' :function(e) {
$(".loader").fadeIn("slow");
encodeImageFileAsURL();
function encodeImageFileAsURL(){
var filesSelected = document.getElementById("file-upload").files;
if (filesSelected.length > 0) {
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
$('#photos').hide();
$('#crops').show();
$(".loader").fadeOut("slow");
document.getElementById('target').src = "";
document.getElementById('target').src = fileLoadedEvent.target.result;
$('#target').cropper( {
aspectRatio: 1 / 1,
minCropBoxWidth : 150,
minCropBoxHeight :150,
crop: function(e) {
$('#imgX1').val(e.x);
$('#imgY1').val(e.y);
$('#imgWidth').val(e.width);
$('#imgHeight').val(e.height);
$('#imgrotate').val(e.rotate);
$('#imgscaleX').val(e.scaleX);
$('#imgscaleY').val(e.scaleY);
}
});
}
fileReader.readAsDataURL(fileToLoad);}}
},
'click #Save' : function(e) {
$(".loader").fadeIn("slow");
e.preventDefault();
var photoid = $('#photoid').val();
var x1 = $('#imgX1').val();
var y1 = $('#imgY1').val();
var width = $('#imgWidth').val();
var height = $('#imgHeight').val();
var rotate = $('#imgrotate').val();
var scaleX = $('#imgscaleX').val();
var scaleY = $('#imgscaleY').val();
var canvas = $("#canvas")[0];
var context = canvas.getContext('2d');
var img = new Image();
img.src = $('#target').attr("src");
img.onload = function () {
canvas.height = height;
canvas.width = width;
context.drawImage(img, x1, y1, width, height, 0, 0, width, height);
var dataURL = canvas.toDataURL("image/jpeg");
//console.log('canvas',dataURL);
var photo = {
srcData : dataURL,
userid : Meteor.userId(),
photo_id : photoid
}
Meteor.call('updatePhoto',photo,function(err) {
if (!err) {
$('#photos').show();
$('#crops').hide();
$('#imgX1').val('');
$('#imgY1').val('');
$('#imgWidth').val('');
$('#imgHeight').val('');
$('#imgrotate').val('');
$('#imgscaleX').val('');
$('#imgscaleY').val('');
canvas.height = 0;
canvas.width = 0;
//page relod is better than
FlowRouter.go('/search');
FlowRouter.go('/addphoto');
}
});
}
},
'click #cancel' :function() {
$('#photos').show();
$('#crops').hide();
document.getElementById('target').src="";
FlowRouter.go('/search');
FlowRouter.go('/addphoto');
},
My solution was based on the following
'click #rotateL': function(e, instance){
$('#target').cropper('rotate', -90);
},
'click #rotateR': function(e, instance){
$('#target').cropper('rotate', 90);
},
'click #Save' : function(e) {
$(".loader").fadeIn("slow");
e.preventDefault();
var photoid = $('#photoid').val();
var canvas = $('#target').cropper('getCroppedCanvas');
console.log(canvas)
var dataURL = canvas.toDataURL("image/jpeg");
var photo = {
srcData : dataURL,
userid : Meteor.userId(),
photo_id : photoid
}
Meteor.call('updatePhoto',photo,function(err) {
if (!err) {
$('#photos').show();
$('#crops').hide();
canvas.height = 0;
canvas.width = 0;
//page relod is better than
//document.getElementById('target').src="";
FlowRouter.go('/search');
FlowRouter.go('/addphoto');
}
});
},
I have a Fiddle here...
I've accomplished the ability to get an image to load below the upload button, however, how can I upload multiple images to the same page? There are three places where I've allowed the user to upload a specific image.
<div class="element-file" title="Do you want to add an image to the Accreditation Text?">
<label class="title" style="font-weight: bold;">Add an image to the left of the Accreditation text<br>(Image will be resized to 100px by 100px)</label>
<label class="medium" >
<input type='file' onchange="readURL(this);" />
</label>
<p><strong>(Image will display below)</strong></p>
<div style="max-width: 100px; height: auto; border:1px dashed black;">
<img id="accred_image" src="accred" alt="" />
</div>
</div>
And add an image to this area...
<div class="element-file" title="Do you want to add an image to the Accreditation Text?">
<label class="title" style="font-weight: bold;">Would you like to add a logo image?</label>
<label class="medium" >
<input type='file' onchange="readURL(this);" />
</label>
<p><strong>(Image will display below)</strong></p>
<div style="max-width: 140px; height: auto; border:1px dashed black;">
<img id="blah" src="" alt="" />
</div>
</div>
This is my javascript, but when I upload an image, it places the same image in both spots. I thought this had something to do with the class I am uploading from, but creating the new class, doesn't seem to help at all.
$("input").change(function(e) {
for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {
var file = e.originalEvent.srcElement.files[i];
var reader = new FileReader();
reader.onloadend = function() {
$('#accred_image').attr('src', reader.result);
}
reader.readAsDataURL(file); }
});
You need to find that is the img to update.
Try this:
$("input").change(function(e) {
var elemIMG = $(this).parent().parent().find('img'); // find the img to update
for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {
var file = e.originalEvent.srcElement.files[i];
var reader = new FileReader();
reader.onloadend = function() {
elemIMG.attr('src',reader.result); // update the img src
}
reader.readAsDataURL(file); }
});
this is my html code
<div class="fileupload fileupload-new" data-provides="fileupload">
<div data-bind="if: imgSrc">
<div class="fileupload-new thumbnail" style="width: 150px; height: 150px;"></div>
</div>
<div data-bind="ifnot: imgSrc">
<div class="fileupload-new thumbnail" style="width: 150px; height: 150px;"><img src="${pageContext.request.contextPath}/resources/ui_resources/img/profile_pic.png" /></div>
</div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 150px; max-height: 150px; line-height: 20px;"></div>
<div>
<span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" data-bind=" file: imgFile, fileObjectURL: imgSrc"/></span>
Remove
</div>
</div>
and I am binding like
var Patientp = function () {
this.id = ko.observable(idValue);
this.name = ko.observable(nameValue);
this.address = ko.observable(addressValue);
this.gender = ko.observable(genderValue);
//this.consultant= ko.observableArray(consultantArrValue);
this.username = ko.observable(usernameValue);
this.password = ko.observable(passwordValue);
this.email = ko.observable(emailValue);
this.mobile = ko.observable(mobileValue);
this.imgFile = ko.observable(imgFileValue);
this.imgSrc = ko.observable(imgSrcValue);
this.imagePath=ko.observable(imagePathValue);
this.userid=ko.observable(useridValue);
//this.consultant= ko.observableArray(consultantArrValue);
this.consultant= ko.observable(consultantValue);
}
idValue = '4';
useridValue = '6';
nameValue = 'fri1';
addressValue = 'fri1';
genderValue = 'Male';
mobileValue = '1234567890';
//these fields are not available
usernameValue = 'fri1';
passwordValue = '';
emailValue = 'fri1#fri1.com';
imgFileValue = 'fri1';
imgSrcValue='http://socialtv.s3.amazonaws.com/EmzSqEmzSq.jpg'
//imgSrcValue = 'http://socialtv.s3.amazonaws.com/EmzSqEmzSq.jpg';
imagePathValue = 'fri1';
//consultantArrValue = null;//'fri1';
consultantValue="d1";
//var doc={};
var projectUrl=$('#projectUrl').val();
and this is the fiddle
The problem is the actual image is not showing the image area instead a blank div area is showing as shown in the screenshot
Can anybody please tell me how to show the image?
Do you mean that you want to add <img data-bind="attr: {'src': imgSrcValue}" /> inside thumbnail div, like:
<div data-bind="if: imgSrc">
<div class="fileupload-new thumbnail" style="width: 150px; height: 150px;">
<img data-bind="attr: {'src': imgSrcValue}" />
</div>
</div>
You are setting the src without using a binding, so it wont work properly.
You do it like this:
Js
var model = function () {
this.imgPath = ko.observable("http://jsfiddle.net/img/logo.png");
}
ko.applyBindings(model);
Html
<img data-bind="attr:{src: imgPath}"></img>
(Fiddle)