Can't get data(base64) from filtered image by vintagejs?

I am trying to filter image by VintageJS in ionic project. but i cant get filtered image data with base64. i have saved image to a canvas, and get data from the canvas. but i am getting original image data rather than filtered image. :( Here are my some code part.

function initVImage() {
        // image initialize
        $scope.image = document.getElementById('my-photo');
        $scope.image.src = ''+$scope.photo.uri + $scope.photo.name;
        $scope.options = {
            onError: function() {
                alert('ERROR');
            }
        };

        $scope.effect = {
            vignette: 0.6,
            sepia: true
        };
    }

    $scope.imageProcess = function( num ){

        initVImage();
        $scope.effects = null;

        if (num == EFFECT.NONE){
            $scope.vimage.reset();
            return;
        }else if(num == EFFECT.VINTAGE){
            $scope.effects = vintagePresets.vintage;
        }else if(num == EFFECT.SEPIA){
            $scope.effects = vintagePresets.sepia;
        }else if(num == EFFECT.GREENISH){
            $scope.effects = vintagePresets.greenish;
        }else if(num == EFFECT.REDDISH){
            $scope.effects = vintagePresets.reddish;
        }else if(num == EFFECT.VIEWFINDER){
            $scope.effects = vintagePresets.frameSet;
        }

        $scope.vimage = new VintageJS($scope.image, $scope.options, $scope.effects);

        //var newFile = new File($scope.vimage, 'testImage.jpg');

        updateFilteredImage($scope.image);
    };

    function updateFilteredImage( img_data ) {
        var canvas = document.createElement('canvas');
        var imageEle = img_data;
        canvas.width = imageEle.width;
        canvas.height = imageEle.height;
        var context = canvas.getContext('2d');
        context.drawImage(imageEle,0,0);
        var base64Image = canvas.toDataURL('image/jpeg');

        $scope.getImage = {
            image : base64Image
        };

    }

Here is my result screen. i want to show the filtered image. but it is showing original image.

I don't want like this:

Please help me. Thank you very much to advanced answers.... :)

Answers


Please use latest version from vintageJS. It supports data url.

Below is the sample code get from vintageJS:

// use an image as source and update image with data url
const srcEl = document.querySelector('img.myImage');
vintagejs(srcEl, { brightness: 0.2 })
  .then(res => {
    srcEl.src = res.getDataURL();
  });

Need Your Help

Simpler way to split String from .txt file in Java

java io integer

Here is the code that I created. It works the way I wanted but I think it could have been simpler.

How to require an external js library in Node.js with a typescript declaration file

javascript node.js typescript

I have a Node.js project written in Typescript and I am trying to get it to work with mime.js (https://github.com/broofa/node-mime). I have a declaration file (https://github.com/borisyankov/