Javascript 如何用动态图像在camanJs画布中产生效果？

我正在开发mean stack应用程序。
我被困在照片编辑器中。
我使用“Camanjs”使照片生效，并在angularjs 1中编辑它。 它将很好地与第一个图像的滑块，但如果我选择任何其他图像形式的滑块编辑后，第一个图像，然后它显示旧的图像

我的文件（angularjs中的指令）

->如果我对“this.revert（false）；“line and uncomment”this.reloadCanvasData（）；“line form”scope.applyImageParameters”函数进行注释，那么它工作得很好，但在色调0、对比度0等情况下不起作用

->如果我对“this.reloadCanvasData（）；“line and uncomment”this.revert（false）；“line form”scope.applyImageParameters”函数进行注释，则效果非常好，但它显示的是旧图像，而不是具有效果的当前图像

图像附加两个屏幕排序以获取更多详细信息

---

有人能帮我解决这个问题吗？

你应该移除画布，然后再次创建画布

.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();

        });
    }
};
}])

.directive（'hzPhotoEditor'，['$timeout'，函数（$timeout）{
返回{
限制：“E”，
链接：功能（范围、要素、属性）{
var imgCanvas，$save；
//单击真实照片时初始化照片
作用域：$on（“填充画布”，函数（事件、数据）{
log（“填充画布”）；
console.log（data.photo）；
范围.填充画布（数据）；
});
scope.fillCanvas=函数（数据）{
var hzMIW=0，
hzMIH=0，
hzImgH=0，
hzImgW=0，
路径=“”，
c、 c1，ctx，ctx1；
angular.element（“.hz照片编辑器包装”）.attr（“样式”，angular.element（.hz模态包装”）.attr（“样式”）；
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 model slider image”）.height（））；
angular.element（“.hz photo editor wrapper.hz photo editor img”）.attr（“width”，angular.element（“.hz model slider image”）.width（））；
hzMIW=angular.element（“.hz modal wrapper.hz modal image”）.css（“宽度”）.replace（“px”，“px”）；
hzMIH=angular.element（“.hz modal wrapper.hz modal image”）.css（“高度”）.replace（“px”，“高度”）；
hzImgH=angular.element（“.hz modal wrapper.hz modal image img”）.css（'height'）。替换（“px”，”）；
hzImgW=angular.element（“.hz modal wrapper.hz modal image img”）.css（'width'）。替换（“px”，”）；
$（“.hz模态图像”）.children（“画布”）.remove（）；
var canvas=$（“”）.attr（{id:'photoEditorCanvas'}）；
$（“.hz模态图像”）.append（画布）；
c=document.getElementById（'photoEditorCanvas'）；
c、 宽度=HZIGW；
c、 高度=HZIGH；
ctx=c.getContext（'2d'）；
imgCanvas=新图像（）；
imgCanvas.src=路径；
console.log（“imgCanvas.src”）；
console.log（imgCanvas.src）；
如果（imgCanvas！==imgCanvas）{
log（“画布是加载…”）；
}
角度.element（'input[type=range]'）.val（0）；
imgCanvas.addEventListener（'load'，function（））{
/*clearRect（0,0,0,0）*/
控制台日志（imgCanvas）；
ctx.drawImage（imgCanvas，0，0，hzImgW，hzImgH）；
}，假）；
};
//通过滑块般的色调、对比度、深褐色产生效果
scope.applyImageParameters=函数（）{
色变、色变、色变、振动、色变；
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（）{
此项。还原（假）；
//此参数为.reloadCanvasData（）；
this.hue（hue）.contrast（cntrst）.vibrance（vibr.sep.render（）；
});
};
角度。元素（“输入[类型=范围]”）。更改（“鼠标悬停”，函数（e）{
scope.applyImageParameters（）；
console.log（“事件类型：+e.type”）；
var min=e.target.min，
max=e.target.max，
val=e.目标值；
angular.element（e.target）.css({
“背景尺寸”：（最小值）*100/（最大值最小值）+'%100%
});
//scope.reloadCanvasData（）；
});
}
};
}])

.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();

        });
    }
};
}])