GET [removed]{{image}} net::ERR_INVALID_URL

Question

I want to convert image data that I get from server using Angular.js (for use in ionic-framework), I have use this code :

$http.post(link, {
          token:         


        

Answer 1

A working approach to base64 encoding of images is to use Canvas and toDataURL() method, but you need to load your image data from server to an Image istance (via src property). Here is an example:

function getBase64() {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext("2d");
    var img = new Image();
    img.onload = function () {
        ctx.drawImage(img, 0, 0);
        // pay attention: image here contains complete base 64 data url, no need for "data:image/png;base64," header...
        $scope.image = canvas.toDataURL();
        if (!$scope.$$phase) $scope.$apply();
    };
    img.src = "http://.../myImagepng";
}

Preferably you could encode to base64 your image on the server side and return the response to the client already encoded. For example in PHP:

$pathToImg = 'myfolder/myimage.png';
$type = pathinfo($pathToImg, PATHINFO_EXTENSION);
$data = file_get_contents($pathToImg);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);