I'm aware that this simply achieved by inserting
<input type="file" id="photo" accept="image/*;capture=camera">
what I'm having trouble with (due to my lack of proper coding skills) is actually grabbing and putting to use the image the user selects/takes.
Specifically, I want an iPad user to be able to grab an image which will be rendered on the page according to CSS. Once an image is there, I then want them to be able to replace that image with another if they need to.
Sounds simple enough but, once captured, I can't write the code I need to reference the image and manipulate it.
By the way, this is for an in-house project and so permissions etc. are irrelevant.
Thanks in advance.
Messing with this today with some help off the web, I came up with the following which works and also changes the text of the button once an initial image has loaded.
<div id="zeroDiv">
<input type="file" id="getPic" accept="image/*">
</div>
<div id="picWrapper">
<img id="image">
<div id="buttDiv">
<button id="picButt"><span class="buttText">Insert image</span>
</button>
</div>
</div>
and the JQuery/JavaScript:
$('#picButt').click(function () {
$('#getPic').trigger('click');
});
$(document).ready(function () {
$("#getPic").on("change", gotPic);
$("#image").load();
});
function gotPic(event) {
$("#image").attr("src", URL.createObjectURL(event.target.files[0]));
$("#picButt span").text("Change image");
}
working fiddle with CSS at http://jsfiddle.net/1rg5Lyyk/4/
I'm now looking for a way to store the image in local storage once it's captured so that when the user moves away from the page and returns, the image returns too. But that's a different question!
Related
I'm working on a feature, in which images are being rendered from the servers. I was working on aligning the images but found that there is a lot of white space. This was the reason, due to loading of images with a broken link.
HTML :
<div class="image-result" *ngIf="Display('images')">
<div class="col-sm-3" *ngFor="let item of items$|async">
<a href="{{item.link}}">
<figure>
<img class="res-img" src="{{item.link}}" onerror="this.style.display='none'">
</figure>
</a>
</div>
</div>
I have used onerror="this.style.display='none'" to solve the problem, but leaves a lot of white space when images are being loaded from the server. Is there any solution for it like to remove img tag whenever a image with a broken link has been detected ? I have gone through stackoverflow before asking question, but I'm not able to solve this problem. It would be great if someone can help me out. Thanks! :)
Instead of onerror="this.style.display='none'" to hide an image, you can use onerror="this.parentNode.removeChild(this)" to remove the image tag altogether.
If you want to remove the entire column, in your specific case you can do the following.
var colEl = this.parentNode.parentNode.parentNode;
colEl.parentNode.removeChild(colEl);
Or, in your HTML:
onerror="this.parentNode.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode.parentNode)"
You should probably move that to some JavaScript function and attach your handler by saying
element.addEventListener('error', function() { /* ... */ });
References: parentNode, removeChild, addEventListener.
If you don't care about supporting Internet Explorer, you can also use remove instead of doing the parentNode.removeChild trickery. That would be particularly useful for reducing the code length in your onerror attribute, would you choose to use it, but I don't recommend that.
A more angular-way of doing this would be:
<img src="{{item.link}}" (error)="item.brokenImage=true">
So you would have:
<div class="col-sm-3" *ngFor="let item of items$|async">
<div *ngIf="!item.brokenImage">
<a href="{{item.link}}">
<figure>
<img class="res-img" [src]="item.link" (error)="item.brokenImage=true">
</figure>
</a>
</div>
</div>
You need to listen for the error event of the image element, and assign a boolean on whether the image loaded successfully or not. Then, depending on that value angular will either show the image with the div, or remove it from the DOM.
I want to change the image src on hover with javascript, but here is the twist
Here is my HTML
<div class="foo">
<div class="foo-2">
<form>
<input type="image" src="I want to change this on hover">
</form>
</div>
</div>
I reviewed the ansewr of this question CSS: Change image src on img:hover
here is a quote of the answer:
"
And if you think you can use some javascript code then you should be able to change the src of the img tag as below
function hover(element) {
element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}
function unhover(element) {
element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}
and the html be
img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />
It is helpful, but I'm really having trouble targeting the type image in my code, so that I can change it with javascrit.
I don't think changing source on hover is such a great idea. why? the images need to load and they can take relative long time to load and confuse the user if nothing happens within the 1. second.
it'd be better if you pre-load both images and then use css to hide/show the correct image on hover. this way it will show instantly.
I have a bit of what seems like a complicated issue(to me at least)
I've got an external javascript file generating html content for me. It's for tweets. It gives each one a individual ID, which I can see in the browser but of which is obviously not in my index.html.
The JS generates something like this in the browser http://i.imgur.com/8yxLYBa.png
Heres the generated div
<div class="twitter-article" id="tw1"><div class="twitter-pic"><img src="https://pbs.twimg.com/profile_images/461533054800900097/5h4n1K31_normal.jpeg" twitter-feed-icon.png"="" width="42" height="42" alt="twitter icon"></div><div class="twitter-text"><p><span class="tweetprofilelink"><strong>JGD</strong><br> #jdrawsthings</span></p><b><span class="tweet-time"></span></b><d>2h, Glasgow. Favorites: 0 Retweets: 0</d><br><c>Literally desperate and just need to secure a nice room in a nice flat close to DJCAD so I can move in June 20th</c></div><div class="favourite-item" id="fav1"><button class="favouriteButton" id="favBut1"></button></div><div id="twitter-actions" style="opacity: 0; margin-top: -20px; display: none;"><div class="intent" id="intent-reply"></div><div class="intent" id="intent-retweet"></div><div class="intent" id="intent-fave"></div></div></div>
Each one has a button assigned to it, which each also have individual IDs.
I'm wanting to use the clone function to copy across the contents of say, '#tw1' into '#faveDiv'. #faveDiv been a div on my index.html page.
<div id="favouriteStreamHolder">
<div id="favouriteStream" style="display: none;">
<div id="faveDiv"></div>
</div>
</div>
Here is the clone function I'm trying
$("input#favBut1").live( 'click', function(){
$('#faveDiv').html($('#tw1').html());
});
There's to much going on that relies on PHP that putting it into a simulator wouldn't achieve anything. Basically, that JS creates this. i.imgur.com/8yxLYBa.png A stream of 25 tweets of which the content is created in that js function having been pulled from a JSON file. I'm under the assumption that the .clone() function should copy all within the div and duplicate it into the div ive specified. At the moment. It's doing nothing, the div is just empty. Bit new to this, sorry. If theres anything else you need to know. Just say.
Any idea why this isn't working?
Try this (pattern)
html
<div id="favouriteStreamHolder">
<div id="favouriteStream">
<div id="faveDiv"></div>
<!--
duplicate `favBut1` in `feedHTML`,
substitute `id` `feed` for `favBut1`
-->
<input type="button" id="feed" value="click" />
</div>
</div>
js
$(function () {
// var feedHTML = `$.parseHTML(feedHTML)`
var feedHTML = $.parseHTML('<div class="twitter-article" id="tw1">..</div>');
$(document).on("click", "#feed", function (e) {
e.preventDefault();
$(e.target).siblings("#faveDiv").html($(feedHTML));
});
})
jsfiddle http://jsfiddle.net/guest271314/ReK9u/
Hopefully someone can help me. I'm using a JS image compare script which shows two images to be shown side by side and the user can compare them. It works like this:
<div id="container1">
<!-- The before image is first -->
<img id="img" src=" http://placehold.it/400x200&text=1" />
<!-- The after image is last -->
<img id="img-alt" src="http://placehold.it/400x200&text=2" />
</div>
The script pulls the first img as the left image, and the second img as the right image. I've added two IDs because I've set up buttons and I'd like them to changeImage on either side so the two images aren't static, and multiple images can be selected and compared from a thumbnail gallery (per the user's selection).
I found some code on here, which will affect the left side just fine. I've also added a button that will allow the left side to be changed.
<script type="text/javascript">
function changeImage(a) {
document.getElementById("img").src=a;
}
</script>
And the HTML:
Left side:
<button onclick='changeImage( "http://placehold.it/400x200&text=Left" );'>Left</button>
<button onclick='changeImage( "http://placehold.it/400x200&text=Left2");'>Left2</button>
Now, I'd like to create another set of buttons that affects the "img-alt" class as shown in the slider HTML - this would affect the right side. I have somewhat limited knowledge with Javascript, and if I add another script with "document.getElementById("img-alt").src=a;" nothing changes on the right side. Basically, I'd like buttons that affect the right side like so:
Right side:
<button onclick='changeImage( "http://placehold.it/400x200&text=Right");'>Right</button>
<button onclick='changeImage("http://placehold.it/400x200&text=Right2");'>Right2</button>
How can I associate these buttons to affect the 'img-alt' ID (second image)?
I hope this makes sense. Please let me know if I need to clarify anything.
Thanks!
I'm not quite sure that it is what do you expect but please take a look at example I've made -> jsfiddle
changeImage = function(elemId, source) {
document.getElementById(elemId).src=source;
}
<button onclick='changeImage("img-alt", "http://placehold.it/400x200&text=Right");'>Right</button>
<button onclick='changeImage("img", "http://placehold.it/400x200&text=Left" );'>Left</button>
I am buidling a small image navigator where the user inserts an image number and it has to load in the page so he can view it and do some processing on it later.
The images will be physically named 1,2,3,4,5.jpg for example.
Any quick code that i can use to make the corresponding image load
I know this is fairly simple - but i am pretty tight on deadline and would appreciate some code that works
thanks a lot in advance
OK, use jquery. It is easy
Here is an example
HTML
<input type="text" id="imagenum" />
View Image
<img class="previewimage" src="">
The Script
$(document).ready(function() {
$(".viewimage").click(function() {
$(".previewimage").attr('src', "imagetopath\"+$("#imagenum").val()+".jpg");
});
//To catch the enter key
$('#imagenum').keypress(function(event) {
if (event.keyCode == '13') {
$(".previewimage").attr('src', "imagetopath\"+$(this).val()+".jpg");
}
});
});
<img src="<?php print $ImgValue; ?>">
seems to work as an alternative to JQuery.
any other solution ?