Question

我试图在离子项目中通过VintageJS过滤图像。但我不能用base64过滤图像数据。我已将图像保存到画布，并从画布中获取数据。但我得到原始图像数据而不是过滤图像。 :( 这是我的一些代码部分。

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

    }

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

我不想这样：

I don't want like this

请帮帮我。非常感谢您提供高级答案.... :)

Answer 1

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

以下是来自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();
  });

不能通过vintagejs从过滤后的图像中获取数据（base64）？

1 个答案: