1

イオンプロジェクトで 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
        };

    }

これが私の結果画面です。フィルタリングされた画像を表示したい。しかし、元の画像が表示されています。

私はこのようにしたくない:

こんなの欲しくない

私を助けてください。高度な回答に感謝します.... :)

4

1 に答える 1