javascript - 无法从 vintagejs 过滤后的图像中获取数据(base64)？

Question

我正在尝试在 ionic 项目中通过 VintageJS 过滤图像。但我无法使用 Base64 获取过滤后的图像数据。我已将图像保存到 Canvas ，并从 Canvas 获取数据。但我得到的是原始图像数据而不是过滤后的图像。 :(这是我的一些代码部分。

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
        };

    }

这是我的结果屏幕。我想显示过滤后的图像。但它显示的是原始图像。

我不想这样:

请帮助我。非常感谢您的高级回答......:)

Answer 1

请使用vintageJS中的最新版本。它支持数据url。

下面是从 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();
  });