http://codepen.io/TheEnd/pen/mEzVAE
The link above is a jigsaw game i found on codepen. I wish to make the image that is the jigsaw to be an image uploaded by the user. So the jigsaw is an image they choose. I want to do this with Javascript i understand PHP may be easier but i want a javascript/jquery application. The code below is what i believe can solve this issue but i dont know how to implement it as a img src and bring both codes together any help would appreciated.
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">
<script>
function previewFile(){
var preview = document.querySelector('img'); //selects the query named img
var file = document.querySelector('input[type=file]').files[0]; //sames as here
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file); //reads the data as a URL
} else {
preview.src = "";
}
}
previewFile(); //calls the function named previewFile()
</script>
Related
I'm trying to add to localStorage the user-uploaded image and use it as persistent background-image of the page.
I already have here the feature to upload and change the background, but not the ability to save it to localStorage.. What's the way to do it?
Here's the code I have so far:
const frame = document.getElementById('frame');
const file = document.getElementById('file');
const reader = new FileReader();
const userUploadedBackground = document.getElementById('image');
const imgData = getBase64Image(userUploadedBackground);
localStorage.setItem("imgData", imgData);
reader.addEventListener("load", function() {
frame.style.backgroundImage = `url(${ reader.result })`;
}, false);
file.addEventListener('change', function() {
const image = this.files[0];
if (image) reader.readAsDataURL(image);
}, false)
#frame {
width: 200px;
height: 200px;
background-size: cover;
}
<input id='file' type='file' />
<div id='frame'></div>
Thank you in advance for any help.
To accomplish this, you would have to upload the photo somewhere and then store the url in local storage. Then you can load it using event listeners and apply to document.body.style in JS
So I'm working on a little project which has a little over 50 swf movies, and I wanted to be able to watch them like a normal human being (play, pause, rewind and all those good stuff).
Anywho, I've made all that happen..
The only thing I can't seem to get is changing the embed flash player dynamically, i.e the user chooses the .swf file to be shown instead of the path being hard-coded.
This is my code so far:
function changePlayerSrc()
{
var player = document.getElementById("flash_player_obj"); //selects the flash player object
var file = document.querySelector('input[type=file]').files[0]; //get the user's file
var reader = new FileReader();
reader.onloadend = function()
{
var clone = player.cloneNode(true); //cloned player
var res = reader.result; //user's file as blob
clone.childNodes[1].setAttribute('src', res); //change src
player.parentNode.replaceChild(clone, player);
}
reader.readAsDataURL(file);
}
<object id = "flash_player_obj">
<embed = "flash_player_embed"
name = "flash_player"
src = "H:\test.swf"
width = "100%"
height = "500"
play = "false"
loop = "false"
quality = "high"
scale = "showall"
/>
</object>
<input type="file" onchange="changePlayerSrc()" />
The above code just gives me a blank flash player with nothing playing.
I've also tried using reader.readAsArrayBuffer(file);
var res = reader.result;
var blob = new Blob([res], {type: "application/x-shockwave-flash"});
var url = URL.createObjectURL(blob);
And using the url as src for the embed, this just opens the save file dialog for some reason..
Also note that I'm not using any server side code, because there isn't any server to work with.
This script is running solely on a single .html file.
I am using following code to upload the image
$selectFile = $('<input type="file">').click();
$selectFile.change(function (e) {
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
$div.append('<figure class="images"><img src="'+ event.target.result +'" draggable="true" alt=""></figure>');
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
});
When I look at the event.target.result it contains something like data:image/jpeg;base64,/9j/4AAQSkZJRgAB
I am not sure if these are the image bytes? I am not very much familiar with HTML 5.
How do I get the image bytes so that i can store them into some hidden field.
The data after the "data:image/jpeg;base64," is a Base64 encoded version of the image. You can convert it to a byte array using:
var byteCharacters = atob(b64Data);
But I'm not sure why you'd want to, when the Base64 is fine for rendering an image anyway with :
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgAB...." >
I have a metro app (WinJS) in VS2012 which loads an image inside a by using an a from my local disk like which next function
function loadPictureFromFile(event) {
var selectedFile = event.target.files[0];
var reader = new FileReader();
imageElement = document.createElement("img"); //creates <img id="img"> element
imageElement.title = selectedFile.name; //set photo's name
reader.onload = function (event) {
imageElement.setAttribute("src", event.target.result); //picture's source
_divPicture.appendChild(imageElement); //Add's <img> element to Div element
};
reader.readAsDataURL(selectedFile);
}
but sometimes my image is too big to display on screen, it requires a scroll for viewing it completely, how to add it from javascript or WinJS after loading picture??
in your default.css simply add
body {
overflow-x:auto;
overflow-y:auto;
}
The idea is to take an image from a user's machine and allow them to display the image in a webpage. I do not want to send the image back to the server.
An upload button will exist. It should just update the page content dynamically.
Can this be done with HTML5 localstorage or anything?
FileReader is capable of doing this. Here's sample code:
<input type="file" id="files" name="files[]" multiple />
<img id="image" />
<script>
function onLoad(evt) {
/* do sth with evt.target.result - it image in base64 format ("data:image/jpeg;base64,....") */
localStorage.setItem('image', evt.target.result);
document.getElementById('image').src = evt.target.result;
};
function handleFileUpload(evt) {
var files = evt.target.files; // FileList object
for (var i = 0; i < files.length; i++) {
var f = files[i];
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
reader.onload = onLoad;
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileUpload, false);
var image = localStorage.getItem('image');
if (image !== null) {
document.getElementById('image').src = image;
}
</script>
Yeah absolutely, providing you have a cutting edge browser (Chrome or Firefox).
You want to use FileReader and readAsDataURL(). Take a look at the third example in this tutorial:
http://www.html5rocks.com/en/tutorials/file/dndfiles/