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,"
Related
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.
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.
I want to show in my html page an image that I've attached in a document on couchdb.
How I can do this using javascript (jquery)?
I solved using
$.couch.db("mydb").view(...)
to obtain the id of document that I'm interesting. And
$.couch.db("mydb").openDoc(id, {...})
to obtain the image coded in base64. After that I put this base64's code in tag
<img src="data:image/jpg; base64, ...">
Actually you can do this by adding img tag:
<img src="http://somehost/somedatabase/document/attachment">
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.
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.