adding image file to change background image in javascript - javascript

So hi hello there first of all...
I ran into a little problem and am having a tough time trying to figure it out.
So basically what i am trying to do is be able for the user to click on a button that will allow them to select an image and after that it will grab the url of that image locally and change the background image of a div.
Now i am using the window variable but thinking about trying this out without it and just having the event listener do its thing. But havent tested that out kinda of feel like that wont work.. just a thought. but anyways, this works for when i only have one event listener target the button but if i do 2 then it gives me a security warning telling me that it may not load data from the blob... any idea of how to proceed with the vision?
Below is the html code:
<h3 class="m-heading">Project</h3>
<div class="projectIMG">
<input type="file" id="projectImgBtn">
</div>
Below is the javscript
window.addEventListener('load', function(){
fileButton.addEventListener('change', function(){
if(this.files && this.files[0]){
const background = document.querySelector('.insertImage');
console.log(background)
// console.log(background.style.backgroundImage)
background.style.backgroundImage = `url('${URL.createObjectURL(this.files[0])}')`
background.onload = imageLoaded;
}
})
projectImg.addEventListener('change', function(){
if(this.files && this.files[0]){
const background = document.querySelector('.projectIMG')
console.log(background)
background.style.backgroundImage = `url('${URL.createObjectURL(this.files[0])})`
background.onload = imageLoaded
}
})
})
This is the full error

yout need to get the base64 for put it in the background.
Try this:
const reader = new FileReader();
reader.onload = e => variable = e.target.result;
reader.readAsDataURL(this.files[0]);

Related

jQuery image uploader with localStorage. Partially working. Default image not showing

I am working on a admin feature for company control panel. The widget I am trying to create is for admin's to replace the default logo on the control panel with their own company logo.
I'm using localStorage for proof of concept but it will be saved into database and CMS at production.
I have the basics working in terms of uploading a new image/logo and replacing the default. However, we are pre-seeding the control panel header with an "out of box" default logo. For some reason, the default logo does not show up when page is first loaded. You currently get a broken image icon. Once you upload a new image it replaces the header logo and keeps the current selection in the admin widget.
If you refresh page it recalls this from localStorage which is working just fine but if you reset, you will notice that the pre-seeded logo does not appear.
var img = new Image();
img.src = localStorage.theImage;
$('.logoArea').html(img);
$("body").on("change", ".uploadLogo", function() {
var fileInput = $(this)[0];
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function(e) {
// CREATE A NEW IMAGE
var img = new Image();
img.src = reader.result;
localStorage.theImage = reader.result; // STORE IMAGE IN LOCAL STORAGE
$(".logoArea").html(img);
}
reader.readAsDataURL(file);
});
Not sure where I'm going wrong. Please see fiddle for working model
Update: This was resolved and I updated fiddle below to working version in case it helps anyone else out.
https://jsfiddle.net/evmcatj1/7/
On the first Load the localStorage.theImage; is undefined you should use a default image in case is the first time that the user opens the page

How to display an image that hasn't been uploaded yet?

at first I need to apologize for my English, I'm not a good speaker.
But here's my problem:
I made an application, where you can edit questions for a game. These questions are on a server. You download a question and they are edited locally. At the end of the session you upload your question.
These questions should also contain images.
Therefore I made a little form, which saves the image to an image-heap as a FormData-Object.
This Form-Data Object is being saved into another Object.
Here's an example of how I do this:
var formDataTemp = new FormData();
var qcid = // given Id
if($('#editImageFileInput')[0].files[0] != undefined) {
formDataTemp.append("img", $('#editImageFileInput')[0].files[0]);
questionImageCache.push({
qcid: qcid, img: formDataTemp
});
}
There is more Data in the object, but i removed it to keep it simple.
There is also a list of all the questions the user has already downloaded. There he can switch from one question to another.
Now I want to display this image when the particular question comes up again. How can I do this without uploading it? Is there a way to display the image out of the javascript-object?
I don't know exactly how your code works, but this is how you can display an image before it is uploaded, using FileReader.
Javascript:
function loadImg(input) {
if (!input.files || !input.files.length) return null;
var fReader = new FileReader();
var img = $('#placeholder');
fReader.onload = function(e) {
$(img).attr('src', e.target.result);
};
fReader.readAsDataURL(input.files[0]);
}
HTML:
<input type='file' onchange="loadImg(this);" />
<img id="placeholder" src="#" alt="your image" />
JSFiddle example.
You can take the concept from this snippet and apply it to your own project :)

Detect image input loading

I was using this code:
<input type="image" ... onLoad="this.style.opacity = 1" />
It works fine in IE (at least, the versions that support opacity :p) but in Chrome the onLoad event did not fire when the image loaded.
Note that the src attribute of the input can change, and when it does some JavaScript sets the opacity to 0 first, and suitable transition properties make it look like the image fades out and the new one fades in. Also, use of <input type="image"> is required because the server needs the coordinates.
I have jerry-rigged it using an absolutely-positioned <img> taking the onLoad and opacity, placed behind the <input> that now uses a transparent GIF pixel. While it works, it's ugly.
Is there any way to detect the successful loading of an image used in an <input> in Chrome, or is this like background-image, undetectable?
EDIT: In case it helps, here's a Fiddle
This is sort of a hack, but you can instantiate a Javascript Image object, and then set the event listener on that and then set the src of the input when it's done loading:
http://jsfiddle.net/t8n4y/
Disclaimer: only tested on Chrome
HTML:
<input type="image" id="imgInput" />
Javascript:
var photo = document.getElementById('imgInput');
var img = new Image();
img.addEventListener('load', function () { alert("done loading"); }, false);
img.src = 'http://jeremydouglass.com/gamertextually/images/gt_snowflake_tags-2-ach-large.png?ran=' + Math.random();
photo.src = img.src;
I remember I ran into a problem like this in the past. You can detect it by doing the following:
window.onload = function(){
var input = document.getElementById('input1');
input.src='';
input.addEventListener('load', loadImage, false);
input.src = 'http://theoffguard.net/wp-content/upLoads/2012/04/Nick-Cage.jpg';
}
function loadImage()
{
console.log("Image is loaded");
}
DEMO:
http://jsbin.com/ufovom/9/edit
Hope this helps!
<input id="image" type="image" ... onLoad="this.style.opacity = 1" />
//script ->
$("#image").change(function () {
if (this.files && this.files[0]) {
var FR = new FileReader();
FR.onload = function (e) {
//your onload
};
FR.readAsDataURL(input.files[0]);
}
});
You can use the addEventListener() method with a reference of your input.
Notice that before add the event listener to the input you'll need to let the page to load, for do it, just apply another event listener for the window object and then fire your function that reference your input.

Determine when an image has loaded in svg with RaphaelJS

I'm trying to work out how to determine when an svg image has loaded in the browser. I'm using Raphael JS and I've tried:
var image = paper.image(path, 0,0,10,10);
image.node.addEventListener('load', function(){alert("test");});
and:
$('image').on('load')
all to no avail. I've also used "onload" and "onsvgload" none of which work.
Is there away to determine if an svg image has actually loaded?
I even tried loading the image using an Image() object and then calling paper.image() - but I get two calls to the image (instead of using the preloaded image);
ie:
var preload = new Image();
preload.src = imgPath;
preload.addEventListener('load', function () {
image.path = preload.src;
//Now load image in raphael - except this still forces the browser to make another call for the image
});
Any ideas?
Using the onLoad event handler works, with one additional line of code:
var image = paper.image(path, 0,0,10,10);
var image_node = image.node;
image_node.setAttribute('externalResourcesRequired','true');
image_node.addEventListener("load", function() {
console.log("image is loaded!");
})
You need to set the externalResourcesRequired attribute to true. You may read more about it here: http://www.w3.org/TR/SVG/struct.html#ExternalResourcesRequired

Proper way to reset a GIF animation with display:none on Chrome

Title is self-explanatory, but I'll provide a step-by-step view on the matter. Hopefully I'm not the first one to have noticed this (apparently) bug on Webkit/Chrome.
I want to reset a GIF animation. All of the examples I've seen so far either simply set the src of the image to itself or set it to an empty string followed by the original src again.
Take a look at this JSFiddle for reference. The GIF resets perfectly fine on IE, Firefox and Chrome.
The issue which I have is when the image has display:none on Google Chrome only.
Check this JSFiddle. The GIF resets fine on IE and Firefox before being displayed in the page, but Chrome simply refuses to reset its animation!
What I've tried so far:
Setting the src to itself as in Fiddle, doesn't work in Chrome.
Setting the src to an empty string and restoring it to the default, doesn't work either.
Putting an wrapper around the image, emptying the container through .html('') and putting the image back inside of it, doesn't work either.
Changing the display of the image through .show() or .fadeIn() right before setting the src doesn't work either.
The only workaround which I've found so far is keeping the image with its default display and manipulating it through .animate()ing and .css()ing the opacity, height and visibility when necessary to simulate a display:none behaviour.
The main reason (context) of this question is that I wanted to reset an ajax loader GIF right before fading it in the page.
So my question is, is there a proper way to reset a GIF image's animation (which avoids Chrome's display:none "bug") or is it actually a bug?
(ps. You may change the GIF in the fiddles for a more appropriate/longer animation gif for testing)
The most reliable way to "reset" a GIF is by appending a random query string. However this does mean that the GIF will be redownloaded every time so make sure it's a small file.
// reset a gif:
img.src = img.src.replace(/\?.*$/,"")+"?x="+Math.random();
Chrome deals with style changes differently than other browsers.
In Chrome, when you call .show() with no argument, the element is not actually shown immediately right where you call it. Instead, Chrome queues the application of the new style for execution after evaluating the current chunk of JavaScript; whereas other browsers would apply the new style change immediately. .attr(), however, does not get queued. So you are effectively trying to set the src when the element is still not visible according to Chrome, and Chrome won't do anything about it when the original src and new src are the same.
Instead, what you need to do is to make sure jQuery sets the src after display:block is applied. You can make use of setTimeout to achieve this effect:
var src = 'http://i.imgur.com/JfkmXjG.gif';
$(document).ready(function(){
var $img = $('img');
$('#target').toggle(
function(){
var timeout = 0; // no delay
$img.show();
setTimeout(function() {
$img.attr('src', src);
}, timeout);
},
function(){
$img.hide();
}
);
});
This ensures that src is set after display:block has been applied to the element.
The reason this works is because setTimeout queues the function for execution later (however long later is), so the function is no longer considered to be part of the current "chunk" of JavaScript, and it provides a gap for Chrome to render and apply the display:block first, thus making the element visible before its src attribute is set.
Demo: http://jsfiddle.net/F8Q44/19/
Thanks to shoky in #jquery of freenode IRC for providing a simpler answer.
Alternatively, you can force a redraw to flush the batched style changes. This can be done, for example, by accessing the element's offsetHeight property:
$('img').show().each(function() {
this.offsetHeight;
}).prop('src', 'image src');
Demo: http://jsfiddle.net/F8Q44/266/
Just because I still need this every now and then I figured the pure JS function I use might be helpful for someone else. This is a pure JS way of restarting an animated gif, without reloading it. You can call this from a link and/or document load event.
<img id="img3" src="../_Images/animated.gif">
<a onClick="resetGif('img3')">reset gif3</a>
<script type="text/javascript">
// reset an animated gif to start at first image without reloading it from server.
// Note: if you have the same image on the page more than ones, they all reset.
function resetGif(id) {
var img = document.getElementById(id);
var imageUrl = img.src;
img.src = "";
img.src = imageUrl;
};
</script>
On some browsers you only need to reset the img.src to itself and it works fine. On IE you need to clear it before resetting it. This resetGif() picks the image name from the image id. This is handy in case you ever change the actual image link for a given id because you do not have to remember to change the resetGiF() calls.
--Nico
This solution preloads the gif and takes it out of the dom and then back in the src (thus avoiding another download)
I just tested it using jquery to remove the attribute and it works fine.
Example:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
$('.reset').click(resetGif);
function resetGif()
{
$('.img1').removeAttr('src', '');
}
});
</script>
</head>
<body>
<img class="img1" src="1.gif" />
reset gif
</body>
</html>
This seemed to work for me in Chrome, it runs each time just before I fade in the image and clears then refills the src and my animation now starts from the beginning every time.
var imgsrc = $('#my_image').attr('src');
$('#my_image').attr('src', '');
$('#my_image').attr('src', imgsrc);
I've a button with the an animated no-loop image in it. I just reload the image with some jquery and this seems to be working for me.
var asdf = $(".settings-button img").attr("src");
$(".settings-button img").attr("src", "").attr("src", asdf);
here's my hack for background images:
$(document).on('mouseenter', '.logo', function() {
window.logo = (window.logocount || 0) + 1;
var img = new Image();
var url = "/img/mylogimagename.gif?v=" + window.logocount;
var that = this;
$(img).load(function(){
$(that ).css('background-image','url(' + url + ')');
});
img.src = url;
});
I experienced problems with all of the above solutions. What finally worked was replacing the src temporarily with a transparent 1px gif:
var transparent1PxGif = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
var reloadGif = function(img) {
var src = img.src;
img.src = transparent1PxGif;
img.offsetHeight; // triggers browser redraw
img.src = src;
};
It's been several years and I've decided to revisit this since we have a number of new options at our disposal.
The issue with my previous answer is that it forces a re-download of the GIF every single time you want to re-start it. While that's fine for small files, it's still an overhead that's best avoided if possible.
With that in mind, I've got a new solution that uses AJAX to download the GIF once, and then converts it into a data URL (via a FileReader) and uses that as the source with a random query string attached.
This way, the browser only ever downloads the image once, and can even cache it properly, and the "reset" pulls from that pre-downloaded resource.
The only catch, of course, is that you have to make sure it's properly loaded before you can use it.
Demo: http://adamhaskell.net/misc/numbers/numbers.html
Relevant code:
var url = "something.gif"; // fallback until the FileReader is done
function setup() {
var xhr = new XMLHttpRequest();
xhr.open("GET",url,true);
xhr.responseType = "blob";
xhr.onreadystatechange = function() {
if( this.readyState == 4) {
var fr = new FileReader();
fr.onload = function() {
url = this.result; // overwrite URL with the data one
};
fr.readAsDataURL(this.response);
}
};
xhr.send();
}
function getGIF() {
return url+"?x="+Math.random();
}
Reset gif animation
When the browser render img, the source specified in src attribute is cached into memory for future reuse. This allows to increase the speed of page loading/reloading, as well as reduce the load on the network. And this behavior suits mostly everyone, because in reality, this is the most optimal and demanded option.
However, as always, there are exceptions. I came up with a dataUrl-based animation update option that solves several problems.
Issues solved:
Need to display gif images with animation without a loop (loop = 1), which may have the same src. But when one such picture appears, it is necessary that it play the animation without changing the animation of other pictures with the same src. The same picture should be loaded from server only once. Stackoverflow
Reset gif animation.
Start animation on hover
Reset src attribute
If we use a solution that clears the src attribute of an image, then all images with the same source will replay their animation. Unfortunately, I still did not fully understand why this is happening, but it interferes with correct work.
Cons
Reset animation of all images with the same src.
There are problems in mobile devices
Pros
Easy and fast
Modify url with random query
This solution consists in adding a random query parameter to the end of the src attribute, so that all images will have a different source, and therefore they will animate independently of each other. There is one big fat NO: this will lead to a constant request to the server to download the picture, and therefore they will no longer be cached. And if we need to display 100 identical pictures, then there will be 100 requests to the server. Rough and tough, but it always works.
Cons
Each picture with a unique query will be reloaded from the server.
Pros
Easy and fast
Modify dataUrl (Proposed Solution)
Data URLs, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents. They were formerly known as "data URIs" until that name was retired by the WHATWG.
MDN
The dataUrl structure from this documentation:
data:[<mediatype>][;base64],<data>
And this is how it is indicated in the specification:
dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
mediatype := [ type "/" subtype ] *( ";" parameter )
data := *urlchar
parameter := attribute "=" value
If you look closely at the description of mediatype, then some strange parameter is indicated there. But, there is also a specification:
attribute := token
; Matching of attributes
; is ALWAYS case-insensitive.
value := token / quoted-string
token := 1*<any (US-ASCII) CHAR except SPACE, CTLs, or tspecials>
tspecials := "(" / ")" / "<" / ">" / "#" /
"," / ";" / ":" / "\" / <">
"/" / "[" / "]" / "?" / "="
; Must be in quoted-string,
; to use within parameter values
As can be seen, we can specify any parameter, the main thing is that it meets the requirements presented above!
Therefore, we can embed an additional attribute in the mediatype, which will not affect the image in any way, but the data url will differ from the same image.
Generalized algorithm:
We load the image through a regular request and remove the metadata from created dataUrl from blob.
fetch("https://cdn140.picsart.com/330970106009201.gif").then(async (res) => {
const blob = await res.blob();
const reader = new FileReader();
reader.onload = (ev) => {
// It would be reasonable to remove metadata to the point!
// But for simplicity, I'm using this implementation.
const dataUrl = ev.currentTarget.result.replace(
"data:image/gif;base64",
""
);
};
reader.readAsDataURL(blob);
});
Create/edit img element with src attribute "src=data:image/gif;base64;${Math.random()}${dataUrl}"
That is all!
Example Vanila JS
const url = "https://cdn140.picsart.com/330970106009201.gif";
function loadImage(src) {
fetch(src)
.then((res) => res.blob())
.then(async(blob) => {
const reader = new FileReader();
reader.onload = (ev) => {
const dataUrl = ev.currentTarget.result.replace("data:image/gif;base64", "")
const container = document.getElementById("container");
while (container.firstChild) {
container.firstChild.remove()
}
for (let i = 0; i < 6; i++) {
const img = document.createElement("img");
img.setAttribute("src", `data:image/gif;base64;gif-id=${Date.now()}${dataUrl}`)
container.appendChild(img);
img.addEventListener('click', ev => {
img.setAttribute("src", `data:image/gif;base64;gif-id=${Date.now()}${dataUrl}`)
})
}
};
reader.readAsDataURL(blob);
});
}
loadImage(url);
function updateImage() {
const newSrc = document.getElementById("image-src");
loadImage(document.getElementById("image-src").value);
}
#main {
display: flex;
flex-direction: column;
gap: 5px;
}
img {
width: 128px;
height: 128px;
padding: 5px;
}
<div id="main">
<label>Change gif url if current will become unavailable </label>
<input id="image-src" value="https://cdn140.picsart.com/330970106009201.gif"></input>
<button onclick="updateImage()">Update image source attribute</button>
<span>Click to reset!</span>
<div id="container">
</div>
</div>
Example React
import React, { useState, useRef } from "react";
function App() {
const [stars, setStars] = useState(0);
const [data, setData] = useState(null);
const ref = useRef(null);
React.useEffect(() => {
fetch("https://cdn140.picsart.com/330970106009201.gif")
.then((res) => res.blob())
.then(async (text) => {
const reader = new FileReader();
reader.onload = (ev) => {
setData(ev.currentTarget.result.replace("data:image/gif;base64", ""));
};
reader.readAsDataURL(text);
});
}, []);
return (
<React.Fragment>
<p onClick={() => setStars((s) => s + 1)}>+</p>
{data &&
new Array(stars).fill().map((s, ind) => {
return <Star src={data} key={ind}></Star>;
})}
<p onClick={() => setStars((s) => (s === 0 ? 0 : s - 1))}>-</p>
</React.Fragment>
);
}
export function Star(props) {
const [id] = useState(Math.random());
return (
<img
className="icon"
src={`data:image/gif;base64;gif-id=${id}` + props.src}
alt="animated star"
/>
);
}
export default App;
I came across this thread after searching many others. David Bell's post led me to the solution I needed.
I thought I'd post my experience in the event that it could be useful for anyone trying to accomplish what I was after. This is for an HTML5/JavaScript/jQuery web app that will be an iPhone app via PhoneGap. Testing in Chrome.
The Goal:
When user taps/clicks button A, an animated gif appears and plays.
When user taps/clicks button B, gif disappears.
When user taps/clicks button A again, after tapping/clicking button
B, animated gif should reappear and play from the beginning.
The Problem:
On tap/click of button A, I was appending the gif to an existing div. It would play fine.
Then, on tap/click of button B, I was hiding the container div, then setting the img src of the gif to an empty string (''). Again, no problem (that is, the problem wasn't evident yet.)
Then, on tap/click of button A, after tap/click of button B, I was re-adding the path to the gif as the src.
- This did not work. The gif would show up on subsequent taps/clicks of button A...however, the more I tapped/clicked button A, the more times the gif would load and start over. That is, if I went back and forth, tapping/clicking button A then button B 3 times, the gif would appear and then start/stop/start 3 times...and my whole app started to chug. I guess the gif was being loaded multiple times, even though I had set the src to an empty string when button B was tapped/clicked.
The Solution:
After looking at David Bell's post, I arrived at my answer.
I defined a global variable (let's call it myVar) that held the container div and the image (with the source path) within.
On the tap/click function of button A, I appended that container div to an existing parent div in the dom.
In that function, I created a new variable that holds the src path of the gif.
Just like David suggested, I did this (plus an append):
$('#mainParent').append(myVar);
var imgsrc = $('#my_image').attr('src');
$('#my_image').attr('src', '');
$('#my_image').attr('src', imgsrc);
THEN, in the function for button B, I set the src to an empty string and then removed the div containing the gif:
$('#my_image').attr('src', '');
$('#mainParent').find('#my_image').remove();
Now, I can tap/click button A then button B then button A, etc., all day long. The gif loads and plays on tap/click of button A, then hides on tap/click of button B, then loads and plays from the beginning on subsequent taps of button A every time with no issues.
I worked out a complete solution for this problem. It can be found here: https://stackoverflow.com/a/31093916/1520422
My solution restarts the animation WITHOUT re-loading the image data from the network.
It also enforces the image to repaint to fix some painting artefacts that occured (in chrome).

Categories

Resources