how to give effect in camanJs canvas with dynamic image?

Question

I am developing mean stack application.
I am stuck in photo editor.
I have use " Camanjs " for give effect to photo and edit it in angularjs 1. It will works very well with first image for slider, but if i select any other image form slider after edit first image then it display old image.

my file (directive in angularjs)

.directive('hzPhotoEditor', ['$timeout', function($timeout) {
    return {
        restrict: "E",
        link: function(scope, elem, attrs) {
            var imgCanvas, $save;

            //init photo when click on real photo
            scope.$on("fillCanvas", function(event, data) {
                console.log("fill canvas called");
                console.log(data.photo);
                scope.fillCanvas(data);
            });

            scope.fillCanvas = function(data) {
                var hzMIW = 0,
                    hzMIH = 0,
                    hzImgH = 0,
                    hzImgW = 0,
                    path = '',
                    c, c1, ctx, ctx1;

                angular.element(".hz-photo-editor-wrapper").attr("style", angular.element(".hz-modal-wrapper").attr("style"));
                angular.element(".hz-photo-editor-wrapper .hz-left").attr("style", angular.element(".hz-modal-wrapper .hz-left").attr("style"));
                angular.element(".hz-photo-editor-wrapper .hz-modal-image-wrapper").attr("style", angular.element(".hz-modal-wrapper .hz-modal-image-wrapper").attr("style"));
                angular.element(".hz-photo-editor-wrapper .hz-modal-image").attr("style", angular.element(".hz-modal-wrapper .hz-modal-image").attr("style"));
                angular.element(".hz-photo-editor-wrapper .hz-photo-editor-img").attr("height", angular.element(".hz-modal-slider-image").height());
                angular.element(".hz-photo-editor-wrapper .hz-photo-editor-img").attr("width", angular.element(".hz-modal-slider-image").width());
                hzMIW = angular.element(".hz-modal-wrapper .hz-modal-image").css("width").replace("px", "");
                hzMIH = angular.element(".hz-modal-wrapper .hz-modal-image").css("height").replace("px", "");
                hzImgH = angular.element(".hz-modal-wrapper .hz-modal-image img").css('height').replace("px", "");
                hzImgW = angular.element(".hz-modal-wrapper .hz-modal-image img").css('width').replace("px", "");


                path = '/media/site/photo/' + data.photo.photo_name;

                c = document.getElementById('photoEditorCanvas');
                c.width = hzImgW;
                c.height = hzImgH;

                ctx = c.getContext('2d');
                imgCanvas = new Image();
                imgCanvas.src = path;
                console.log("imgCanvas.src");
                console.log(imgCanvas.src);
                if (imgCanvas !== imgCanvas) {
                    console.log("canvas is load.....");
                }

                angular.element('input[type=range]').val(0);

                imgCanvas.addEventListener('load', function() {
                    /*ctx.clearRect(0, 0, 0, 0);*/
                    console.log(imgCanvas);
                    ctx.drawImage(imgCanvas, 0, 0, hzImgW, hzImgH);
                }, false);

            };

            //give effect by slider like hue, contrast, sepia
            scope.applyImageParameters = function() {
                var hue, cntrst, vibr, sep;
                hue = parseInt(angular.element('#hue').val());
                cntrst = parseInt(angular.element('#contrast').val());
                vibr = parseInt(angular.element('#vibrance').val());
                sep = parseInt(angular.element('#sepia').val());

                Caman('#photoEditorCanvas', imgCanvas, function() {
                    this.revert(false);
                    //this.reloadCanvasData();
                    this.hue(hue).contrast(cntrst).vibrance(vibr).sepia(sep).render();

                });
            };

            angular.element("input[type=range]").change("mouseup", function(e) {
                scope.applyImageParameters();
                console.log("event type: " + e.type);
                var min = e.target.min,
                    max = e.target.max,
                    val = e.target.value;
                angular.element(e.target).css({
                    'backgroundSize': (val - min) * 100 / (max - min) + '% 100%'
                });
                //scope.reloadCanvasData();

            });
        }
    };
}])

->if I comment on "this.revert(false);" line and uncomment "this.reloadCanvasData();" line form "scope.applyImageParameters" function then it works very well, but it will not work in hue 0, contrast 0,etc.

->if I comment on "this.reloadCanvasData();" line and uncomment "this.revert(false);" line form "scope.applyImageParameters" function then effect works verry well but it display old image not current image with effect

Image attached two screen sort for more details.

First edited image after giving effect

Second image after giving effect

Can any body help me to resolve this issue?

Answer 1

You should remove canvas and the again create a canvas.

.directive('hzPhotoEditor', ['$timeout', function($timeout) {
return {
    restrict: "E",
    link: function(scope, elem, attrs) {
        var imgCanvas, $save;

        //init photo when click on real photo
        scope.$on("fillCanvas", function(event, data) {
            console.log("fill canvas called");
            console.log(data.photo);
            scope.fillCanvas(data);
        });

        scope.fillCanvas = function(data) {
            var hzMIW = 0,
                hzMIH = 0,
                hzImgH = 0,
                hzImgW = 0,
                path = '',
                c, c1, ctx, ctx1;

            angular.element(".hz-photo-editor-wrapper").attr("style", angular.element(".hz-modal-wrapper").attr("style"));
            angular.element(".hz-photo-editor-wrapper .hz-left").attr("style", angular.element(".hz-modal-wrapper .hz-left").attr("style"));
            angular.element(".hz-photo-editor-wrapper .hz-modal-image-wrapper").attr("style", angular.element(".hz-modal-wrapper .hz-modal-image-wrapper").attr("style"));
            angular.element(".hz-photo-editor-wrapper .hz-modal-image").attr("style", angular.element(".hz-modal-wrapper .hz-modal-image").attr("style"));
            angular.element(".hz-photo-editor-wrapper .hz-photo-editor-img").attr("height", angular.element(".hz-modal-slider-image").height());
            angular.element(".hz-photo-editor-wrapper .hz-photo-editor-img").attr("width", angular.element(".hz-modal-slider-image").width());
            hzMIW = angular.element(".hz-modal-wrapper .hz-modal-image").css("width").replace("px", "");
            hzMIH = angular.element(".hz-modal-wrapper .hz-modal-image").css("height").replace("px", "");
            hzImgH = angular.element(".hz-modal-wrapper .hz-modal-image img").css('height').replace("px", "");
            hzImgW = angular.element(".hz-modal-wrapper .hz-modal-image img").css('width').replace("px", "");


            $(".hz-modal-image").children("canvas").remove();
            var canvas_ = $("<canvas></canvas>").attr({id: 'photoEditorCanvas'});
            $(".hz-modal-image").append(canvas_);

            c = document.getElementById('photoEditorCanvas');
            c.width = hzImgW;
            c.height = hzImgH;

            ctx = c.getContext('2d');
            imgCanvas = new Image();
            imgCanvas.src = path;
            console.log("imgCanvas.src");
            console.log(imgCanvas.src);
            if (imgCanvas !== imgCanvas) {
                console.log("canvas is load.....");
            }

            angular.element('input[type=range]').val(0);

            imgCanvas.addEventListener('load', function() {
                /*ctx.clearRect(0, 0, 0, 0);*/
                console.log(imgCanvas);
                ctx.drawImage(imgCanvas, 0, 0, hzImgW, hzImgH);
            }, false);

        };

        //give effect by slider like hue, contrast, sepia
        scope.applyImageParameters = function() {
            var hue, cntrst, vibr, sep;
            hue = parseInt(angular.element('#hue').val());
            cntrst = parseInt(angular.element('#contrast').val());
            vibr = parseInt(angular.element('#vibrance').val());
            sep = parseInt(angular.element('#sepia').val());

            Caman('#photoEditorCanvas', imgCanvas, function() {
                this.revert(false);
                //this.reloadCanvasData();
                this.hue(hue).contrast(cntrst).vibrance(vibr).sepia(sep).render();

            });
        };

        angular.element("input[type=range]").change("mouseup", function(e) {
            scope.applyImageParameters();
            console.log("event type: " + e.type);
            var min = e.target.min,
                max = e.target.max,
                val = e.target.value;
            angular.element(e.target).css({
                'backgroundSize': (val - min) * 100 / (max - min) + '% 100%'
            });
            //scope.reloadCanvasData();

        });
    }
};
}])