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

Question

我正在开发平均堆栈应用程序 我被困在照片编辑器中 我使用＆＃34; Camanjs ＆＃34;使照片生效并在angularjs 1中编辑它。 它适用于滑块的第一个图像，但如果我在编辑第一个图像后选择任何其他图像形式滑块，则它会显示旧图像。

  

我的文件（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();

            });
        }
    };
}])

- ＆gt;如果我评论＆＃34; this.revert（false）;＆＃34; line和uncomment＆＃34; this.reloadCanvasData（）;＆＃34; line form＆＃34; scope.applyImageParameters＆＃34;功能然后它工作得很好，但它不会在色调0，对比0等工作。

- ＆gt;如果我评论＆＃34; this.reloadCanvasData（）;＆＃34; line和uncomment＆＃34; this.revert（false）;＆＃34; line form＆＃34; scope.applyImageParameters＆＃34;功能然后效果很好，但它显示旧图像而非当前图像有效

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

First edited image after giving effect

Second image after giving effect

任何机构都可以帮我解决这个问题吗？

Answer 1

您应该删除画布并再次创建画布。

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

        });
    }
};
}])