Is it possible to preserve other metadata by only changing orientation?
I am using https://github.com/blueimp/JavaScript-Load-Image
I have created following jsbin where when I replace head, it is losing orientation. Is there a way to fix this?
https://jsbin.com/cemeqeniru/2/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdn.jsdelivr.net/npm/exifr/dist/lite.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/5.14.0/load-image.all.min.js" integrity="sha512-HZg0q8NV+VTxnU6hdkK0rL+fSmTGCbXZ3mHjqCCi87St5QRdvXENfRxkMK692inskRsCPee07d7VwcKNWaByCQ==" crossorigin="anonymous"></script>
<script>
function onCameraCapture(file) {
document.getElementById('original').src = window.URL.createObjectURL(file);
loadImage(
file,
function (img, data) {
if (data.imageHead) {
img.toBlob(function (blob) {
loadImage.replaceHead(blob, data.imageHead, function (newBlob) {
document.getElementById('converted').src = window.URL.createObjectURL(newBlob);
// do something with the new Blob object
})
}, 'image/jpeg')
}
},
{ meta: true, canvas: true, orientation: 1 }
);
}
</script>
</head>
<body>
File
<input type="file" accept="image/*" capture="camera" onchange="onCameraCapture(this.files[0])">
<br>
<br>
Take Photo
<input type="file" accept="image/*" capture="camera" onchange="onCameraCapture(this.files[0])">
<br>
<br>
Original
<img id="original" src="" width="100" height="100">
<br>
Converted
<img id="converted" src="" width="100" height="100">
</body>
</html>
LoadImage provides method to change only particular value.
loadImage.writeExifData(data.imageHead, data, 'Orientation', 1);
Related
I want to show an image and a title when I click the button. I created a form to do it. It's only working to show "Title". Image is not showing. Here is the my code, please help me.
function showImage()
{
document.getElementById('showTitle').innerHTML=document.getElementById('imgTitle').value;
document.getElementById('showImage').innerHTML=document.getElementById('imagP').value;
}
<!-- Input Area-->
<input type="text" id="imgTitle"/>
<input type="file" id="imagP"/>
<button onclick="showImage()" >Show Image</button>
<!-- Show Image & Title-->
<p id="showTitle"></p>
<img src="" id="showImage">
<!-- JavaScript Code-->
You need to use FileReader to read the uploaded file.
function showImage() {
document.getElementById('showTitle').innerHTML=document.getElementById('imgTitle').value;
var preview = document.querySelector('#showImage');
var file = document.querySelector('#imagP').files[0];
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
<input type="text" id="imgTitle"/>
<input type="file" id="imagP"/>
<button onclick="showImage()" >Show Image</button>
<!-- Show Image & Title-->
<p id="showTitle"></p>
<img src="" id="showImage">
here is we use fileChange function on each time you change file.
and add style of display none to img tag where we want to show image, so we can show/hide image on Show Image button click.
let file = null;
function showImage() {
document.getElementById('showTitle').innerHTML = document.getElementById('imgTitle').value;
const showImage = document?.getElementById('showImage');
showImage.style?.display = 'block';
showImage.src = window?.URL?.createObjectURL(file);
}
const fileChange = (fileObj) => {
document.getElementById('showTitle').innerHTML = '';
const showImage = document.getElementById('showImage');
showImage.style.display = 'none';
file = fileObj.target.files[0]
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#editable {
width: 400px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<input type="text" id="imgTitle" />
<input type="file" id="imagP" onchange="fileChange(event)" />
<button onclick="showImage()">Show Image</button>
<!-- Show Image & Title-->
<p id="showTitle"></p>
<img src="" id="showImage" style="display:none">
</body>
</html>
Simplest way to achieve it as below
function showImage()
{
document.getElementById('showTitle').innerHTML=document.getElementById('imgTitle').value;
if(document.getElementById('imagP').files[0] != null) {
document.getElementById('showImage').src=URL.createObjectURL(document.getElementById('imagP').files[0]);
} else {
alert("please select the image")
}
}
<input type="text" id="imgTitle"/>
<input type="file" id="imagP"/>
<button onclick="showImage()" >Show Image</button>
<!-- Show Image & Title-->
<p id="showTitle"></p>
<img src="" id="showImage">
I'm making an image gallery using vanilla JavaScript. I'm trying to make it so that clicking on a thumbnail will change the srcattribute in the img tag with the class gallery-highlight, updating the image shown to the user. But when I open my HTML file in Firefox and click on an image thumbnail, it does nothing. My JavaScript doesn't seem to be doing anything to the page. How can I fix this?
Here's what I've got:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width-device-width, initial-scale-1.0" />
<title>Image Gallery</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js"></script>
</head>
<body>
<img src="./efrain-big.jpg" class="gallery-highlight" alt="" />
<div class="room-preview">
<img src="./efrain-small.jpg" alt="" />
<img src="./heather-small.jpg" alt="" />
<img src="./jimmy-small.jpg" alt="" />
</div>
</body>
</html>
function imageGallery() {
const highlight = document.querySelector(".gallery-highlight");
const previews = document.querySelectorAll(".room-preview img");
previews.forEach(preview => {
preview.addEventListener("click", function() {
const smallSrc = this.src;
const bigSrc = smallSrc.replace('small', 'big');
highlight.src = bigSrc;
});
});
}
imageGallery();
I think the problem is with the way you organized your project. From what can i see ( the HTML code) you happen to have all the files in one folders. No subfolders for js and css. If that’s not the case you need to fix the src of js in the script tag .
Just beginning to learn HTML & Javascript.
I have the following code, which works. however, because I have have an img tag in my body it is trying to show a place holder for an image before I click the button. How can I stop this.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tesco JSONP</title>
<script type="text/javascript">
function picture(){
var pic = "http://img.tesco.com/Groceries/pi/118/5000175411118/IDShot_90x90.jpg"
document.getElementById('bigpic').src = pic.replace('90x90', '225x225');
}
</script>
</head>
<body>
<img id="bigpic" src="bigpic" />
<button onclick="picture()">Enlarge</button>
</body>
</html>
Best wishes.
Add style "display:none" to picture tag
<img id="bigpic" src="bigpic" style="display:none;"/>
And in function picture change it for show image
document.getElementById('bigpic').style.display='block';
There is demo: http://jsfiddle.net/eX5kx/
Use display property in css, try this:
javascript:
function showPicture() {
var sourceOfPicture = "http://img.tesco.com/Groceries/pi/118/5000175411118/IDShot_90x90.jpg";
var img = document.getElementById('bigpic')
img.src = sourceOfPicture.replace('90x90', '225x225');
img.style.display = "block";
}
html:
<img style="display:none;" id="bigpic" src="bigpic" />
<button onclick="showPicture()">Enlarge</button>
I like shin solution, i would do the same thing myself. However theres a lot of way to do that, another option is to put a tiny trasparent image as default and then replace like you did to the other one. like this:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tesco JSONP</title>
<script type="text/javascript">
function picture(){
var pic = "http://img.tesco.com/Groceries/pi/118/5000175411118/IDShot_90x90.jpg"
document.getElementById('bigpic').src = pic.replace('90x90', '225x225');
}
</script>
</head>
<body>
// tiny trasparent image
<img id="bigpic" src="https://maps.gstatic.com/mapfiles/markers2/dd-via-transparent.png" alt="" />
<button onclick="picture()">Enlarge</button>
</body>
</html>
this way no css is needed but like i said before i prefer Shin's solution.
So I have this code (below) that will replace one image. I need this to be modified so it will replace four separate images, and is triggered after a button (image) is clicked.
Can someone help me do this, and also make it so it is triggered after clicking a button (image). Thanks x
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
$(document).ready(function() {
function callback(imageLoader){
$('#image').attr('src', imageLoader.nextImage());
}
function ImageLoader(images){
this.images = images;
this.current = 0;
this.nextImage = function(){
this.current = (this.current+1) % this.images.length;
return this.images[this.current];;
}
}
imageLoader = new ImageLoader(['img/wallpaper/2.png', 'img/wallpaper/3.png', 'img/wallpaper/6.png', 'img/wallpaper/10.png']);
});
</script>
</head>
<body>
<img id="image" src="img/wallpaper/1.png">
</body>
</html>
If it helps here is my Design
It's hard to understand what you're trying to do here, but it does seem like a complicated way to swap out some images? Maybe something more like this would be easier :
$(document).ready(function() {
var images = ['img/wallpaper/2.png',
'img/wallpaper/3.png',
'img/wallpaper/6.png',
'img/wallpaper/10.png'
];
$('#buttonID').on('click', function() {
$('.image').attr('src', function(i, src) {
return images[i];
});
});
});
example HTML:
<body>
<img class="image" src="img/wallpaper/1.png" />
<img class="image" src="img/wallpaper/4.png" />
<img class="image" src="img/wallpaper/7.png" />
<img class="image" src="img/wallpaper/9.png" />
<input type="button" id="buttonID" value="Change images" />
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var imageLoader;
function ImageLoader(images)
{
this.images = images;
this.current = 0;
this.nextImage = function()
{
this.current = (this.current+1) % this.images.length;
return this.images[this.current];
}
}
$(document).ready(function()
{
imageLoader = new ImageLoader(
[
'img/wallpaper/2.png',
'img/wallpaper/3.png',
'img/wallpaper/6.png',
'img/wallpaper/10.png'
]);
$('#change').on('click', function()
{
$('#image').attr('src', imageLoader.nextImage());
});
});
</script>
</head>
<body>
<img id="image" src="img/wallpaper/1.png">
<input type="button" id="change" value="Change" />
</body>
</html>
OK I have a simple script at http://kleague.org/test/
Type a movie name and it should output the movie name, year, and get the movie poster URL (if there is one, there usually is.)
Well, I just tried it and I got a 403 error on the image. it GOT the image but it didn't display it. What am I doing wrong?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>IMDB api</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#search').click(function(){
$(".loading").css("display", "inline");
var yourMovie = $("#movie").val();
$("#debug").append("You are searching for ... "+yourMovie+"\n");
dataString = "callback=?&t=" +yourMovie;
$.getJSON('http://www.imdbapi.com/', dataString, function(html){
$(".loading").css("display", "none");
var movieSugg = html.Title;
var movieYear = html.Year;
var movieImg = html.Poster;
$("#movieposter").attr("src", movieImg);
$("#movieposter").css("display", "inline");
$("#more").append("You found: " + movieSugg + " ("+movieYear+") ["+movieImg+"] \n");
});
});
});
</script>
</head>
<body>
<img src="" alt="Poster" id="movieposter" style="display: none;float:left;margin-right:10px;" />
<form method="get" action="#" enctype="text/html" >
<input type="text" id="movie" maxlength="50" /> Search now! <img alt="Searching..." style="display: none;" class="loading" src="ajax-loader.gif" title="Searching..." />
</form>
<div id="other">
Trigger the handler
</div>
<br />
<textarea id="debug" style="width: 500px;height:150px;border:1px solid black;font-face:typewriter;"></textarea><br />
<textarea id="more" style="width: 500px;height:150px;border:1px solid red;font-face:typewriter;"></textarea>
</body>
</html>
JSONP requires a function/script to be returned. Loading an image through AJAX has no use. Just appending the image itself will do the trick.
<img src="{html.poster here}" />