AngularJS: Load base64 image from a file - javascript

I have a list of images, but every image have a s3 file with his base64 encoded inside this file.
Example of image:
https://s3.eu-central-1.amazonaws.com/sensicityissues/1483573056505-61946
The problem is that if I did something like this:
<img src="https://s3.eu-central-1.amazonaws.com/sensicityissues/1483573056505-61946" />
The image is not loaded.
If I want that this works in this way I need to do something like this:
HTML:
<div ng-init="vm.loadImage(image, image.url)">
<img ng-if="image && image.src" data-ng-src="{{image.src}}" width="60" />
</div>
JS:
self.loadImage = (img, url) => {
$http.get(`http://cors.io/?${url}`)
.then(r => (img.src = r.data))
}
This is working... Okey... But I have 2 big problems with this:
CORS problems, that I need to resolve with http://cors.io/?${url}. For me is not a good solution because is a slowly way to load all the images and if some day cors.io stops working, my webpage neither will work...
If I load an amout of images with this way, all the base64 encoded strings are in memory and the page will have a several memory problems.
Is there another solution to implement this avoiding these big problems?
(I can't change how images are saved in s3...)
Thank you so much.

You can find an example on this fiddle. Also, on this question you can find out the way to load base64 images.
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
You can't mix http schema that gives you a non byte response as your src attribute value.
You gonna need to build a backend feature in order to serve you these images to your front end app through your own url.

Related

How to replace all img tags in HTML string with <a><img></a>?

I have HTML string and I open it in UIWebView. Now, I want to make all my images clickable, to put them into link tags like:
Was:
<img src="..." />
Became:
<img src="..." />
Is there any easy solution?
I've tried to find all tags and replace them inside of the string, but it was very painful.
I've tried that:
let js = "var a=document.createElement('a');a.href='http://mylink.com';var image = document.getElementById('mydiv').getElementsByTagName('img')[0];b=a.appendChild(image);document.getElementById('mydiv').appendChild(a);"
self.webView.stringByEvaluatingJavaScriptFromString(js)
but it did not help me
Short answer: No, there is not an easy solution. Don't do that. Trying to parse and change HTML source from a client app is a horrible idea, and will always be very painful. It's kind of like trying to perform brain surgery on yourself with a sawzall, a mirror, and some old dental tools.

How to replace multiple images with Javascript and change back

I've been working on trying to get these buttons to change when clicked - which now works, but now I need them to toggle between the on and off states when the user clicks (so they can turn the buttons on and off). I'm sure this is an easy fix, but I'm new to Javascript and I don't have anyone to bounce ideas off of.
<html>
<head>
<script type="text/javascript">
function changeimage(img, new_src)
{
var cur_src = img.src.substring(img.src.lastIndexOf("/")+1);
if (cur_src == new_src)
{
img.src = img.old_src;
}
else
{
img.old_src = cur_src;
img.src = new_src;
}
}
</script>
</head>
<body>
<img onclick="changeimage(this, 'images/buttonA_on.png')" src="images/buttonA_off.png" />
<img onclick="changeimage(this, 'images/buttonB_on.png')" src="images/buttonB_off.png" />
<img onclick="changeimage(this, 'images/buttonC_on.png')" src="images/buttonC_off.png" />
<img onclick="changeimage(this, 'images/buttonD_on.png')" src="images/buttonD_off.png" />
<img onclick="changeimage(this, 'images/buttonE_on.png')" src="images/buttonE_off.png" />
<img onclick="changeimage(this, 'images/buttonF_on.png')" src="images/buttonF_off.png" />
</body>
</html>
Much thanks!
When I started using JavaScript I wasted a bunch of time trying to do things that other libraries could easily take care of for me. A few months after that I discovered jQuery which has drastically reduced the amount of time I spend on front-end projects. All you have to do is include the jQuery file in an html project and you're good to go.
In jQuery, you can toggle a class on and off with one line. it looks something like this:
$('.toggleimage').toggleClass('on');
In the above example, '.toggleimage' is just a class I gave to a div, toggleClass is the jQuery command, and 'on' is the name of the class I want to toggle. This probably seems like greek right now, but I recommend going through codeschool's jQuery tutorials to get caught up. If you're thinking of doing serious web development... it's a crucial tool. Here is the full code:
link to full code on my Gist
In order to make it work, make sure you have the right file structure. Create a folder, then create the html file there. In addition, create three subfolders (one for css, one for images, one for scripts). The css folder holds your style.css, the images folder holds mario.jpg, and the scripts folder contains your jQuery file. You can substitute in any image you want, just make sure the changes are applied to style.css.
function changeImg(img) {
if ( img.src.indexOf("_off") > 0 ) {
img.src = img.src.replace("_off","_on");
}
else {
img.src = img.src.replace("_on","_off");
}
}
it will work if you have 50x2 different images, named "imgName1_uw.jpg", "img1_moored.jpg", "img2_uw.jpg", "img2_moored.jpg", etc.
may be its helps you

javascript change Image by clicking thumbnail

I am a newbie in javascript and tried a lot of things for hours, but nothing worked.
I will change a big imgage by clicking on a thumbnail.
Untill now I got following script. Not much really... :-(
<script type="text/javascript">
function changeImage() {
document.getElementById("img").src="img/upload/test1.jpg";
}
</script>
<img id="img" name="change" src="img/upload/test.jpg">
<img src="img/thumbnail/test.jpg" alt="" id="imgClickAndChange" onclick="changeImage()">
<img src="img/thumbnail/test1.jpg" alt="" id="imgClickAndChange" onclick="changeImage()">
All big picture are under src"img/upload/xxx.jpg" and all thumbnails under src="img/thumbnail/xxx.jpg". When I click the thumbnail, it have to change the big picture and it have to give the parameter in the javascript. Like onclick="changeImage(xxx.jpg).
The problem is every page have other pictures. I get them from a database. So the name of the picture is like a variable. I hope you understand. It is hard for me to explain. :-(
Thanks for your help in advance.
Greets Yanick
Pass the image parameter to the function like,
function changeImage(image) {
document.getElementById("img").src=image;
}
<img src="img/thumbnail/test.jpg" alt="" id="img"
onclick="changeImage('img/upload/test1.jpg')" />
Keep ids unique. DOM elements "must" possess unique IDs for all practical reasons.
Though you could do an inline onclick, a better way to proceed with it is something as follows.
Assuming you have the images generated from some templating library either on the client or from the server, add data attributes with the image sources and a common class to all of these elements right there and add an event listener from your Javascript bound to elements matching the class and picking up the data attribute to replace the image source.

AngularJS - Show byte array content as image

I'm searching into my database a image as a byte array. I want to show this content as file using the markup image, but it doesn't work here.
// Controller which get my image and put into $scope.
function MyController($scope, $http, $location) {
var url = '/json/FindImage?id=1';
$http.get(url).success(function(result) {
$scope.image = result.Image;
}
}
// HTML
<!-- It doesn't work -->
<img src="{{image}}" />
<!-- It doesn't work also -->
<img ng-src="{{image}}" />
Any idea?
Thank you all!
Use ng-src in the following format
<img ng-src="data:image/JPEG;base64,{{image}}">
Don't forget to add a sanitization filter for data to not be marked as unsafe by angular:
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|ftp|blob):|data:image\//);
If you can get your server to return the image in a base64 encoded string, you could use a data url as the src attribute.
Make sure The Data you are returning to show as a image is converted to
ToBase64String
In your C# code, Use Convert.ToBase64String(imageBytes) and in the view use this
The src attribute of img points to the source file of the image, it doesn't contain the actual source data. You can't do what you want this way; instead, you would have to write an image decoder in JavaScript (e.g., https://github.com/devongovett/png.js), which outputs into a canvas element.

Can't display Base64 as PNG

I have been using the HTML canvas to save a drawing. However, when I try and implement the image using the base64 code it doesn't work. Where am I going wrong?
Here is the code I use for my canvas paint (sorry its a bit messy): http://jsfiddle.net/9ht4N/
Here is the code I'm using to display the image: http://jsfiddle.net/QEmcw/
I'm just using something like:
<img src="base64 code here" alt="img" />
you need this in front of the Base64 Code: "data:image/png;base64,"

Categories