So basically, I am trying to save an image into localStorage, and then load that same image on the next page.
I came across this great example: http://jsfiddle.net/8V9w6/
Although, I have absolutely no idea how this works since I have only ever used localStorage for extremely small strings.
I have an image that gets changed via a file upload handled by jQuery
<img id="bannerImg" src="images/image-placeholder.jpg" alt="Banner Image" style="display:none;" width="100%" height="200px" />
The jsfiddle link I added above allows multiple file upload, and that is definitely something I would not like to have.
What I need to know is what should I be placing on the first page to save the image, and what should I be placing on the second page to load the image?
I have a save button that will be processing everything.
Something like this ?
var img = new Image();
img.src = 'mypicture.png';
img.load = function() {
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
var data = context.getImageData(x, y, img.width, img.height).data;
localStorage.setItem('image', data); // save image data
};
Get the localStorage on the second page; try something like this:
window.onload = function() {
var picture = localStorage.getItem('image');
var image = document.createElement('img');
image.src = picture;
document.body.appendChild(image);
};
Related
I have an image saved to a database by converting to a byte array to a string then i am trying to remake the image on the view. But I wanted to make it for if the image was null(no image upload) that they will get a default "no image" image. But it seems when i try to make an if statement within my view with razor. The img src is not able to find the var in the if statement. The reason i need it to fill the src on the img outside of the if statement is because when i submit the form i need it to send the img data back to the action in the controller to reconvert it and save it on the database.
I trying a view different ways to fix it, the best i can do it make scripts inside my if statement. but it still will not connect to my img src.
<!--Remaking the image from a stromg to a char
array to a byte array to a imagefrom the
database to the original image-->
#if (Model.ImagePath != null)
{
char[] imageChars = Model.ImagePath.ToCharArray();
byte[] imageBytes = imageChars.Select(b => (byte)b).ToArray();
var base64 = Convert.ToBase64String(imageBytes);
var imgSrc = String.Format("data:image/gif;base64,{0}", base64);
<script>
var img = getElementById("ImagePath").src;
img.src = "#imgSrc";
</script>
}
else
{
<script>
var img = getElementById("ImagePath");
img.src = "~/Content/no-image-icon.jpg";
getElementById("ImagePath").width = "100";
getElementById("ImagePath").height = "100";
</script>
}
<img id="ImagePath" alt=""/>
when i inspect the page the script has the image converted back into the right format it just wont send it to the img src.
You have:
<script>
var img = getElementById("ImagePath").src;
img.src = "#imgSrc";
</script>
That looks like it is setting img.src.src, which doesn't make sense. That should probably be this, correct? :
<script>
var img = getElementById("ImagePath");
img.src = "#imgSrc";
</script>
And you could also make sure to remove all line breaks:
<script>
var img = getElementById("ImagePath");
var imgSrc = "#imgSrc";
img.src = imgSrc.replace(/[\r|\n]/gm,'');
</script>
Also, as noted by Divya, your image element should come before your script tags, otherwise when you have getElementById("ImagePath");, it won't be able to find that element, since it has not loaded yet.
I figured it out i made a new vareriable in my model and added the string to it in my action that loads the page then just set that as the img src. Thank you for the help tho!
I have an input element with type=image:
<input type="image" src="some/url/that/generates/new/image">
I want to load that image into a canvas element. Usually I would do:
var img = new Image();
img.onLoad = function () {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
};
img.src = inputElement.src;
However, in this case I can not use the src attribute because doing so would generate a new image (the src points to a url that generates a new random image).
Any other ideas how to get to that image once its already loaded? In the chrome devtools I can see the image under the "Sources" tab, so its there...
--- edit
I should have mentioned that the html is not under my control, I am writing a chrome extension and I want to save to that image of the input tag (by attaching it to a post request, that already works. I just dont want to generate a new image by using the src attribute)
Here is my image tag. The image is graph that is generated dynamically from the database. The amount of data involved can vary by a lot. Sometimes it loads in less than a second and other times it can be up to 6 or 7 seconds until the graph image is returned and displayed. What I want to do is display a simple place holder gif until that actual image in loaded.
<img src="#Url.Action("Graph", new { id = Model.ID })" alt="Graph is Loading..." />
Disregarding your ASP completely, you can add the element with the loader as the source and the real image as a data attribute, then load the image with javascript, and swap images once the real image has loaded:
<img src="loader.gif" data-src="/images/menubar.png" />
JS preloading
$('img').each(function() {
var self = this,
src = $(self).data('src'), // get the data attribute
img = new Image(); // create a new image
img.onload = function() { // onload
self.src = this.src; // swap the source
}
img.src = src; // set source of new image
if (this.complete) $(this).load();
});
Javascript Code :
window.onload = function () {
var canvas=document.getElementById("can");
var img=canvas.toDataURL("image/png");
var button = document.getElementById('saveImage');
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA'+
'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO'+
'9TXL0Y4OHwAAAABJRU5ErkJggg==';
button.onclick = function () {
window.location.href = img.replace("image/png", "image/octet-stream");
window.location.href = prev;
};
};
HTML:
<canvas id="can" width="500" height="200"></canvas><br />
<input type="button" value="Done" id="saveImage">
I am able to display the image on div from canvas but when i try to download it using above javascript function it downloads blank image. I want to know how can i get the picture drawn from the canvas.
Try looking here: http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/
The biggest problem you're likely to face is that you can only save the image on the same server as the page which has the canvas element. You'll then have to retrieve that saved image (either server or client side) and prompt the user to save it.
EDIT:
Maybe this would be better, though you need a little bit of server-side code:
http://greenethumb.com/article/1429/user-friendly-image-saving-from-the-canvas/
I'm adding images to an HTML5 canvas using Javascript:
img = new Image();
img.addEventListener('load', loadCallBack, false);
img.src = image_url;
And then loadCallBack draws the image.
The problem is that sometimes the image_url refers to a broken or nonexistent image. When this happens, I get a 404 error in the console and the image on the canvas stays white. Instead, I'd like to be able to replace the image's src attribute with another image_url.
I tried the following and it did not work:
img.addEventListener("error", function(){console.log("404");});
How can I detect the 404s of the images?
Note: I'm still looking for a solution, as neither of the two posted so far has worked.
The same code as the Kostia's answer: just to compare the ugliness of jQuery and the beauty of vanilla javascript:
function brokenImage() { ... }
img = new Image();
img.onerror = brokenImage;
img.src = "invalid_img_name.png";
Works in jQuery for me... http://jsfiddle.net/5v2qG/
img = new Image();
$(img).bind('error', function () {
alert('error called');
});
img.src = "invalid_img_name.png";