javascript - 如何在带有动态图像的camanJs canvas中产生效果？

Question

我正在开发平均堆栈应用程序。
我卡在了照片编辑器中。
我使用“Camanjs”对照片产生影响并在 angularjs 1 中对其进行编辑。它与 slider 的第一张图像配合使用效果很好，但如果我在编辑第一张图像后选择任何其他图像形式的 slider ，则它会显示旧图像。

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

            });
        }
    };
}])

->如果我评论“this.revert(false);”行并取消注释“this.reloadCanvasData();”行形式的“scope.applyImageParameters”函数然后它工作得很好，但它不会在色调 0、对比度 0 等下工作。

->如果我评论“this.reloadCanvasData();”行并取消注释“this.revert(false);”行形式“scope.applyImageParameters”函数然后效果很好但它显示旧图像而不是当前图像具有效果

图片附有两个屏幕分类以获取更多详细信息。

First edited image after giving effect

Second image after giving effect

谁能帮我解决这个问题？

Answer 1

您应该删除 Canvas 并再次创建 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();

        });
    }
};
}])