How to print base64 Image coming from WebApi, in Angularjs?

Question

I am going to print an Image (embeded as a property into an object), which retrieved from a WebApi.

So far, I could load the image and show it perfectly on my page like the following:

<img ng-src="data:image/jpeg;base64,{{t.Image}}"/>

However the problem is I don't know how can I print this image?

I have tried out the following listing but I am faced with crashed google chrome page.

   var img= window.open($scope.t.Image);
   img.print();

Question is How can I print the Image?

This is my Object coming from WebApi:

 public class TestImage
    {
        public string Name { get; set; }
        public byte[] Image { get; set; }
    }

and the following is how I call the Get method:

  $scope.getData = function (val) {
        return $http.get('http://localhost:2740/GetData', {
            params: {
                name: val
            }
        }).then(function (response) {
            $scope.t = response.data;
            return response.data;
        });
    };

********UPDATED********

$scope.imgName = "myImage";
$scope.print = function () {

    var printContents = document.getElementById($scope.imgName);
    var popupWin = window.open('', '_blank', 'width=300,height=300');
    popupWin.document.open();
    popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + printContents + '</html>');
    popupWin.document.close();
}



<img id="{{imgName}}" ng-src="data:image/jpeg;base64,{{t.Image}}" />

Tech Savant · Accepted Answer · 2015-05-13 11:02:02Z

2

Sorry I misread your question...

Try this ... You will need to assign and ID to the image tag.

$scope.printImg = function(imgName) {
  var printContents = document.getElementById(imgName);
  var popupWin = window.open();
  popupWin.document.open()
  popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + printContents + '</html>');
  popupWin.document.close();
}

edited May 13, 2015 at 11:02

answered May 13, 2015 at 7:26

Tech Savant

3,7671 gold badge21 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mehrdad Kamelzadeh Over a year ago

I have done what you said but the problem is popupWin is undefined when I watch that in debug mode.

Tech Savant Over a year ago

that doesn't make a lot of sense. your defining popupwin right above it.

Tech Savant Over a year ago

Ok, try just removing the width and height, also, does {{imgName}} === "myImage" ? I'll update my answer with width adn height removed. it might be causing issues and is not necessary.

Gherman Over a year ago

In my case the window is opened but onload event doesn't trigger and the window does not print.

Collectives™ on Stack Overflow

How to print base64 Image coming from WebApi, in Angularjs?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related