AngularJS - Show byte array content as image - javascript

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.

Related

AngularJS: Load base64 image from a file

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.

How to Load local images in Angular JS?

I am just starting with AngulerJs and I want to load a image from a sub-folder.
This is my controller code:.
$scope.img_source = "../WebContent/Welcom2Iquote.gif";
This is the code in my index.html:
<img ng-src="{{img_source}}"/>
You can do like this
$scope.img_source = "../WebContent/Welcom2Iquote.gif";
if this your scope variable of the image path you can bind the image like below in your html using ng-src
<img ng-src="{{ img_source }}" />
Use the image tag as you used to place image for normal html images
<img ng-src="../assets/img/{{img_source}}" alt="img_source" title="img_source">
If you're using the angular-cli, you should have an assets folder in your solution.
Drop in the image you want to load, into this folder.
Now on the whatever-component.html page insert this line
<img src="assets/{{img_source}}" alt="img_source" title="img_source">
The {{}} requires you to define the img_source in the typescript file corresponding to the whatever-component.html file.
So define the the name of the picture over there:
public img_source: string = 'yourpicture.jpg';

Angularjs Image Compress passing value into $scope model

I would like to ask, so I came across this angular image compress function which works great as per what I want. I have successfully implement it to work but there is 1 problem, the compress function returns me with a base64 encoded image which is stored in a local $scope and can only be called in the html page itself if I am not mistaken like such.
<td style="width: 15%">
<div class="canvas-wrapper">
<img class="canvas-image" ng-src="<%image1.compressed.dataURL%>"/></div>
</td>
<td>
<input id="inputImage" ngf-select ng-model="statusData.file" ngf-multiple=false type="file" accept="image/*" image="image1" resize-max-height="800" resize-max-width="800" resize-quality="0.5" resize-type="png" />
</td>
In order for me to get the compressed image I have to echo the base64 code by calling <%image1.compressed.dataURL%>
Now my problem is how should I pass this value into the $scope model that i have created specifically to store this value? I tried doing something like
<%$scope.imageCache.data = image1.compressed.dataURL%> but it did not work.
I need the conpressed data to be passed into my custom module so I can perform other actions with the image.
Here is a Demo of the code working code
Hopefully someone can help me in such scenario.
Update 1: Found a temporary cheating workaround is by calling ng-click="image1 = null" when user click on the icon.
ng-src is a directive that evaluates its content. Thus you should provide a value from your $scope.
<img class="canvas-image" ng-src="image1.compressed.dataURL"/>
This will provide the data given that in $scope.image1.compressed.dataURL you have correct data.
So without using ng-src it would be
<img class="canvas-image" src="{{image1.compressed.dataURL}}"/>
Or with your modified interpolation symbols
<img class="canvas-image" src="<%image1.compressed.dataURL%>"/>

process angular function on view renedring

i have image url in this format in database
http://www.nobrok.com/roomrent1/public/uploads/5269/b4a3263f52c1c4725096ee299fa2c64051cb9b4d.jpg::
i am trying to pass image url to a angular controllers method like this
<img src="sizeImg(comment.pictures)">
and i have written a function to process the url like this
$scope.sizeImg = function(pictures){
return 'http://www.nobrok.com/roomrent1/public/uploads/5269/b4a3263f52c1c4725096ee299fa2c64051cb9b4d.jpg';
}
but the function is not working
You can't pass javascript directly into into src, and the angular documentation for ngSrc mentions "Using Angular markup like {{hash}} in a src attribute doesn't work right now" Try ng-src.
<img ng-src="{{ sizeImg(comment.pictures) }}">
https://docs.angularjs.org/api/ng/directive/ngSrc
Codepen example: http://codepen.io/anon/pen/gfvIr

get a CouchDB attachment and show it on a html page

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">

Categories